# Tokenize card verification value

You can use [Flow](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website.md) 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](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website.md) for web.

---

## Before you start

Ensure you have a Checkout.com [test account](https://www.checkout.com/get-test-account).

Create [a public key](https://www.checkout.com/docs/resources/api-authentication/api-keys.md) from the Dashboard, with the following key scopes:

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

---

## Initialize and mount Flow `Client side`

**Web**

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

```bash
npm install @checkout.com/checkout-web-components --save
```

Alternatively, load the package directly via a script:

```html
<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.

```javascript
// Insert your public key here
const publicKey = '{YOUR_PUBLIC_KEY}';

const checkout = await CheckoutWebComponents({
  publicKey,
  environment: 'sandbox',
});
```

Use `CheckoutWebComponents` to create a `card_cvv` object:

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

Check that the `card_cvv` component is available and mount it:

```javascript
if (await cardCvvComponent.isAvailable()) {
  cardCvvComponent.mount('#card-cvv-container');
}
```

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

---

## Tokenize the CVV `Client side`

Display a submit button that will trigger the CVV tokenization:

```html
<div id="card-cvv-container"></div>
<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.

```javascript
const storedCardPayButton = document.getElementById('stored-card-pay-button');

storedCardPayButton.addEventListener('click', async () => {
  const { data } = await cardCvvComponent.tokenize();
  await utilizeToken(data.token);
});
```