shipped-suite-js-client-sdk

1. Install shipped-suite-js-client-sdk

npm i shipped-suite-js-client-sdk

2. Add the div snippet where you would like the widget to appear in the cart or checkout flow.

<div class="shipped-widget"></div>

3. Import the Shipped Widget

import { Widget } from 'shipped-suite-js-client-sdk'

4. Instantiate the JS SDK

const shippedWidget = new Widget({
  publicKey: 'your_publishable_key_here',
  widgetSelector: '.shipped-widget',
})

5. How to obtain API keys

Please reference Authentication section for information about how to obtain your API key.

6. Update the order value when the cart loads/changes. This value should be the sum of the selling price (prior to any discounts) of all the items in the cart, excluding adjustments like shipping and tax.

shippedWidget.updateOrderValue(129.99)

7. Listen and react to onChange. When a user opts in or opts out of Shipped Widget, or when the offer changes, we will trigger the onChange callback. Your code should provide a handler for this callback, and ensure any necessary processing required by your backend server. For example:

shippedWidget.onChange(details => {
  // Example 'details':
  // {
  //   "isSelected": true,
  //   "totalFee": "2.23"
  // }

  if (details.isSelected) {
    // ajax call to add Shipped product to the cart
    fetch('/api/add-product', {
      method: 'POST',
      body: JSON.stringify({
        productName: 'Shipped Shield - Package Assurance for unexpected issues',
        productPrice: details.totalFee,
      }),
    })
  } else {
    // ajax call to remove Shipped product from the cart
  }
})