Fixture
Checkout button variants
Every embed shape checkout.js supports, on one page. Variants using this mock seller’s IDs are live; the three that need a button, package or gift ID are marked and inert until you paste real ones in.
01
Standard — seller + experience (v2)
The default embed, same as the one used across the marketing pages.
02
Seller only — no experience
Opens the full catalog rather than one experience.
03
xola-custom — your own markup
checkout.js binds to your element instead of injecting its pre-styled button.
04
Anchor tag as the trigger
An <a> carrying the class and data attributes rather than a div.
05
Version 3, dark theme
data-version="3" with data-theme="dark". Needs a v3-enabled experience.
06
Locale override
data-locale accepts auto or an explicit locale.
07needs a real ID
Button ID embed
Drives the button off a configured Xola button record instead of seller/experience. Replace REPLACE_BUTTON_ID to activate.
08needs a real ID
Gift embed
The gift flow uses the xola-gift class.
09needs a real ID
Package embed
data-package in place of data-experience.
10
Pseudo-element and inner-HTML triggers
Label supplied by CSS :before, and the same with real inner text — both historically awkward for click-target measurement.
11
Absolute container, relative buttons
Checks the overlay tracks its trigger inside a positioned ancestor.
12
Relative container, absolute buttons
The inverse arrangement.
13
Nested links inside a custom trigger
The click must not be swallowed by the inner anchors.
14
Direct checkout URL — openExternal
Bypasses the embed entirely and opens the hosted checkout.
20
Chat widget
The launcher is moved 96px from the edge with a CSS variable on #xola-chat-launcher; the button below opens it through window.XolaChat.open().