Contracts for the browser SDK — window.mulberry namespaces, methods, and the offer object
This is the contract reference for the Mulberry browser SDK exposed at window.mulberry. Use it to look up exact signatures, parameters, return values, and the shape of the offer object. For end-to-end walkthroughs, see Initialize the SDK and Add a warranty to an order — those guides link here for the details.
Pass the price unchanged — don't convert it
getWarrantyOfferforwardspriceto Mulberry's offer API exactly as you pass it (components/shared/API/index.js:119). Use the decimal price your platform already gives you — for example Shopify's product JSONvariant.price— and pass it through unchanged. Don't multiply it to cents or otherwise transform it.
Prerequisites
Before any namespace below is usable:
- The SDK script is loaded:
<script src="https://app.getmulberry.com/plugin/static/js/mulberry.js"></script> - You have called
mulberry.core.init({ publicToken })and awaitedmulberry.core.initCompleted.modal,inline, andlearnMoreawait this internally;buttonandfaqdon't, but they readcore.settings/core.offers, which are only populated once init resolves — so always await init first. - You have your public token. See Get your credentials.
Namespaces
window.mulberry exposes these partner-facing namespaces:
| Namespace | What it does |
|---|---|
core | Initialize the SDK and fetch offers. The entry point for everything else. |
modal | Render offers in a modal dialog. |
inline | Render offers inline within a container element on the page. |
button | Render a single add-to-cart-style button that opens the offer modal. |
faq | Open the standalone "what's covered" FAQ overlay for an offer. |
learnMore | Wire up "Learn more" triggers that open the FAQ overlay. |
Other namespaces are internalThe SDK also exposes
subscription,enrollment,cartManager,checkout,analytics,helpers, andcta. These power Mulberry Unlimited and managed integrations and are not part of the supported partner surface — don't call them directly.
core
The entry point. Initializes the SDK against your account, fetches offers, and gates rendering by location.
core.init(props)
Initializes the SDK. Resolves core.settings, core.validLocation, and the core.initCompleted promise. Call this once, as early as possible, and await it before fetching offers.
await mulberry.core.init({ publicToken: 'YOUR_PUBLIC_TOKEN' })
await mulberry.core.initCompletedParameters (single object):
| Name | Type | Required | Description |
|---|---|---|---|
publicToken | string | Yes | Your account's public token. Sent as a bearer token on every SDK request. |
lang | string | No | Language code for offer copy and overlays. Defaults to 'en'. |
isStaging | boolean | No | Defaults to false. Affects subscription-preview filtering. |
api_endpoint | string | No | Overrides the API base URL. Leave unset in production. |
Returns: Promise resolving to the raw warranty settings. You normally await core.initCompleted rather than this return value.
Instance properties set after init:
| Property | Description |
|---|---|
core.initCompleted | Promise<true> that resolves once init finishes. Await it before calling getWarrantyOffer or any render namespace. |
core.settings | The account/branding settings object. Pass this as settings to modal.init / inline.init. |
core.validLocation | boolean. false when the visitor's location is outside the supported region (geo gate). Render namespaces no-op when this is false. |
core.getWarrantyOffer(product)
Fetches the warranty offers available for a product. Await core.initCompleted first.
const offers = await mulberry.core.getWarrantyOffer({
id: 'OSLO-XYZ',
title: 'Oslo Chaise in Velvet',
price: '2999.00', // your platform's price, passed through unchanged
detail: shopifyProductJson,
})Parameters (single product object):
| Name | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Your identifier for the product (or variant). |
title | string | Yes | Product title, used in offer copy. |
price | string | number | Yes | The product's price, passed through to Mulberry unchanged — use your platform's value (a decimal amount); don't convert it. |
detail | object | No | The full platform product node (e.g. Shopify's AJAX product JSON). When it includes variants, the SDK resolves the variant SKU automatically. |
external_variant_id | string | No | The variant to match within detail.variants. Falls back to id, then to the first variant. |
Returns: Promise<offer[]> — an array of offer objects. Resolves to [] when Mulberry has no coverage for the product. Resolves to null when core.validLocation is false (an error is logged to the console).
Sendwarranty_offer_idat checkoutWhen the customer selects an offer, the only field you send to your cart, checkout, or registration call is
offer.warranty_offer_id. See Add a warranty to an order.
core.getCoverageDetails(programId)
Fetches coverage details for a coverage program by id. Used by the learnMore namespace; call it directly only if you render your own "what's covered" UI.
| Name | Type | Required | Description |
|---|---|---|---|
programId | string | Yes | The coverage program id. |
Returns: Promise resolving to the coverage data object.
modal
Renders offers in a modal dialog overlaid on the page. Returns an instance you keep a reference to.
modal.init(config)
const instance = mulberry.modal.init({
offers,
settings: mulberry.core.settings,
onWarrantySelect: (offer) => {
addWarrantyToCart(offer.warranty_offer_id)
mulberry.modal.close()
},
onWarrantyDecline: () => mulberry.modal.close(),
})
instance.open()Parameters (single config object):
| Name | Type | Required | Description |
|---|---|---|---|
offers | offer[] | Yes | The array returned by getWarrantyOffer. Init no-ops if empty. |
settings | object | Yes | Pass mulberry.core.settings. |
onWarrantySelect | function | Yes | Called with the selected offer when the customer adds coverage. (Defaults to a no-op if omitted — pass it for a working integration.) |
onWarrantyDecline | function | No | Called when the customer declines or closes the modal. |
selector | string | No | CSS selector for a container to mount the modal into. Defaults to the document body. |
trigger | string | No | CSS selector for an element that opens the modal on click. |
Returns: the modal instance (or false if there are no offers or the location is invalid).
Instance methods:
| Method | Description |
|---|---|
open(showOverlay = true) | Opens the modal. Pass false to open without the dimming overlay. |
close() | Closes the modal. |
updateOffer(offers) | Replaces the rendered offers with a new array (e.g. after a variant change). |
setLoading(isLoading) | Toggles the modal's loading state. |
inline
Renders offers inline inside a container element you select. Returns an instance you keep a reference to.
inline.init(config)
const instance = mulberry.inline.init({
offers,
settings: mulberry.core.settings,
selector: '#mulberry-inline',
onWarrantyToggle: ({ offer, isSelected }) => {
if (isSelected) addWarrantyToCart(offer.warranty_offer_id)
else removeWarrantyFromCart()
},
layout: { input: 'radio' },
})Parameters (single config object):
| Name | Type | Required | Description |
|---|---|---|---|
offers | offer[] | Yes | The array returned by getWarrantyOffer. Init no-ops if empty. |
settings | object | Yes | Pass mulberry.core.settings. |
selector | string | Yes | CSS selector for the container to render into. |
onWarrantyToggle | function | No | Called with { offer, isSelected } whenever the customer selects or deselects an offer. |
layout | object | No | Presentation overrides, merged over the defaults below. |
layout fields:
| Name | Type | Description |
|---|---|---|
input | 'buttons' | 'radio' | 'dropdown' | Selection control style. Default 'buttons'. |
ctaText | boolean | Show the CTA heading. Default true. |
faq | boolean | Show the "what's covered" FAQ link. Default true. |
logo | boolean | Show the Mulberry logo. Default true. |
stacked | boolean | Stack offers vertically. Default false. |
Returns: the inline instance (or false if there are no offers or the location is invalid).
Instance methods:
| Method | Description |
|---|---|
updateOffer(offers) | Replaces the rendered offers with a new array (e.g. after a variant change). |
deselectOffer() | Clears the current selection. |
hide() | Hides the offers (e.g. after the warranty is added to the cart). |
setLoading(isLoading) | Toggles the inline loading state. |
button
Renders a single Mulberry button into a container. Clicking it opens the offer modal (initialized from core.offers).
button.init(config)
| Name | Type | Required | Description |
|---|---|---|---|
selector | string | Yes | CSS selector for the container to render the button into. |
settings | object | Yes | Pass mulberry.core.settings. |
onWarrantySelect | function | No | Called with the selected offer when coverage is added from the modal. |
onButtonClick | function | No | Called when the button is clicked, before the modal opens. |
onButtonRemove | function | No | Called when the customer removes a previously added warranty. When set, the button offers a "remove" action. |
alignment | 'center' | 'right' | No | Horizontal alignment of the button. |
Methods: setLoading(isLoading) toggles the button's loading state.
faq
Opens the standalone "what's covered" FAQ overlay for a single offer.
faq.init(config) / faq.open() / faq.close()
| Name | Type | Required | Description |
|---|---|---|---|
coverage | offer | Yes | An offer object (must include coverage_details). Init logs an error and returns if it's missing. |
useOverlay | boolean | No | Render with the dimming overlay. Default true. |
Call faq.init(config) then faq.open() to display it, and faq.close() to dismiss.
learnMore
Wires up "Learn more" triggers on the page. Each element matching .mulberry-learn-more becomes a clickable trigger that opens the FAQ overlay.
learnMore.init(config)
| Name | Type | Required | Description |
|---|---|---|---|
offer | offer | No | The offer to show coverage for. When omitted, coverage is fetched via getCoverageDetails using each element's data-program-id. |
settings | object | No | Pass mulberry.core.settings for branded CTA copy. |
Each trigger element reads data-program-id and an optional data-layout ('text' by default) attribute. init no-ops if core.validLocation is false.
The offer object
getWarrantyOffer returns an array of these. The table covers the partner-relevant fields only — the response includes additional internal fields you can ignore.
| Field | Type | Description |
|---|---|---|
warranty_offer_id | string | The offer identifier. This is the value you send at checkout/registration. |
warranty_hash | string | Hash identifying the offer terms. |
customer_cost | string | The price the customer pays for the plan, as a decimal string (e.g. "9.99"). |
cost | string | The plan cost, as a decimal string. |
strikethrough_customer_cost | string | null | Original price to show struck through, when the plan is discounted. |
currency | string | Currency code, e.g. "USD". |
duration_months | string | Plan length in months (e.g. "12", "36"). |
coverage_details | array | [{ long: string[], short: string[] }] — bullet lists of what's covered, long and short form. |
service_type | string | The service type for the plan (e.g. repair_replace). |
plan_type | null | 'subscription' | 'subscription' for Mulberry Unlimited offers; null for standard plans. |
policy_terms_url | string | URL of the plan's policy terms document. |
mb_category | string | Mulberry product category for the offer. |
external_product_id | string | null | Your product identifier for the covered product, when known. |
product | object | Mulberry's view of the covered product (name, price, identifiers), including is_subscription_eligible — true when the product qualifies for Mulberry Unlimited. |
productvs.product_meta
offer.productis Mulberry's serialized view of the covered product, and it carriesis_subscription_eligible.offer.product_metais a copy of the exactproductobject you passed togetWarrantyOffer. Use whichever is more convenient.
Typical flow
- Load the SDK script:
<script src="https://app.getmulberry.com/plugin/static/js/mulberry.js"></script>. await mulberry.core.init({ publicToken }), thenawait mulberry.core.initCompleted. You should now havemulberry.core.settingspopulated.const offers = await mulberry.core.getWarrantyOffer(product), passing the product's price unchanged. You should now see an array of offers (or[]if there's no coverage).- Render with
mulberry.inline.init(...)ormulberry.modal.init(...), passingoffersandmulberry.core.settings. - On select, send
offer.warranty_offer_idto your cart, checkout, or registration flow. See Add a warranty to an order.
