Tokenize Credit Cards
Merchants implementing credit card checkouts via API can use this document to tokenize credit card data.
How to Tokenize Credit Cards
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)
Updated 2 months ago