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',
           },
       });
   }}
/>

ioan-ghisoi-cko/johnny-tools-frames-react