Updating the Widget

🚧

Integration Requirement

If your checkout process allows for changes in the quantity, price, or type of items while the widget is rendered, adhering to the steps in this section is required.

To accommodate dynamic changes in your checkout process, you can update the widget without completely re-initializing by using the tg("update") command.

tg("configure", {
	apiKey: "pk_xxxxxxxxxxxxxxxxxxxx",
	items: [{
      cost: "100.00"
    },{
      cost: "50.00"
    }]
});

// if the customer adds new items, removes current items, or changes any item's price,
// you can use the "update" command to re-calculate a new quote within the same widget instance
tg("update", {
	items: [{
      cost: "25.00"
    },{
      cost: "75.00"
    }]
});

Notes

Any change made while using the update command here will trigger the updatedCb lifecycle event. In that callback, you can update the cart items on your application's back-end (if necessary), as well as retrieving and displaying the updated protection cost in your checkout's UI.

The update command is most commonly used when your cart's items change. This can be due to a quantity, price, or type update, which requires a new quote to be calculated and displayed to the customer. For example, if the customer applies or removes an applied coupon code, both scenarios would result in a price update.

Todo

• Handle item updates with the tg("update") command