mollie-component-react-wrapper v0.1.0

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

🔹 useMollie

🔹 MollieForm

🔹 Input Components

🔹 Event Listeners for Inputs

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.