Implement Credit Card Checkout

For new integrations, we recommend using the Card Form Components which simplify tokenization into a single tokenize() call with built-in theming support.

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 param, have the end-user fill out the <CoinflowCardNumberInput /> and <CoinflowCvvInput /> fields, then call coinflowCardFormRef.current?.getToken(). Below is an example of how to implement this:

import React, { useRef, useState } from 'react';
import {
  CoinflowCardTokenResponse,
  CoinflowCardNumberInput,
  CoinflowCvvInput
} from '@coinflowlabs/react';

function NewCardToken() {
  const coinflowCardFormRef = useRef<{
    getToken(): Promise<CoinflowCardTokenResponse>;
  }>();
  const [cardFormExp, setCardFormExp] = useState('');

  return (
    <div className="App">
      <div style={{ maxHeight: '50px', width: '10%', border: '1px solid black' }}>
        <CoinflowCardNumberInput
          ref={coinflowCardFormRef}
          env="sandbox" // Change to 'prod' for production
          debug={true} // Change to false for production
          css={{
            base: 'font-family: Montserrat, sans-serif; padding: 0 8px; border: 0px; margin: 0; width: 100%; font-size: 13px; line-height: 48px; height: 48px; box-sizing: border-box; -moz-box-sizing: border-box;',
            focus: 'outline: 0;',
            error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
            cvv: {
              base: 'font-family: Montserrat, sans-serif; padding: 0 8px; border: 0px; margin: 0; width: 100%; font-size: 13px; line-height: 48px; height: 48px; box-sizing: border-box; -moz-box-sizing: border-box;',
              focus: 'outline: 0;',
              error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
            },
          }}
        />
      </div>
      <input
        placeholder="Expiration"
        className="px-4 h-12 outline-none text-xs"
        value={cardFormExp}
        onChange={e => setCardFormExp(e.target.value)}
        style={{ maxHeight: '50px', width: '10%', border: '1px solid black' }}
      />
      <div style={{ height: '50px', width: '10%', border: '1px solid black' }}>
        <CoinflowCvvInput />
      </div>
      <button
        id="getToken"
        onClick={() => {
          coinflowCardFormRef.current
            ?.getToken()
            .then(tokenData => console.log('Received: ', tokenData))
            .catch(err => console.error('GET TOKEN ERROR', { err }));
        }}
      >
        Get Token
      </button>
    </div>
  );
}

export default NewCardToken;

The getToken() function returns a token associated with the CVV, which can then be passed into the card.cardToken param 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

Create a CVV input field with the selected saved card’s token passed in. Below is an example of how to implement this:

import React, { useRef } from 'react';
import { CardType, CoinflowCvvOnlyInput, CoinflowCardTokenResponse } from '@coinflowlabs/react';

function RefreshCardToken() {
  const coinflowCardFormRef = useRef<{
    getToken(): Promise<CoinflowCardTokenResponse>;
  }>();

  return (
    <div>
      <CoinflowCvvOnlyInput
        ref={coinflowCardFormRef}
        cardType={CardType.VISA} // Get this from calling getcustomer e.g., customer.cards[0].type
        token={'Token from customer saved card here'} // Get this from calling getcustomer e.g., customer.cards[0].token
        env={import.meta.env.VITE_ENV as CoinflowEnvs}
        debug={true}
        css={{
          base: 'font-family: Arial, sans-serif; padding: 0 8px; border: 1px solid rgba(0, 0, 0, 0.2); margin: 0; width: 100%; font-size: 13px; line-height: 30px; height: 32px; box-sizing: border-box; -moz-box-sizing: border-box;',
          focus: 'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5); border: 1px solid rgba(0, 132, 255, 0.5); outline: 0;',
          error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
          cvv: {
            base: 'font-family: Arial, sans-serif; padding: 0 8px; border: 1px solid rgba(0, 0, 0, 0.2); margin: 0; width: 100%; font-size: 13px; line-height: 30px; height: 32px; box-sizing: border-box; -moz-box-sizing: border-box;',
            focus: 'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5); border: 1px solid rgba(0, 132, 255, 0.5); outline: 0;',
            error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
          },
        }}
      />
      <button
        className={'absolute top-1 right-1'}
        id={'getToken'}
        onClick={() => {
          coinflowCardFormRef.current?.getToken()
            .then(tokenData => console.log('Received: ', tokenData))
            .catch(err => console.error('GET TOKEN ERROR', { err }));
        }}
      >
        Get Token
      </button>
    </div>
  );
}

export default RefreshCardToken;

Calling getToken() 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.