How to Tokenize Credit Cards

Please see our guide to tokenize credit cards or see below for additional context related to card tokenization.

There are 3 endpoints you should care about here:

New Card Checkout
Saved Card Checkout
Get Customer

Tokenizing a Card for a Customer’s First Purchase.

Build a form for New Card Checkout. This will require fields for address, name, etc (all required fields in New Card Checkout endpoint).

To get the token value, you need to have the user fill out both <CoinflowCardNumberInput /> and the <CoinflowCvvInput />, then call coinflowCardFormRef.current?.getToken().

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;

getToken() returns a token associated with the CVV and is used to call the New Card Checkout Endpoint.

Enable a Customer to Purchase Again with a Saved Card.

You’ll need to call Get Customer to fetch the customer’s saved cards. I’d recommend displaying these cards in a list on the UI.

Below this list, you’ll need a CVV only input with the selected saved card’s token passed in:

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 eg: customer.cards[0].type
        token={'Token from customer saved card here'} // Get this from calling getcustomer eg: 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;

From here, calling getToken() will return a new token which can be used to call Saved Card checkout

Token Expiration

If a token is not used within 7 days of creating it, it will expire and will need to be regenerated. The token is valid for5 minutes from initial use (This happens on prod only- On sandbox, the token remains valid)