This project is a minimalistic React wrapper of Checkout.com Frames.
npm install frames-reactMake sure that you load the CDN before you mount the Frames components. You can add it for example in your index.html file.
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>If you use server side rendering like Next you can add it in the Head:
<Head>
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
</Head>import { Frames, CardNumber, ExpiryDate, Cvv } from 'frames-react';Make sure you wrap the card input components inside Frames wrapper component.
<Frames
config={{
debug: true,
publicKey: 'pk_test_6e40a700-d563-43cd-89d0-f9bb17d35e73',
localization: {
cardNumberPlaceholder: 'Card number',
expiryMonthPlaceholder: 'MM',
expiryYearPlaceholder: 'YY',
cvvPlaceholder: 'CVV',
},
style: {
base: {
fontSize: '17px',
},
},
}}
ready={() => {}}
frameActivated={(e) => {}}
frameFocus={(e) => {}}
frameBlur={(e) => {}}
frameValidationChanged={(e) => {}}
paymentMethodChanged={(e) => {}}
cardValidationChanged={(e) => {}}
cardSubmitted={() => {}}
cardTokenized={(e) => {}}
cardTokenizationFailed={(e) => {}}
cardBinChanged={(e) => {}}
>
<CardNumber />
<ExpiryDate />
<Cvv />
</Frames>To trigger the tokenisation, this wrapper has a static methods called submitCard()
Here is a full example of the full flow:
<Frames
config={{
publicKey: 'pk_test_6e40a700-d563-43cd-89d0-f9bb17d35e73',
}}
cardTokenized={(e) => {
alert(e.token);
}}
>
<CardNumber />
<ExpiryDate />
<Cvv />
<button
onClick={() => {
Frames.submitCard();
}}
>
PAY GBP 25.00
</button>
</Frames>If you want to use Frame in single frame mode you cna do it like this:
<Frames
config={{
publicKey: 'pk_test_6e40a700-d563-43cd-89d0-f9bb17d35e73',
}}
cardTokenized={(e) => {
alert(e.token);
}}
>
<CardFrame />
<button
onClick={() => {
Frames.submitCard();
}}
>
PAY GBP 25.00
</button>
</Frames>If you want to accept Carte Bancaire we provide an additional element so that the scheme can be picked. You also need to make sure you update the config to specify the selectors. If you use Multi Frames you need to provide the selectors for schemeChoice, cardNumber, expiryDate and cvv. For Single Frames you just need the schemeChoice. Make sure you don't forget to add the SchemeChoice component, and write some CSS sso when it renders, it does not overlap your other elements.
import React from 'react';
import { Frames, CardNumber, ExpiryDate, Cvv, CardFrame, SchemeChoice } from './frames';
import './App.css';
function App() {
return (
<div className="App">
<Frames
config={{
publicKey: 'pk_sbox_ogynfaoply5o6ksuw3d3hcee3ez',
cardNumber: {
frameSelector: '.card-number-frame',
},
expiryDate: {
frameSelector: '.expiry-date-frame',
},
cvv: {
frameSelector: '.cvv-frame',
},
schemeChoice: {
frameSelector: '.scheme-choice-frame',
},
localization: 'EN-GB',
debug: false,
}}
ready={() => {}}
frameActivated={(e) => {}}
frameFocus={(e) => {}}
frameBlur={(e) => {}}
frameValidationChanged={(e) => {}}
paymentMethodChanged={(e) => {}}
cardValidationChanged={(e) => {}}
cardSubmitted={() => {}}
cardTokenized={(e) => {
alert(e.token);
}}
cardTokenizationFailed={(e) => {}}
cardBinChanged={(e) => {}}
>
<CardNumber />
<div className="date-and-code">
<ExpiryDate />
<Cvv />
</div>
{/* Or if you want to use single frames: */}
{/* <CardFrame /> */}
{/* If you you use CB and need to select the Scheme: */}
<SchemeChoice />
<button
id="pay-button"
onClick={() => {
Frames.submitCard();
}}
>
PAY GBP 25.00
</button>
</Frames>
</div>
);
}
export default App;If you need to inject the cardholder name on go, for cases where you render the payment form at the same time as the input for the billing and cardholder name, you can simply update the props and Frames will reflect the latest changes
const [cardholder, setCardholder] = useState({
name: '',
phone: '',
billingAddress: {
addressLine1: '',
},
});
...
<Frames
config={{
cardholder: {
name: cardholder.name,
phone: cardholder.phone,
billingAddress: cardholder.billingAddress,
}
}}
...
/>
...
<ExampleInput
onChange={(e) => {
setCardholder({
name: e.target.value,
phone: '7123456789',
billingAddress: {
addressLine1: 'London Street',
},
});
}}
/>| prop | description |
|---|---|
| config | The config is an object following the reference of Checkout.com Frames. |
| ready | Triggered when Frames is registered on the global namespace and safe to use. |
| frameActivated | Triggered when the form is rendered. |
| frameFocus | Triggered when an input field receives focus. Use it to check the validation status and apply the wanted UI changes. |
| frameBlur | Triggered after an input field loses focus. Use it to check the validation status and apply the wanted UI changes. |
| frameValidationChanged | Triggered when a field's validation status has changed. Use it to show error messages or update the UI. |
| paymentMethodChanged | Triggered when a valid payment method is detected based on the card number being entered. Use this event to change the card icon. |
| cardValidationChanged | Triggered when the state of the card validation changes. |
| cardSubmitted | Triggered when the card form has been submitted. |
| cardTokenized | Triggered after a card is tokenized. |
| cardBinChanged | Triggered when the user inputs or changes the first 8 digits of a card. |
| function | description |
|---|---|
| init | Initializes (or re-initializes) Frames. |
| isCardValid | Returns the state of the card form validation. |
| submitCard | Submits the card form if all form values are valid. |
| addEventHandler | Adds a handler that is called when the specified event is triggered. |
| removeEventHandler | Removes a previously added handler from an event by providing the event name and handler as arguments in the method. |
| removeAllEventHandlers | Removes all handlers added to the event specified. |
| enableSubmitForm | Retains the entered card details and allows you to resubmit the payment form. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent