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:
- 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.
Updated 3 months ago