@exalandapp/react-mollie-components

React + TypeScript bindings for Mollie Components / Mollie.js v1.

This is a community wrapper, not an official Mollie package.

Features

• Loads https://js.mollie.com/v1/mollie.js once.
• MollieProvider for initialization.
• Generic MollieComponent matching mollie.createComponent(type, options).
• Shortcuts for card, cardHolder, cardNumber, verificationCode, expiryDate.
• React callbacks for change, focus, blur.
• useMollieToken() for mollie.createToken().
• TypeScript declarations included.
• SSR-safe loader: Mollie.js is only loaded in the browser.

Install

npm install @exalandapp/react-mollie-components

React and React DOM are peer dependencies.

Setup

import {
  MollieProvider,
  MollieCardNumber,
  MollieCardHolder,
  MollieExpiryDate,
  MollieVerificationCode,
  useMollieToken,
} from '@exalandapp/react-mollie-components';

function CheckoutForm() {
  const createToken = useMollieToken();

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const { token, error } = await createToken();
    if (error || !token) {
      console.error(error);
      return;
    }

    await fetch('/api/payments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cardToken: token }),
    });
  }

  return (
    <form onSubmit={onSubmit}>
      <MollieCardHolder />
      <MollieCardNumber />
      <MollieExpiryDate />
      <MollieVerificationCode />
      <button type="submit">Pay</button>
    </form>
  );
}

export default function Checkout() {
  return (
    <MollieProvider
      profileId="pfl_xxxxxxxxxx"
      options={{ locale: 'fr_FR' }}
    >
      <CheckoutForm />
    </MollieProvider>
  );
}

Generic API

This maps directly to Mollie's mollie.createComponent(type, options) API.

<MollieComponent
  type="cardNumber"
  options={{
    styles: {
      base: {
        fontSize: '16px',
        color: '#111827',
        '::placeholder': { color: '#9ca3af' },
      },
    },
  }}
  onChange={(event) => console.log(event)}
/>

Supported type values:

• card
• cardHolder
• cardNumber
• verificationCode
• expiryDate

Full card component

<MollieCard
  options={{
    components: {
      cardHolder: { label: 'Titulaire' },
      cardNumber: { label: 'Numéro de carte' },
      expiryDate: { label: 'Expiration' },
      verificationCode: { label: 'CVC' },
    },
  }}
/>

Loading and errors

import { useMollieStatus } from '@exalandapp/react-mollie-components';

function Status() {
  const { loading, error, mollie } = useMollieStatus();
  if (loading) return <span>Chargement…</span>;
  if (error) return <span>{error.message}</span>;
  return <span>{mollie ? 'Mollie prêt' : 'Indisponible'}</span>;
}

Important security note

createToken() returns a card token intended to be sent to your backend. Keep Mollie API keys and payment creation logic on the server; never expose a secret API key in React/browser code.

Publish to npm

1. Replace @exalandapp/react-mollie-components in package.json, the README and the example with your real npm scope/name.
2. Replace repository/homepage URLs.
3. Install dependencies and build:

npm install
npm run typecheck
npm run build

4. Authenticate and publish:

npm login
npm publish --access public

Mollie.js version

This package targets the Mollie.js v1 API documented with Mollie(profileId), mollie.createComponent(...), and mollie.createToken().

Mollie also has a newer v2 Checkout/Components API in private beta. It is a different API and is intentionally not mixed into this wrapper.