@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

npm install @monei-js/components

Or load via CDN:

<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)

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});

Custom Fonts

CardInput and Bizum accept fonts: FontConfig[] (mirrors Stripe Elements) for deterministic typography across customer devices. Each iframe is independent — pass different fonts per component. PayPal, PaymentRequest, and GooglePay do not accept fonts — their UIs are vendor-rendered and ignore host CSS.

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

const cardInput = CardInput({
  paymentId: 'pay_...',
  fontFamily: 'Inter, sans-serif',
  fonts: [{cssSrc: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'}]
});

Or pass an explicit @font-face descriptor for self-hosted fonts (works with any HTTPS origin):

fonts: [{family: 'AcmeSans', src: 'https://cdn.acme.com/acme-400.woff2', weight: 400}];

cssSrc URLs hosted outside fonts.googleapis.com are blocked by the default CSP — use the explicit FontFace form for non-Google CDNs. See docs/design-system.md#fonts-api for the full spec.

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:

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

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

After (instance submit()):

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.

Documentation

Full docs: docs.monei.com/docs/monei-js-overview

License

MIT