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

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

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