Checkout Offers

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

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

1482

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