Mollie Component React Wrapper

🚀 Unofficial React Wrapper for Mollie.js
This package provides a React-friendly integration for Mollie Components, enabling secure and PCI-compliant card payment forms.

💡 Note: This is an unofficial wrapper and is not maintained or endorsed by Mollie.

📦 Installation

Install the package via npm:

npm install mollie-component-react-wrapper

Ensure you have React and ReactDOM installed as peer dependencies:

npm install react react-dom

🚀 Usage

1️⃣ Initialize Mollie with MollieComponentProvider

Wrap your application with MollieComponentProvider to initialize Mollie.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MollieComponentProvider } from 'mollie-component-react-wrapper';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <MollieComponentProvider profileId="your_profile_id" options={{ locale: 'en_US' }}>
    <App />
  </MollieComponentProvider>
);

Replace your_profile_id with your Mollie Profile ID.

2️⃣ Using the Standalone MollieCardForm Component

MollieCardForm provides a fully integrated UI for collecting card details. It manages its own state and event handling.

import { MollieForm, MollieCardForm, useMollie } from 'mollie-component-react-wrapper';

const PaymentForm = () => {
  const { isLoaded } = useMollie();
  const handlePayment = (token: string) => {
    console.log('Received token:', token);
  };

  if (!isLoaded) return <h2>Loading...</h2>;

  return (
    <div>
      <h2>Complete Payment</h2>
      <MollieForm onSubmit={handlePayment}>
        <MollieCardForm />
      </MollieForm>
    </div>
  );
};

export default PaymentForm;

✔ Handles all card input fields internally
✔ Automatic validation and error handling
✔ Generates a token upon submission

3️⃣ Using Individual Input Components

For custom layouts, use individual input components with forwardRef support:

import { MollieForm, MollieCardNumberInput, MollieCardHolderInput, MollieExpiryDateInput, MollieVerificationCodeInput } from 'mollie-component-react-wrapper';
import { useRef } from 'react';

const PaymentForm = () => {
  const cardNumberRef = useRef(null);
  const expiryDateRef = useRef(null);

  const handleSubmit = (token: string) => {
    console.log('Token received:', token);
  };

  return (
    <MollieForm onSubmit={handleSubmit}>
      <MollieCardNumberInput ref={cardNumberRef} onChange={() => console.log('Card number changed')} />
      <MollieCardHolderInput onBlur={() => console.log('Card holder field blurred')} />
      <MollieExpiryDateInput ref={expiryDateRef} onChange={() => console.log('Expiry date changed')} />
      <MollieVerificationCodeInput onBlur={() => console.log('CVC field blurred')} />
      <button type="submit">Pay Now</button>
    </MollieForm>
  );
};

export default PaymentForm;

✔ Customizable layout
✔ Event listeners available (onChange, onBlur, etc.)
✔ Supports ref forwarding for better control

🎨 Styling Inputs

You can customize the input styles using the styles prop:

const inputStyle = {
  styles: {
    base: {
      color: '#333',
      fontSize: '16px',
      padding: '10px',
    }
  }
};

<MollieCardNumberInput styles={inputStyle} />

For more details, refer to Mollie’s Styling Guide.

⚡ API Reference

🔹 MollieComponentProvider

| Prop | Type | Required | Description | | ----------- | -------- | -------- | ----------------- | | profileId | string | ✅ Yes | Mollie Profile ID | | options | object | ❌ No | Additional Mollie configuration options |

🔹 useMollie

| Prop | Type | Description | | ----------- | --------- | ------------------------------------ | | isLoaded | boolean | Loading state of mollie object | | _mollie | object | A shallow reference to mollie object |

🔹 MollieForm

| Prop | Type | Required | Description | | ---------- | ------------------------- | -------- | ------------------------------------------ | | onSubmit | (token: string) => void | ✅ Yes | Callback when a payment token is generated |

🔹 Input Components

| Component | Description | | ----------------------------- | ----------------------------------- | | MollieCardNumberInput | Captures the card number | | MollieCardHolderInput | Captures the cardholder's name | | MollieExpiryDateInput | Captures the card's expiration date | | MollieVerificationCodeInput | Captures the CVV security code |

🔹 Event Listeners for Inputs

| Event | Description | | ---------- | ------------------------------------ | | onChange | Triggered when input value changes | | onBlur | Triggered when the input loses focus | | onFocus | Triggered when the input gains focus |

Example:

<MollieCardNumberInput onChange={() => console.log('Card number updated')} />

🔐 Security Considerations

• Do NOT store raw card details.
• Always use tokenized payments for PCI compliance.
• Use HTTPS for secure data transmission.