Checkout embed

One script tag. Any button on your site opens a Komerza checkout.

Install

Add the script, give any button a product id.

<script src="https://checkout.komerza.com/embed/embed.iife.js" defer></script>
<button data-kmrza-product-id="…" data-kmrza-variant-id="…">Buy now</button>

Data attributes

bound by Komerza.init()

Basic

Fixed product and variant.

data-kmrza-product-id="…"
data-kmrza-variant-id="…"

Quantity picker

Order details open, quantity editable.

data-kmrza-expand-details

Variant picker

No variant id — the customer picks one first.

data-kmrza-product-id="…"

Bulk discount

Volume pricing; the total follows the quantity.

data-kmrza-expand-details

Dark theme

Instead of following the visitor's system.

data-kmrza-theme="dark"

All options

Quantity, theme, email, coupon, return URL, metadata.

data-kmrza-quantity="2"
data-kmrza-email="…"
data-kmrza-coupon-code="…"
data-kmrza-return-url="…"
data-kmrza-metadata='{…}'

JavaScript

Komerza.open(options)

Basic

The attribute form, from code.

Komerza.open({
	items: [{ productId, variantId, quantity: 1 }]
})

Several items

More than one product in the same checkout.

items: [
	{ productId, variantId, quantity: 1 },
	{ productId, variantId, quantity: 2 }
]

Prefilled email

For a customer you already know.

email: 'prefilled@example.com'

Coupon

Applied on open.

couponCode: 'DEMO20'

Affiliate

Explicit; otherwise the affiliate cookie applies.

affiliateCode: 'partner123'

Return URL

Where the customer goes after paying.

returnUrl: 'https://example.com/order-complete'

Metadata

Stored on the order, sent with webhooks.

metadata: {
	campaign: 'summer-sale',
	customerId: 'cust_12345'
}

Quantity picker

Order details open on load.

expandDetails: true

All options

Every option in one call.

Komerza.open({
	items: [{ …, quantity: 2 }, { …, quantity: 1 }],
	theme: 'dark',
	affiliateCode: 'partner123',
	email: 'vip@example.com',
	couponCode: 'VIP25',
	returnUrl: 'https://example.com/thank-you?source=embed',
	expandDetails: true,
	metadata: { campaign: 'vip-promotion', source: 'demo-page' }
})

Options

Attribute Option Notes
data-kmrza-product-iditems[].productIdRequired.
data-kmrza-variant-iditems[].variantIdOmit to show the variant picker.
data-kmrza-quantityitems[].quantityDefault 1.
data-kmrza-themethemelight, dark, auto (default).
data-kmrza-expand-detailsexpandDetailsOrder details and quantity picker open.
data-kmrza-emailemailPrefilled.
data-kmrza-coupon-codecouponCodeApplied on open.
data-kmrza-return-urlreturnUrlAfter payment.
data-kmrza-metadatametadataJSON object.
—affiliateCodeFalls back to the affiliate cookie.