# Retrieve card tokenization results

Use the `onTokenized` event to monitor the results of tokenizing the payment card. For example, if you want to conduct a pre-payment risk check with the card's details and decide whether to proceed with 3D Secure authentication or cancel the payment.

> **Information**
>
> Follow the [Getting started with Flow](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/get-started-with-flow.md) guide before you update your integration with the steps outlined on this page.

---

## Add the onTokenized event `Client side`

The `onTokenized` [event](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference/flowcomponent.md#onTokenized(FlowComponent,_TokenizeResult)) triggers when the card is tokenized and returns a [Request card metadata](https://api-reference.checkout.com/tag/Card-metadata/#operation/requestCardMetadata!c=200&path=scheme&t=response) response.

Add the event to the initialization code for your Flow instance:

```javascript
// Flow initialization
const flowComponent = checkout.create('flow', {
    onTokenized,
});
```

Implement the event logic to customize the payment flow depending on the results of tokenization. For example, the following code uses the tokenization result to perform a risk check and cancels the payment if it fails:

```javascript
const onTokenized = async (self, tokenizeResult) => {
  // Perform risk check with the tokenization result. For example, using an async function to
  // send the data to a third-party risk tool:
  cardRiskCheckResult = await performRiskCheck(tokenizeResult);

  // Return `{ continue: false }` to cancel payment with the card
  if (cardRiskCheckResult.result === 'abort') {
    return {
      continue: false,
      errorMessage: 'This card is not supported',
    };
  }

  // Otherwise return `{ continue: true }` to proceed with payment
  return {
    continue: true,
  };
};
```

---

## Add the handleSubmit event `Client side`

The `handleSubmit` [event](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference/flowcomponent.md#handleSubmit(FlowComponent,_SubmitData)) enables you to submit a modified payment session.

Add the event to the initialization code for your Flow instance:

```javascript
// Flow initialization
const flowComponent = checkout.create('flow', {
    onTokenized,
    handleSubmit,
});
```

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

```javascript
const handleSubmit = async (self, submitData) => {
  // Provide the `submitData` to your server-side integration
  // for payment submission
  const submitResponse = await performPaymentSubmission(submitData, cardRiskCheckResult);

  return submitResponse;
};
```

---

## Submit the modified payment session `Server side`

Call the [Submit a payment session](https://api-reference.checkout.com/tag/Flow/#operation/SubmitPaymentSession) endpoint and provide the payment session's ID as a path parameter.

In your request, provide the payment session data from the `handleSubmit` event in `session_data`. You can also modify any of the following fields:

- `3ds`
- `amount`
- `billing`
- `billing_descriptor`
- `capture`
- `capture_on`
- `currency`
- `customer`
- `failure_url`
- `instruction`
- `items`
- `metadata`
- `processing.pan_preference`
- `processing.provision_network_token`
- `processing_channel_id`
- `recipient`
- `reference`
- `sender`
- `shipping`
- `store_payment_details` if `source.type` is:
    - `card`
    - `applepay`
    - `googlepay`
- `success_url`

> **Information**
>
> Your base URL's `{prefix}` value is unique to your account and environment. To learn how to retrieve your base URLs for the sandbox and production environments, see [API endpoints](https://www.checkout.com/docs/developer-resources/api/api-endpoints.md).

**Production**

`POST` `https://{prefix}.api.checkout.com/payment-sessions/{id}/submit`

**Sandbox**

`POST` `https://{prefix}.api.sandbox.checkout.com/payment-sessions/{id}/submit`

### Request example

```json
{
  "session_data": "{SESSION_DATA_FROM_FLOW}",
  "3ds": {
    "enabled": true
  }
}
```

### Response example

```json
{
  "id": "pay_f2ws3hn4ijquzbytp3v5lsfxge",
  "status": "Action Required",
  "type": "card",
  "action": {
    "type": "3ds",
    "url": "http://3ds2.checkout.com/interceptor/sid_y3oqhf46pyzuxjbcn2giaqnb44"
  }
}
```

---

## Handle the payment response `Client side`

You must provide the unmodified response to the `handleSubmit` event in the client-side integration. Flow handles any additional required actions.

You can [obtain the payment response](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/get-started-with-flow.md#Handle_the_payment_response_) for both asynchronous and synchronous payments.