> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs-staging.coinflow.cash/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs-staging.coinflow.cash/_mcp/server.

# Implement Credit Card Checkout

> **Info**
>
> This guide uses the [Card Form Components](/guides/developer-resources/checkout-implementation/credit-cards-implementation/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](/recipes/recipes/pci-compliant-card-tokenization). 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:

* [New Card Checkout](/api-reference/api-reference/checkout/card-checkout)
* [Saved Card Checkout](/api-reference/api-reference/checkout/token-checkout)
* [Get Customer](/api-reference/api-reference/customers/get-customer)

## 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](/api-reference/api-reference/checkout/card-checkout):

* cardToken
* expYear
* expMonth
* email
* firstName
* lastName
* address1
* city
* zip
* state
* country

2. 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:

```javascript
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;
```

3. `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](/api-reference/api-reference/checkout/card-checkout).

## 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](/api-reference/api-reference/customers/get-customer) endpoint.

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

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

```javascript
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;
```

3. 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](/api-reference/api-reference/checkout/token-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.