Handle the customer's choice

The widget saves the customer's choice to Teak for you. Your page only needs to reflect it: show the protection in the order summary, and keep the widget's cart in step with yours.

Callbacks

Pass these functions to configure:

Callback	DOM event	Arguments	Called when
`loadedCb`	`teak:loaded`	`(context)`	The widget has loaded and shown the offer.
`optInCb`	`teak:opt-in`	`(context)`	The customer adds protection.
`optOutCb`	`teak:opt-out`	`(context)`, or none after an error	The customer declines protection. Also called when the widget fails.
`updatedCb`	`teak:updated`	`(context)`	The widget re-priced after you called `configure` again.
`onErrorCb`	`teak:error`	`(sessionId)`	The widget failed and removed itself. See Errors.

loadedCb, optInCb, optOutCb, and updatedCb receive a context object, except when optOutCb is called because of an error. onErrorCb receives the session ID. DOM events carry the context object in event.detail.

The context object includes isProtected (true if the customer opted in) and isFormComplete (true once they've opted in or out).

Update your order summary

When the customer opts in, add the protection price to their order total. When they opt out, remove it.

teak('configure', {
  // ...apiKey, items, and other options
  optInCb: () => {
    const price = teak.get('quote');   // protection price, e.g. "6.50"
    orderSummary.setProtection(price);
  },
  optOutCb: () => {
    orderSummary.setProtection(null);
  },
});

optInCb and optOutCb also fire after loadedCb when the widget starts with a choice already made, for example when persist: true restores it. So your summary is correct from the first render.

Require a choice

Depending on your account's widget settings, the customer may need to choose before checking out. Check isFormComplete before you let them continue:

placeOrderButton.addEventListener('click', (event) => {
  if (teak.isFormComplete() === false) {
    event.preventDefault();
    showMessage('Please choose whether to add protection.');
  }
});

teak.isFormComplete() and teak.isProtected() return the state across every widget on the page.

Keep the widget in step with the cart

When the cart changes, for example the customer changes a quantity or removes an item, call configure again with the full, current list of items:

teak('configure', {
  apiKey: 'pk_...',
  sandbox: true,
  currency: 'USD',
  items: currentCartItems(),
  // ...callbacks
});

The widget re-prices the cart and calls updatedCb. Rapid changes are grouped, so you can call configure on every change. If the customer had opted in, they stay opted in, and the protection price updates: read teak.get('quote') in updatedCb to refresh your summary.

Errors

When the widget can't load, or can't save the customer's choice, it:

Removes every widget element from the page.
Dispatches teak:error on each widget element.
Calls onErrorCb with the session ID. It's called at most once until the widget loads successfully again.
Calls optOutCb with no context object, so a page that added the protection price on opt-in removes it.
Logs a message with an error code to the browser console.

Let the customer complete checkout without protection, and don't submit that order to Teak. Never block checkout because the widget failed. The widget has already taken the protection price out of the order total through optOutCb, so skip Submit an order for that checkout.

To skip Submit, note the failure in onErrorCb. When the customer checks out, leave out the session ID so your server knows not to submit:

let teakFailed = false;   // send no session ID to your server when true

teak('configure', {
  // ...
  onErrorCb: () => {
    teakFailed = true;
    orderSummary.setProtection(null);   // orderSummary: your own checkout code
  },
});

Next steps

Your order total now follows the customer's choice. Next, submit the order from your server:

Submit the order from your server once your own order is confirmed.
Use callbacks and events to react when the widget loads, the customer chooses, or the price updates.