Overview

In addition to 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 for a single product that shows offer options and allows customers to add a warranty with one click.

Checkout Product Modal

Screen Shot 2022-03-03 at 9.23.55 PM.png

An example of how to use the Checkout Product Modal placement is shown below:

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 this placement type.	yes	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:

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

Checkout Checkbox List

The Checkbox List placement can display inline on a checkout page showing the full options for warranty offers for all warrantable items in cart.

The main input is the products list. This is a list of the store products in cart along with the fetched warranty offers. This is the same format that mulberry.core.getAllWarrantyOffers outputs.

onCartUpdate This can convey multiple changes in cart like add/remove in one action to avoid extra cart/page refreshes. Update actions can be add for net new adding a warranty offer to cart, remove for fully removing a warranty offer from cart, or change for updates in quantity of an existing warranty offer in cart. You can test around with the embeded example or see the below sample arguments for onCartUpdate

[
  {
    action: "remove",
    product: {
      id: "6587012205442",
      image: { ... },
      name: "Luxury Sectional - Forrest Birch Brown, extra long",
      price: "210.00",
      quantity: 2,
      selected: true,
      selectedQuantity: 2,
      selectedWarrantyOffer: "ada34bc4-b94b-4606-9bd7-bb957706ce95",
      title: "Brown Sectional",
      warrantyOffers: [{ ...}, { ...}]
    },
    quantity: 0,
    warrantyOffer: { ...}
  }, {
    action: "add",
    product: {
      id: "6587012205442",
      image: { ... },
      name: "Luxury Sectional - Forrest Birch Brown, extra long",
      price: "210.00",
      quantity: 2,
      selected: true,
      selectedQuantity: 2,
      selectedWarrantyOffer: "ada34bc4-b94b-4606-9bd7-bb957706ce95",
      title: "Brown Sectional",
      warrantyOffers: [{ ...}, { ...}]
    },
    quantity: 2,
    warrantyOffer: { ...}
  }
]

Parameter	Description	Required	Type
products	List of products with nested warranty offers on each product	yes	List of Products with WarrantyOffers
placementType	`'checkout_checkbox_list'`	yes	string
settings	Retailer settings returned by the SDK	yes	object
selector	Selector for where to load the checkout placement within the DOM.	yes	string
onCartUpdate	Callback that gets fired when a user modifies the warranty selection in the cart. Will be called whenever a user opts to change their cart selection. This will be called with a list of update action objects.	yes	function
layout	Optional layout inputs for changing the layout/design of the placement. Supported layout properties are: background: (any hex color string) hideHeaderText: (boolean) hideSubheaderText: (boolean)	no	object