# Retrieve wallet tokenization results

By default, the `applepay` and `googlepay` components submit a payment after the customer authorizes it in their wallet. To retrieve a Checkout.com token for the authorized wallet payment without submitting a payment, set the component to tokenize mode. In tokenize mode, the component exchanges the wallet token for a Checkout.com token and returns it through the `onTokenized` event, without submitting a payment. For example, you can use this token to request the payment from your server through the Payments API.

> **Information**
>
> Follow the [Apple Pay](https://www.checkout.com/docs/payments/add-payment-methods/apple-pay/web) and [Google Pay](https://www.checkout.com/docs/payments/add-payment-methods/google-pay/web) Flow guides before you update your integration with the steps outlined on this page.

> **Note**
>
> This feature is not available in Kuwait and Qatar.

---

## Enable tokenize mode `Client side`

Tokenize mode is only available for the `applepay` and `googlepay` components.

Set `mode` to `tokenize` in the component options when you create the component. The default value is `pay`, which submits a payment after the customer authorizes it.

```javascript
// Component creation
const applepayComponent = checkout.create('applepay', {
  mode: 'tokenize',
  onTokenized,
});

const googlePayComponent = checkout.create('googlepay', {
  mode: 'tokenize',
  onTokenized,
});
```

To display the amount and currency in the wallet's payment screen, you must provide a `paymentSession`.

Set `mode` in `componentOptions` when you initialize `CheckoutWebComponents`.

```javascript
const checkout = await CheckoutWebComponents({
  publicKey: 'pk_01234',
  paymentSession,
  environment: 'sandbox',
  componentOptions: {
    applepay: { mode: 'tokenize' },
    googlepay: { mode: 'tokenize' },
  },
  onTokenized,
});
```

---

## Add the onTokenized event `Client side`

The `onTokenized` event triggers when the customer authorizes the payment in their wallet and the wallet token is exchanged for a Checkout.com token. You must configure the `onTokenized` event when the component is in tokenize mode. If you do not, the component does not tokenize the payment and returns an `on_tokenized_callback_required` error through the `onError` [event](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference/flowcomponent.md#onError(FlowComponent,_CheckoutError)).

Implement the event logic to provide the tokenization result to your server-side integration:

```javascript
const onTokenized = async (self, tokenizeResult) => {
  // tokenizeResult.type is 'applepay' or 'googlepay'
  // Provide the token details to your server-side integration
  await sendTokenToYourServer(tokenizeResult.data);
};
```

The `tokenizeResult` object contains the following information:

- `type` – The component that produced the result – Either `applepay` or `googlepay`.
- `data.token` – The Checkout.com token. Use it to request a payment through the Payments API.
- `data.expires_on` – The date and time the token expires, as an ISO 8601 timestamp.

`data` also contains the other fields returned by the [Create a token](https://api-reference.checkout.com/tag/Tokens#operation/requestAToken) endpoint, such as the underlying card's scheme, last four digits, and expiry date, if available.

### Result example

```json
{
  "type": "googlepay",
  "data": {
    "type": "googlepay",
    "token": "tok_ubfj2q76miwundwlk72vxt2i7q",
    "expires_on": "2026-08-12T10:15:00Z",
    "expiry_month": 6,
    "expiry_year": 2028,
    "scheme": "VISA",
    "last4": "4242",
    "bin": "424242"
  }
}
```

Unlike card tokenization, Flow does not use the return value of the `onTokenized` event in tokenize mode. There is no payment to cancel, and the wallet's payment screen completes with a success state when the token is created. Returning `{ continue: false }` has no effect.

---

## Handle the wallet tokenization result `Client side`

In tokenize mode, the component does not submit a payment. As a result:

- The `onPaymentCompleted` and `handleSubmit` events do not trigger.
- The wallet's payment screen closes with a success state once the token is created. The `onTokenized` event confirms that tokenization succeeded.
- If the tokenization request fails, the component returns a `tokenize_request_failed` error through the `onError` event, and the wallet's payment screen shows a declined state.

---

## Use the wallet token `Server side`

Provide the token to your server-side integration and use it to [request a payment](https://api-reference.checkout.com/tag/Payments#operation/requestAPaymentOrPayout) with a `source.type` of `token`:

```json
{
  "source": {
    "type": "token",
    "token": "tok_ubfj2q76miwundwlk72vxt2i7q"
  },
  "amount": 6540,
  "currency": "USD",
  "processing_channel_id": "pc_q4dbxom5jbgudnjzjpz7j2z6uq"
}
```

> **Information**
>
> Tokens are single use and expire after a short period of time. Request the payment before the time given in `expires_on`.