johnny-tools-frames-react v1.1.0
❗️BETA
This project is a minumalistic React wrapper over Checkout.com Frames.
Add or load the CDN
Make sure that you load the CD before you mount the Frames component. You can add it for example in your index.html file
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>If you do server side rendering you can add it in the Head:
<Head>
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
</Head>Import
import { Frames, CardNumber, ExpiryDate, Cvv } "johnny-tools-frames-react";Use
<Frames config={config}>
<CardNumber />
<ExpiryDate />
<Cvv />
</Frames>The : config
The config is an object following the reference of Checkout.com Frames. Here is an example:
<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',
},
},
}}
>
...
</Frames>Event handlers
The event handlers are simply translated as props, so you can simply follow the Frames event hanlers reference. Here is an example:
<Frames
config={config}
ready={() => {}}
frameActivated={(e) => {}}
frameFocusead={(e) => {}}
frameBlur={(e) => {}}
frameValidationChanged={(e) => {}}
paymentMethodChanged={(e) => {}}
cardValidationChanged={(e) => {}}
cardSubmitted={(e) => {}}
cardTokenized={(e) => {}}
cardTokenizationFailed={(e) => {}}
>
<CardNumber />
<ExpiryDate />
<Cvv />
</Frames>Trigger tokenisation
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);
}}
>
<ExpiryDate />
<Cvv />
<button
onClick={() => {
Frames.submitCard();
}}
>
PAY GBP 25.00
</button>
</Frames>Static methods
The actions described in the Frames reference actions section are present heres as static methods:
Frames.init();
Frames.isCardValid();
Frames.submitCard();
Frames.addEventHandler();
Frames.removeEventHandler();
Frames.removeAllEventHandlers();
Frames.enableSubmitForm();Cardholder
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',
},
});
}}
/>