# Dynamically adjust the payment amount

You can dynamically adjust the payment amount based on changes during checkout. For example, if the customer applies a discount code or changes their shipping method.

---

## Modify the payment sheet amount `Client side`

> **Information**
>
> You can only modify the payment sheet amount for Apple Pay and Google Pay payments.

During checkout, some payment methods display their own payment sheet with the payment amount to the customer.

To modify the payment amount shown, call the `update()` [method](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference/checkoutwebcomponents.md#update(updateDetails)) on your `CheckoutWebComponents` instance and specify a new `amount`:

```javascript
await checkout.update({
  amount: 2500
});
```

If you update the payment sheet amount, you must also add a `handleSubmit` callback to the initialization code for your Flow instance to handle the payment attempt.

---

## 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.