Listening to Lifecycle Events

In a real-world scenario, you'll need to subscribe to the widget's lifecycle events to handle different states and user interactions. The widget exposes callbacks and helper functions to make this process as easy as possible. The callbacks you can subscribe to are:

Callback	Invoked When...
`loadedCb`	The widget has successfully loaded and a protection cost has been obtained
`optInCb`	Protection has been accepted through user interaction or the default state of the widget
`optOutCb`	Protection has been declined through user interaction or the default state of the widget; also invoked if the widget fails to load or obtain a protection cost.
`updatedCb`	Widget values are updated using `tg("update")`
`onErrorCb`	The widget fails to load or obtain a protection cost

Code Example

Here's what that lifecycle subscription configuration looks like, along with recommended actions you might take for each event:

tg("configure", {
    apiKey: "pk_xxxxxxxxxxxxxxxxxxxx",
    items: [{
      cost: "100.00"
    },{
      cost: "50.00"
    }],
    loadedCb: function() {
	    console.log("loaded callback");
	    
	    const isComplete = tg.isFormComplete(); // returns a boolean
	    const quote = tg.get("quote"); // returns the protection cost
	    
	    // TODO:
	    // 1. by checking isComplete, conditionally show UI elements. If false:
	    // --> a) alert the user to provide an opt-in or opt-out selection
	    // 2. verify the protection cost displayed in the widget matches the protection cost stored in the quote variable
    },
    optInCb: function() {
	    console.log("opted in callback");
	    
	    const isComplete = tg.isFormComplete(); // returns a boolean
	    const isProtected = tg.isProtected(); // returns a boolean
	    const quoteToken = tg.get("token"); // returns a JWT with quote data to pass through to your back-end

		// TODO:
		// 1. by checking isProtected, conditionally update the order total and **add** the protection cost in your cart's UI. If true:
		// --> a) send the quoteToken to update the cart total on your application's back end (add the protection cost)
	    // --> b) update your cart's UI to reflect the **addtion** of the protection cost in the cart total
	    // --> c) update your cart's UI to reflect the **addition** of the protection cost as a cart line item (optional)
	    // 2. by checking isComplete, conditionally show UI elements. If true:
	    // --> a) do not alert the user to provide an opt-in or opt-out selection
    },
    optOutCb: function() {
	    console.log("opted out callback");

	    const isComplete = tg.isFormComplete(); // returns a boolean
	    const isProtected = tg.isProtected(); // returns a boolean
	    const quoteToken = tg.get("token"); // returns a JWT with quote data to pass through to your back-end

		// TODO:
		// 1. by checking isProtected, conditionally update the order total and **remove** the protection cost in your cart's UI. If false:
		// --> a) send the quoteToken to update the cart total on your application's back end (remove the protection cost)
	    // --> b) update your cart's UI to reflect the **removal** of the protection cost in the cart total
	    // --> c) update your cart's UI to reflect the **removal** of the protection cost as a cart line item (optional)
	    // 2. by checking isComplete, conditionally show UI elements. If true:
	    // --> a) do not alert the user to provide an opt-in or opt-out selection
    },
    updatedCb: function() {
	    console.log("updated callback");

		const quote = tg.get("quote"); // returns the protection cost
		const quoteToken = tg.get("token"); // returns a JWT with quote data to pass through to your back-end

		// TODO:
		// 1. update the order total and **update** the protection cost in your cart's UI:
		// --> a) send the quoteToken to update the cart total on your application's back end (update the protection cost)
		// --> b) update your cart's UI to reflect the **change** of the protection cost in the cart total
	    // --> c) update your cart's UI to reflect the **change** of the protection cost as a cart line item (optional) 
    },
    onErrorCb: function(message){
	    console.log(message);
		    
		const isComplete = tg.isFormComplete(); // returns a boolean
	    const isProtected = tg.isProtected(); // returns a boolean

		// TODO:
	    // 1. hide UI elements related to the widget
	    // --> a) do not alert the user to provide an opt-in or opt-out selection 
	    // --> b) do not display any text or style elements associated with the widget
	    // --> c) if your checkout process is a multi-step form, programmatically proceed to the next step (optional)
	    // --> d) log the error with your monitoring service (optional)
    }
  });

Code Example

Todo