Tokenize card verification value

Last updated: September 29, 2025

You can use Flow to securely collect and tokenize the card verification value (CVV) to perform payments with stored card credentials.

You receive a single, one-time use token that you can forward to a third-party payment service provider (PSP).

Information

This feature is only available in Flow for web.

Ensure you have a Checkout.com test account.

Create a public key from the Dashboard, with the following key scopes:

Public key – payment-sessions:pay and vault-tokenization

Install the @checkout.com/checkout-web-components package via npm:


1npm install @checkout.com/checkout-web-components --save

Alternatively, load the package directly via a script:


1<script src="https://checkout-web-components.checkout.com/index.js" />

Note

To remain PCI compliant, you should only ever load the script directly from https://checkout-web-components.checkout.com. Do not download or host the script yourself, or include it in a bundle.

Initialize an instance of CheckoutWebComponents, without an initial payment session.


1// Insert your public key here
2const publicKey = '{YOUR_PUBLIC_KEY}';
3
4const checkout = await CheckoutWebComponents({
5  publicKey,
6  environment: 'sandbox',
7});

Use CheckoutWebComponents to create a card_cvv object:


1const cardCvvComponent = checkout.create('card_cvv', {
2  cardCvvLength: 3,
3});

Check that the card_cvv component is available and mount it:


1if (await cardCvvComponent.isAvailable()) {
2  cardCvvComponent.mount('#card-cvv-container');
3}

Note

Embedding Flow within an iframe or onto a Shadow DOM is not supported.

Display a submit button that will trigger the CVV tokenization:


1<div id="stored-card-container"></div>
2<button id="stored-card-pay-button" type="button">Pay</button>

Use the tokenize() method to trigger card CVV tokenization. The tokenization response is returned as the data object. You can access the generated CVV token in the data.token property.


1const storedCardPayButton = document.getElementbyId('stored-card-pay-button');
2
3storedCardPayButton.addEventListener('click', async () => {
4  const { data } = await cardCvvComponent.tokenize();
5  await utilizeToken(data.token);
6});

Tokenize card verification value

Information

Before you start

Initialize and mount Flow
Client side

Note

Note

Tokenize the CVV
Client side

Information

Before you start

Initialize and mount Flow Client side

Note

Note

Tokenize the CVV Client side

Initialize and mount Flow
Client side

Tokenize the CVV
Client side