flintn-checkout
v0.0.3
Published
FlintN Payment SDK — drop-in iframe checkout for card payments and wallets with localization and theming.
Maintainers
flintn_sdkReadme
flintn-checkout
FlintN Payment SDK — Iframe-based payment widget with postMessage communication.
Installation
npm install flintn-checkoutQuick Start
React
import { useFlintNPayment } from 'flintn-checkout/react';
function Checkout() {
const { containerRef, isReady, paymentResult, error } = useFlintNPayment({
config: {
clientSessionId: 'your_client_session_id',
},
onPayment: (result) => {
if (result.status === 'PAYMENT_SUCCESS') {
console.log('Payment succeeded:', result.data);
} else {
console.log('Payment failed:', result.error);
}
},
onExpressPayment: (result) => {
console.log('Express payment:', result);
},
});
return (
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div ref={containerRef} style={{ width: '100%', height: '600px' }} />
</div>
);
}Vanilla JavaScript
import { FlintNPayment } from 'flintn-checkout';
const payment = new FlintNPayment({
config: {
clientSessionId: 'your_client_session_id',
},
onPayment: (result) => {
if (result.status === 'PAYMENT_SUCCESS') {
console.log('Payment succeeded:', result.data);
} else {
console.log('Payment failed:', result.error);
}
},
onExpressPayment: (result) => {
console.log('Express payment:', result);
},
onReady: () => {
console.log('Widget ready');
},
debug: true,
});
payment.mount('#payment-container');
// Cleanup when done
payment.unmount();HTML
<!DOCTYPE html>
<html>
<head>
<title>FlintN Checkout</title>
</head>
<body>
<div id="payment-container" style="max-width: 440px; height: 600px; margin: 0 auto;"></div>
<script type="module">
import { FlintNPayment } from 'flintn-checkout';
const payment = new FlintNPayment({
config: {
clientSessionId: 'your_client_session_id',
},
onPayment: (result) => {
console.log('Payment result:', result);
},
});
payment.mount('#payment-container');
</script>
</body>
</html>Configuration
| Option | Type | Required | Default | Description |
|--------|------|----------|---------|-------------|
| clientSessionId | string | ✅ | — | Client session ID from backend |
| isCardHolderRequired | boolean | ❌ | true | Show cardholder name field |
| successRedirectUrl | string | ❌ | — | Redirect URL after successful payment |
Note:
isCardHolderRequiredonly applies when using Primer as the payment provider.
Callbacks
| Callback | Description |
|----------|-------------|
| onPayment | Fired when card payment completes (success or error) |
| onExpressPayment | Fired when express payment completes (Apple Pay, Google Pay, PayPal) |
| onReady | Fired when widget is loaded and ready |
| onError | Fired on SDK initialization error |
React Hook Return Values
| Value | Type | Description |
|-------|------|-------------|
| containerRef | RefObject<HTMLDivElement> | Ref to attach to container element |
| isReady | boolean | Widget is loaded and ready |
| paymentResult | PaymentResult \| null | Result after payment attempt |
| error | PaymentError \| null | SDK error if any |
Types
PaymentResult
interface PaymentResult {
status: 'PAYMENT_SUCCESS' | 'PAYMENT_ERROR' | 'PAYMENT_CANCELLED';
data?: string; // Payment ID on success
error?: {
code: string;
message: string;
};
}PaymentError
interface PaymentError {
code: string;
message: string;
}Supported Payment Methods
- 💳 Credit/Debit Cards (Visa, Mastercard, Amex, Discover)
- 🍎 Apple Pay
- 🔵 Google Pay
- 🟡 PayPal
Debug Mode
Enable debug logs in console:
// React
useFlintNPayment({
config: { clientSessionId: '...' },
debug: true,
});
// Vanilla JS
new FlintNPayment({
config: { clientSessionId: '...' },
debug: true,
});Test Cards
| Card Number | Result |
|-------------|--------|
| 4111 1111 1111 1111 | Success |
| 4000 0000 0000 0002 | Declined |
Use any future expiry date and any 3-digit CVV.
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
License
MIT