Implement Credit Card Checkout

This guide uses the Card Form Components. For theming, the Vue and Angular SDKs, and the full tokenize() response, see that page.

How to Tokenize Credit Cards

To learn more about credit card tokenization, please refer to our detailed guide. Alternatively, you can follow the below step-by-step guide to learn how to tokenize a credit card when using Coinflow’s card checkout endpoints.

There are three primary endpoints you will use when tokenizing credit cards:

Tokenizing a Card for a Customer’s First Purchase

Build a form for the New Card Checkout. This form will require the below fields as specified in the New Card Checkout endpoint:

cardToken
expYear
expMonth
email
firstName
lastName
address1
city
zip
state
country

To obtain the cardToken, expMonth, and expYear params, render CoinflowCardForm so the end-user can enter their card number, expiration, and CVV, then call cardFormRef.current?.tokenize(). Below is an example of how to implement this:

import React, { useRef } from 'react';
import { CoinflowCardForm, CardFormRef } from '@coinflowlabs/react';
function NewCardToken() {
  const cardFormRef = useRef<CardFormRef>(null);
  const handleTokenize = async () => {
    try {
      const result = await cardFormRef.current?.tokenize();
      if (!result) return;
      console.log('Received: ', result);
    } catch (err) {
      console.error('Tokenization failed:', err);
    }
  };
  return (
    <div>
      <CoinflowCardForm
        ref={cardFormRef}
        merchantId="your-merchant-id" // Replace with your merchant id
        env="sandbox" // Change to 'prod' for production
      />
      <button onClick={handleTokenize}>Get Token</button>
    </div>
  );
}
export default NewCardToken;

tokenize() returns a token, expMonth, and expYear. Pass them into the card.cardToken, card.expMonth, and card.expYear params when making a request to the New Card Checkout Endpoint.

Refreshing a Tokenized Card on a Saved Card Purchase

To allow a customer to purchase using a saved card, you’ll need to fetch the customer’s saved cards by calling the Get Customer endpoint.

Access the end-user’s tokenized credit card from the response: cards[0].token

Render CoinflowCvvForm with the selected saved card’s token passed in. Below is an example of how to implement this:

import React, { useRef } from 'react';
import { CoinflowCvvForm, CardFormRef } from '@coinflowlabs/react';
function RefreshCardToken({ savedCardToken }: { savedCardToken: string }) {
  const cvvFormRef = useRef<CardFormRef>(null);
  const handleTokenize = async () => {
    try {
      const result = await cvvFormRef.current?.tokenize();
      if (!result) return;
      console.log('Received: ', result);
    } catch (err) {
      console.error('CVV tokenization failed:', err);
    }
  };
  return (
    <div>
      <CoinflowCvvForm
        ref={cvvFormRef}
        merchantId="your-merchant-id" // Replace with your merchant id
        env="sandbox" // Change to 'prod' for production
        token={savedCardToken} // From Get Customer, e.g. customer.cards[0].token
      />
      <button onClick={handleTokenize}>Get Token</button>
    </div>
  );
}
export default RefreshCardToken;

Calling tokenize() will return a new token that can be used to make a purchase with the saved card by calling the Saved Card Checkout endpoint.

Token Expiration

Tokens expire if not used within 7 days of creation. Once used, a token is valid for 5 minutes (in production; in the sandbox environment, the token remains valid). If a token expires, it will need to be regenerated.