# Retrieve card metadata

Use the `onCardBinChanged` event to monitor the card details provided by the customer in real time. This enables you to customize the payment session with the data collected and implement more complex processes. For example, if you want to:

- Add custom logic depending on the payment card's scheme.
- Modify the payment amount based on additional checkout information, such as a promotional code or a shipping address that incurs additional delivery fees.

> **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 onCardBinChanged event `Client side`

The `onCardBinChanged` [event](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference/flowcomponent.md#onCardBinChanged(FlowComponent,_CardMetadataResponse)) triggers when the customer inputs the first eight digits of the card number. It then returns the [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', {
  onCardBinChanged,
});
```

Implement the event logic to customize the payment flow depending on the card details the customer inputs. For example, the following code creates branching logic depending on the card scheme detected and rejects credit card payments:

```javascript
//Implement the onCardBinChanged event
const onCardBinChanged = (self, cardMetadata) => {

    // Apply custom logic based on card scheme
    switch (cardMetadata.scheme) {
        case 'visa':
            // apply custom logic for Visa
            break;
        case 'mastercard':
            // apply custom logic for Mastercard
            break;
    }

    // Reject credit cards
    if (cardMetadata.card_type === 'credit') {
        return {
            continue: false,
            errorMessage: 'Credit cards are not accepted.',
        };
    }

    // Otherwise, allow the payment to proceed
    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', {
    onCardBinChanged,
    handleSubmit,
});
```

Implement the event logic to provide the payment submission 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);

    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.