npm package: @monei-js/vue-components
Description: MONEI Vue 3 components for accepting payments with CardInput, Bizum, PayPal, and PaymentRequest.
Author: MONEI
Latest version: 2.0.7

# @monei-js/vue-components

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

## Install

```bash
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

```vue
<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:

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

## Migrating from `.driver('vue3')`

### Import changes

Before:

```ts
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:

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

### submit() migration

Before (standalone `createToken`):

```vue
<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):

```vue
<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

```vue
<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](https://docs.monei.com/monei-js/reference/)

## License

MIT