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
profileId | string | โ
Yes | Mollie Profile ID |
options | object | โ No | Additional Mollie configuration options |
๐น useMollie
isLoaded | boolean | Loading state of mollie object |
_mollie | object | A shallow reference to mollie object |
๐น MollieForm
onSubmit | (token: string) => void | โ
Yes | Callback when a payment token is generated |
๐น Input Components
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
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.