@monei-js/vue-components

Vue 3 components for MONEI payments. Typed props via defineComponent, template ref submit(), and idiomatic Vue API.

Install

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

Components

| Component | Description | | ---------------- | ------------------------------------------ | | CardInput | Secure card input (iframe) with submit() | | Bizum | Bizum button + phone verification modal | | PayPal | PayPal checkout button | | PaymentRequest | Apple Pay / browser Payment Request button |

Quick Start

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

const cardRef = ref();
const paymentId = 'pay_...';

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

<template>
  <div>
    <CardInput ref="cardRef" :paymentId="paymentId" />
    <button @click="handleSubmit">Pay</button>
  </div>
</template>

API Re-exports

confirmPayment and api are re-exported from this package for convenience:

import {CardInput, Bizum, confirmPayment, api} from '@monei-js/vue-components';

Migrating from .driver('vue3')

Import changes

Before:

import {CardInput, Bizum, PayPal, PaymentRequest} from '@monei-js/components';

const MoneiCardInput = CardInput.driver('vue3');
const MoneiBizum = Bizum.driver('vue3');
const MoneiPayPal = PayPal.driver('vue3');
const MoneiPaymentRequest = PaymentRequest.driver('vue3');

After:

import {CardInput, Bizum, PayPal, PaymentRequest} from '@monei-js/vue-components';

submit() migration

Before (standalone createToken):

<script setup>
import {CardInput, createToken} from '@monei-js/components';

const MoneiCardInput = CardInput.driver('vue3');
const instance = CardInput({paymentId: '...'});
instance.render('#container');
const {token} = await createToken(instance);
</script>

After (typed submit() via template ref):

<template>
  <CardInput ref="cardInput" :payment-id="paymentId" :on-change="handleChange" />
</template>

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

const cardInput = ref<InstanceType<typeof CardInput>>();
const {token} = await cardInput.value!.submit({cardholderName: 'John'});
</script>

Full example

<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({isValid}: {isValid: boolean}) {
  error.value = '';
}

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>

Documentation

Full API reference: docs.monei.com/monei-js/reference

License

MIT