Developer ResourcesCheckout ImplementationCredit Cards Implementation

Implement Credit Card Checkout

Developers can use this documentation to tokenize credit cards when using our card checkout APIs.

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

  1. 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
  1. 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:
1import React, { useRef, useState } from 'react';
2import {
3  CoinflowCardTokenResponse,
4  CoinflowCardNumberInput,
5  CoinflowCvvInput
6} from '@coinflowlabs/react';
7
8function NewCardToken() {
9  const coinflowCardFormRef = useRef<{
10    getToken(): Promise<CoinflowCardTokenResponse>;
11  }>();
12  const [cardFormExp, setCardFormExp] = useState('');
13
14  return (
15    <div className="App">
16      <div style={{ maxHeight: '50px', width: '10%', border: '1px solid black' }}>
17        <CoinflowCardNumberInput
18          ref={coinflowCardFormRef}
19          env="sandbox" // Change to 'prod' for production
20          debug={true} // Change to false for production
21          css={{
22            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;',
23            focus: 'outline: 0;',
24            error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
25            cvv: {
26              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;',
27              focus: 'outline: 0;',
28              error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
29            },
30          }}
31        />
32      </div>
33      <input
34        placeholder="Expiration"
35        className="px-4 h-12 outline-none text-xs"
36        value={cardFormExp}
37        onChange={e => setCardFormExp(e.target.value)}
38        style={{ maxHeight: '50px', width: '10%', border: '1px solid black' }}
39      />
40      <div style={{ height: '50px', width: '10%', border: '1px solid black' }}>
41        <CoinflowCvvInput />
42      </div>
43      <button
44        id="getToken"
45        onClick={() => {
46          coinflowCardFormRef.current
47            ?.getToken()
48            .then(tokenData => console.log('Received: ', tokenData))
49            .catch(err => console.error('GET TOKEN ERROR', { err }));
50        }}
51      >
52        Get Token
53      </button>
54    </div>
55  );
56}
57
58export default NewCardToken;
  1. 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

  1. 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
  1. Create a CVV input field with the selected saved card’s token passed in. Below is an example of how to implement this:
1import React, { useRef } from 'react';
2import { CardType, CoinflowCvvOnlyInput, CoinflowCardTokenResponse } from '@coinflowlabs/react';
3
4function RefreshCardToken() {
5  const coinflowCardFormRef = useRef<{
6    getToken(): Promise<CoinflowCardTokenResponse>;
7  }>();
8
9  return (
10    <div>
11      <CoinflowCvvOnlyInput
12        ref={coinflowCardFormRef}
13        cardType={CardType.VISA} // Get this from calling getcustomer e.g., customer.cards[0].type
14        token={'Token from customer saved card here'} // Get this from calling getcustomer e.g., customer.cards[0].token
15        env={import.meta.env.VITE_ENV as CoinflowEnvs}
16        debug={true}
17        css={{
18          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;',
19          focus: 'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5); border: 1px solid rgba(0, 132, 255, 0.5); outline: 0;',
20          error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
21          cvv: {
22            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;',
23            focus: 'box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5); border: 1px solid rgba(0, 132, 255, 0.5); outline: 0;',
24            error: 'box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5); border: 1px solid rgba(224, 57, 57, 0.5);',
25          },
26        }}
27      />
28      <button
29        className={'absolute top-1 right-1'}
30        id={'getToken'}
31        onClick={() => {
32          coinflowCardFormRef.current?.getToken()
33            .then(tokenData => console.log('Received: ', tokenData))
34            .catch(err => console.error('GET TOKEN ERROR', { err }));
35        }}
36      >
37        Get Token
38      </button>
39    </div>
40  );
41}
42
43export default RefreshCardToken;
  1. 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.