---
agentTools:
  projectIndex: https://docs.chargeafter.com/llms.txt
---

# onDataUpdate

This event is triggered when the consumer information such as an address is changed in the ChargeAfter Modal.

It provides the merchant the ability to update the cart details in case it's needed, for example, tax amount or shipping amount in case the state is changed.

It can also be triggered if the consumer information changes in a provider flow.

**Note:** This event is only for the Checkout flow.

# Usage Example

Below is a possible scenario of how this event can be used:

1. The merchant opens the ChargeAfter Modal with the following details:

```json Json
{
  "firstName": "Scenario",
  "lastName": "Example",
  "email": "some-address@ggmail.com",
  "billingAddress": {
    "line1": "57 Hastings St",
    "state": "MA",
    "zipCode": "01104",
    "city": 'Springfield',
  },
  "shippingAddress": {
    "line1": "57 Hastings St",
    "state": "MA",
    "zipCode": "01104",
    "city": 'Springfield',
  },
}
```

2. The consumer changes his information.
3. When the information changes, we will call the `onDataUpdate` with the following information:

```javascript Javascript
var sentConsumerDetails = {
  "firstName": "Scenario",
  "lastName": "Example",
  "email": "some-address@ggmail.com",
  "billingAddress": {
    "line1": "57 Hastings St",
    "state": "MA",
    "zipCode": "01104",
    "city": 'Springfield',
  },
  "shippingAddress": {
    "line1": "57 Hastings St",
    "state": "MA",
    "zipCode": "01104",
    "city": 'Springfield',
  },
};

function onDataUpdate(updatedData, callback) {
  // here you can check the updatedData and decide if the tax/total amounts should be changed
  var receivedConsumerDetails = updatedData.consumerDetails;
  
  if (
    receivedConsumerDetails.billingAddress.state !==
    sentConsumerDetails.billingAddress.state
  ) {
    //in case it changed
    callback({
      taxAmount: 200,
      shippingAmount: 150,
      totalAmount: 1750, // this is the calculation of the cart, for example items prices, taxes, warranty and discounts.
    });

    // or not calling the callback but just returning the new cart same like before
    return {
      taxAmount: 200,
      shippingAmount: 150,
      totalAmount: 1750, // this is the calculation of the cart, for example items prices, taxes, warranty and discounts.
    };
  } else {
    //in case its not changed
    callback({});

    // or not calling the callback but just returning the new cart same like before
    return {};
  }
};
```

# onDataUpdate function signature

The function can be used in two ways, synchronized or asynchronized.

* For synchronized, you can just return data as in the above example.
* For asynchronized, it is possible to use async await(es6), Promise, or just call the callback when you need without returning data in the function.

## Code samples

```javascript JS
function onDataUpdate(updatedData, callback){
  // same as in the example
}

ChargeAFter.payments.present('checkout', { ...,  onDataUpdate })
```
```javascript Synchronized
function onDataUpdate(updatedData, callback) {
  // here you can check the updatedData and decide if the tax/total amounts should be changed
  var receivedConsumerDetails = updatedData.consumerDetails;
  
  if (
    receivedConsumerDetails.billingAddress.state !==
    sentConsumerDetails.billingAddress.state
  ) {
    // just returning the new cart same like before
    return {
      taxAmount: 200,
      shippingAmount: 150,
      totalAmount: 1750, // this is the calculation of the cart, for example items prices, taxes, warranty and discounts.
    };
  } else {
    // just returning the new cart same like before
    return {};
  }
};
```
```javascript Async-Await
async function onDataUpdate(updatedData, callback) {
  // here you can check the updatedData and decide if the tax/total amounts should be changed
  var receivedConsumerDetails = updatedData.consumerDetails;
  
  if (
    receivedConsumerDetails.billingAddress.state !==
    sentConsumerDetails.billingAddress.state
  ) {
    // here you can do async action
    await fetch(...);
		
		// can return data or call callback
    return {
      taxAmount: 200,
      shippingAmount: 150,
      totalAmount: 1750, // this is the calculation of the cart, for example items prices, taxes, warranty and discounts.
    };
  } else {
    // can return data or call callback
    return {};
  }
};
```
```javascript Promise
function onDataUpdate(updatedData, callback) {
  return new Promise(resolve=>{
    // here you can check the updatedData and decide if the tax/total amounts should be changed
    var receivedConsumerDetails = updatedData.consumerDetails;

    if (
      receivedConsumerDetails.billingAddress.state !==
      sentConsumerDetails.billingAddress.state
    ) {
      resolve({
        taxAmount: 200,
        shippingAmount: 150,
        totalAmount: 1750, // this is the calculation of the cart, for example items prices, taxes, warranty and discounts.
      });
    } else {
      resolve({});
    }
  });
};
```

# updatedData Object

The `updatedData` object is very similar to the `cartDetails` object that is provided initially in the `ChargeAfter.checkout.present()` function. It contains the updated checkout details and is composed of the following fields:

| Name            | Type   |
| :-------------- | :----- |
| totalAmount     | Number |
| taxAmount       | Number |
| shippingAmount  | Number |
| items           | Array  |
| consumerDetails | Object |
| discounts       | Array  |

# Object Response in the onDataUpdate function

The object returned in the `onDataUpdate` function has the following structure:

| Name           | Required/Optional |
| :------------- | :---------------- |
| shippingAmount | Required          |
| taxAmount      | Required          |
| totalAmount    | Required          |

> 📘 Continuing in the Checkout Flow
>
> Do not forget to either immediately return an object in the onDataUpdate function or invoke the callback function. The merchant’s website response is a condition for moving forward in the Checkout flow.