Frames Tokenization Integration

Table of Contents

Frontend Project Setup
Example Integration

Frontend Project Setup

First off, you’ll need your Checkout.com public key to be accessible in your frontend integration. If you’re using our starter project, you can add it your .env file under the property, NEXT_PUBLIC_CHECKOUT_COM_PUBLIC_API_KEY.

Additionally, if you plan on using the frames-react library, you’ll need to include the minified javascript package on their CDN. In our starter project, this is already included in pages/_document.tsx.

<script src="https://cdn.checkout.com/js/framesv2.min.js" />

Example Integration

In our example integration, we used Checkout.com’s React wrapper library, frames-react, to implement the payment forms in checkout. When loading the payment form, we need to initialize Frames with the Checkout.com public key.

1
2
3
useEffect(() => {
  Frames.init(CheckoutComConfig.PUBLIC_KEY);
}, []);

The most relevant portion of this frontend integration is the tokenization flow and using that response to create a Payment in PaymentTransactionServices. The frames-react library provides a simple method to attempt tokenization and returns the response as a FrameCardTokenizedEvent, or in the case of a failed tokenization: a FrameCardTokenizationFailedEvent. After getting a successful tokenization response, you’ll need to pass that data to PaymentTransactionServices to create a new Payment. From the FrameCardTokenizedEvent, we’ll extract the following data:

The token (tokenEvent.token) - REQUIRED
The credit card type (tokenEvent.scheme)
The masked card number (tokenEvent.last4)
The expiration month & year (tokenEvent.expiry_month, tokenEvent.expiry_year)

const tokenEvent = (await Frames.submitCard()) as FrameCardTokenizedEvent;

const paymentMethodProperties = {
  token: tokenEvent.token,
};
const displayAttributes = {
  creditCardHolder: nameOnAccount,
  creditCardType: tokenEvent.scheme.toUpperCase(),
  creditCardNumber: maskCardNumber(tokenEvent.last4),
  creditCardExpDateMonth: padStart(`${tokenEvent.expiry_month}`, 2, '0'),
  creditCardExpDateYear: `${tokenEvent.expiry_year}`,
};

Finally, we’ll use this tokenized data to build a PaymentRequest and send it via our payment SDK (useSubmitPaymentRequest()) to build a Payment in PaymentTransactionServices.