🚀 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.
Install the package via npm:
npm install mollie-component-react-wrapperEnsure you have React and ReactDOM installed as peer dependencies:
npm install react react-domWrap 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.
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
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
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.
| Prop | Type | Required | Description |
|---|---|---|---|
profileId |
string |
✅ Yes | Mollie Profile ID |
options |
object |
❌ No | Additional Mollie configuration options |
| Prop | Type | Description |
|---|---|---|
isLoaded |
boolean |
Loading state of mollie object |
_mollie |
object |
A shallow reference to mollie object |
| Prop | Type | Required | Description |
|---|---|---|---|
onSubmit |
(token: string) => void |
✅ Yes | Callback when a payment token is generated |
| 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 59F4 loses focus |
onFocus |
Triggered when the input gains focus |
Example:
<MollieCardNumberInput onChange={() => console.log('Card number updated')} />- Do NOT store raw card details.
- Always use tokenized payments for PCI compliance.
- Use HTTPS for secure data transmission.