Skip to main content

Vue Components

Use @monei-js/vue-components to add MONEI payment components to your Vue 3 app. Each component is a native Vue component with typed props and template ref submit().

Install​

npm install @monei-js/vue-components @monei-js/components

Requires Vue 3.3 or later.

Components​

ComponentDescription
CardInputSecure card input (iframe) with submit()
BizumBizum button + phone verification modal
PayPalPayPal checkout button
PaymentRequestApple Pay / Google Pay button

Card Input​

The Card Input component collects card number, expiry, and CVC in a single secure iframe. Use a template ref to call submit() and get a payment token.

<template>
  <div>
    <CardInput ref="cardInput" :payment-id="paymentId" :on-change="handleChange" />
    <button @click="handleSubmit">Pay</button>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script setup lang="ts">
  import {ref} from 'vue';
  import {CardInput, confirmPayment} from '@monei-js/vue-components';

  const props = defineProps<{paymentId: string}>();
  const cardInput = ref<InstanceType<typeof CardInput>>();
  const error = ref('');

  function handleChange(event: {error?: string}) {
    error.value = event.error ?? '';
  }

  async function handleSubmit() {
    const result = await cardInput.value!.submit();
    if (result.error) {
      error.value = result.error;
      return;
    }
    await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});
  }
</script>

See the API Reference for all CardInput props (style, placeholders, error messages, event callbacks).

Bizum​

The Bizum component renders a Bizum payment button. When the customer clicks it, a phone verification modal opens to complete the payment.

<template>
  <Bizum :payment-id="paymentId" :on-submit="handleSubmit" :on-error="handleError" />
</template>

<script setup lang="ts">
  import {Bizum, confirmPayment} from '@monei-js/vue-components';

  const props = defineProps<{paymentId: string}>();

  async function handleSubmit(result: {token?: string}) {
    if (result.token) {
      await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});
    }
  }

  function handleError(error: string) {
    console.error(error);
  }
</script>

PayPal​

The PayPal component renders a PayPal checkout button. When the customer approves, you receive a token to confirm the payment.

<template>
  <PayPal :payment-id="paymentId" :on-submit="handleSubmit" :on-error="handleError" />
</template>

<script setup lang="ts">
  import {PayPal, confirmPayment} from '@monei-js/vue-components';

  const props = defineProps<{paymentId: string}>();

  async function handleSubmit(result: {token?: string}) {
    if (result.token) {
      await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});
    }
  }

  function handleError(error: string) {
    console.error(error);
  }
</script>

PaymentRequest (Apple Pay / Google Pay)​

The PaymentRequest component renders an Apple Pay or Google Pay button depending on the customer's browser and device.

note

Apple Pay requires domain verification in both development and production.

<template>
  <PaymentRequest :payment-id="paymentId" :on-submit="handleSubmit" :on-error="handleError" />
</template>

<script setup lang="ts">
  import {PaymentRequest, confirmPayment} from '@monei-js/vue-components';

  const props = defineProps<{paymentId: string}>();

  async function handleSubmit(result: {token?: string}) {
    if (result.token) {
      await confirmPayment({paymentId: props.paymentId, paymentToken: result.token});
    }
  }

  function handleError(error: string) {
    console.error(error);
  }
</script>

Payment Modal​

Calling confirmPayment() without a paymentToken opens the MONEI Payment Modal — a full in-page checkout where the customer can select a payment method and complete the payment.

<template>
  <button @click="handleClick">Pay</button>
</template>

<script setup lang="ts">
  import {confirmPayment} from '@monei-js/vue-components';

  const props = defineProps<{paymentId: string}>();

  async function handleClick() {
    const result = await confirmPayment({paymentId: props.paymentId});
    // Payment completed — check result.status
    console.log(result);
  }
</script>
important

Apple Pay is not available in the Payment Modal. Use the PaymentRequest component instead.

See Use Payment Modal for the full integration guide.

Next steps​