# @monei-js/components

MONEI UI Components — drop-in payment UI for the web. Renders secure iframes for card input, PayPal, Bizum, Apple Pay, and a full payment modal. Works with any framework or vanilla JS.

## Framework Packages

For framework-specific components with idiomatic APIs and full type support:

| Package                        | Framework   | Install                              |
| ------------------------------ | ----------- | ------------------------------------ |
| `@monei-js/react-components`   | React 17+   | `npm i @monei-js/react-components`   |
| `@monei-js/vue-components`     | Vue 3.3+    | `npm i @monei-js/vue-components`     |
| `@monei-js/angular-components` | Angular 14+ | `npm i @monei-js/angular-components` |
| `@monei-js/svelte-components`  | Svelte 5+   | `npm i @monei-js/svelte-components`  |

All framework packages require `@monei-js/components` as a peer dependency for API functions (`confirmPayment`, `api`, etc.).

## Install

```bash
npm install @monei-js/components
```

Or load via CDN:

```html
<script src="https://js.monei.com/v3/monei.js"></script>
```

## Components

| Component        | Description                                  |
| ---------------- | -------------------------------------------- |
| `CardInput`      | Secure card number/expiry/CVC input (iframe) |
| `PaymentModal`   | Full-screen payment flow modal               |
| `Bizum`          | Bizum button + phone verification modal      |
| `PayPal`         | PayPal checkout button                       |
| `PaymentRequest` | Apple Pay / browser Payment Request button   |

## Quick Start (Vanilla JS)

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

const cardInput = CardInput({
  paymentId: 'pay_...',
  onChange({isTouched, error, cardType}) {
    // handle validation state
  }
});
cardInput.render('#card-input');

// Tokenize and confirm
const {token} = await cardInput.submit();
const result = await confirmPayment({paymentId: 'pay_...', paymentToken: token});
```

## API

Exported via `api` namespace:

- `confirmPayment({paymentId, ...})` — confirm a payment with token
- `getPaymentMethods({accountId | paymentId})` — list available payment methods
- `getPayment(paymentId)` — fetch payment status
- `createPayment({accountId, amount, currency, ...})` — create a client-side payment (POS)
- `sendPaymentReceipt({paymentId, customerEmail, ...})` — send receipt email

## Migrating from `createToken`

Before:

```js
import {CardInput, createToken} from '@monei-js/components';

const cardInput = CardInput({paymentId: 'pay_...'});
cardInput.render('#card-input');
const {token} = await createToken(cardInput);
```

After (instance `submit()`):

```js
import {CardInput} from '@monei-js/components';

const cardInput = CardInput({paymentId: 'pay_...'});
cardInput.render('#card-input');
const {token} = await cardInput.submit({cardholderName: 'John'});
```

`createToken()` still works but logs a deprecation warning.

## Deprecated APIs

- **`.driver()`** — Use the framework-specific packages above instead. `.driver('react')` → `@monei-js/react-components`, `.driver('vue3')` → `@monei-js/vue-components`, `.driver('angular')` → `@monei-js/angular-components`.
- **`createToken(instance)`** — Use `instance.submit()` instead (see above).

## Server-Side

For creating payments on your server, use [@monei-js/node-sdk](https://github.com/MONEI/monei-node-sdk).

## Documentation

Full docs: [docs.monei.com/docs/monei-js-overview](https://docs.monei.com/docs/monei-js-overview)

## License

MIT