Overview

In addition to the pdp and cart placements, Mulberry allows you to present offers on your checkout page of your eCommerce experience.

There are two available types of placements for the checkout page. The first is a modal that shows all available warranty offers together. The second is a Plus Button widget that shows offer options and allows customers to add a warranty with one click.

Checkout Modal

Screen Shot 2021-11-24 at 9.34.24 AM.png

An example of how to use the Checkout page modal placement is shown below:

async function initializeMulberry() {
  const {
    mulberry: { core, modal },
  } = window
  await core.init({
    publicToken: '3-ZUeig_K1r-6sm-HAO3tJnANgI',
  })
  const { settings } = core
  const products = [
    {
      title: 'Sleeper Couch',
      id: '6639947284654',
      price: '1199.00',
      image: {
        src:
          'https://cdn.shopify.com/s/files/1/0564/4461/6878/products/couch_940x.jpg?v=1620157146',
      },
      quantity: 2,
    },
    {
      title: 'Sneakers',
      id: '6659857875118',
      price: '120.00',
      quantity: 1,
    },
    {
      title: 'tshirt',
      id: '6659855188142',
      price: '25.00',
      image: '',
      quantity: 1,
    },
  ]
  const productsWithOffers = await core.getAllWarrantyOffers(products)

  const productModal = await modal.init({
    settings,
    type: 'products',
    placement: 'checkout',
    products: productsWithOffers,
    onModifyCart: (products) => {
      console.log(products)
    },
  })

  const addProtectionButton = document.querySelector('.add-protection')

  addProtectionButton.addEventListener('click', () => {
    productModal.open()
  })
}

initializeMulberry()

<button class="add-protection">Add Product Protection</button>

Parameter	Definition	Required	Type
products	Products with offers to display	yes	array
settings	Retailer settings returned by the SDK	yes	object
onModifyCart	Callback that gets fired when a user modifies the warranty selection in the cart	yes	function
placement	label for classifying the usage. Set as 'checkout' for usage here.	no	string
type	Specify the type of modal displayed. Currently, only one type of modal is supported which is `products`.	yes	string

Checkout Plus Button

Screen Shot 2021-11-24 at 9.28.55 AM.png

An example of how to use the Checkout page Plus Button placement is shown below:

async function initializeMulberry() {
  const {
    mulberry: { core, checkout },
  } = window
  await core.init({
    publicToken: '3-ZUeig_K1r-6sm-HAO3tJnANgI',
  })
  const { settings } = core
  const products = [
    {
      title: 'Sleeper Couch',
      id: '6639947284654',
      price: '1199.00',
      image: {
        src:
          'https://cdn.shopify.com/s/files/1/0564/4461/6878/products/couch_940x.jpg?v=1620157146',
      },
      quantity: 2,
    },
    {
      title: 'Sneakers',
      id: '6659857875118',
      price: '120.00',
      quantity: 1,
    },
    {
      title: 'tshirt',
      id: '6659855188142',
      price: '25.00',
      image: '',
      quantity: 1,
    },
  ]
  const productsWithOffers = await core.getAllWarrantyOffers(products)

  const checkoutButton = checkout.init({
    products: productsWithOffers,
    settings: mulberry.core.settings,
    selector: '.mulberry-checkout-container',
    onModifyCart: (products) => {
      console.log(products)
    }
  })

  const orderSummarySection = document.querySelector(".order-summary__section--total-lines");

    const checkoutContainer = document.createElement("div");
  checkoutContainer.className = 'mulberry-checkout-container';
  orderSummarySection.parentNode.insertBefore(checkoutContainer, orderSummarySection);
}

initializeMulberry()

Parameter	Definition	Required	type
products	List of products with associated warranties	yes	array
settings	Retailer settings returned by the SDK	yes	object
onModifyCart	Callback that gets fired when a user modifies the warranty selection in the cart	yes	function
selector	Selector for where to load the checkout placement within the DOM.	yes	string