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:

The merchant opens the ChargeAfter Modal with the following details:

{
  "firstName": "Scenario",
  "lastName": "Example",
  "email": "[email protected]",
  "billingAddress": {
    "line1": "57 Hastings St",
    "state": "MA",
    "zipCode": "01104",
    "city": 'Springfield',
  },
  "shippingAddress": {
    "line1": "57 Hastings St",
    "state": "MA",
    "zipCode": "01104",
    "city": 'Springfield',
  },
}

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

var sentConsumerDetails = {
  "firstName": "Scenario",
  "lastName": "Example",
  "email": "[email protected]",
  "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

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

ChargeAFter.payments.present('checkout', { ...,  onDataUpdate })

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 {};
  }
};

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 {};
  }
};

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.

Usage Example

onDataUpdate function signature

Code samples

updatedData Object

Object Response in the onDataUpdate function

📘Continuing in the Checkout Flow

📘
Continuing in the Checkout Flow