init() does more than connect your page to the store. Once the page has loaded, the script adds
the features a merchant turns on in the dashboard, so a custom storefront gets them without any code.
None of it touches your markup or your styles. Each piece renders inside its own shadow DOM, so your
CSS can’t restyle it and its CSS can’t leak into your page, and it picks up the store’s accent color
from its branding.
Cookie notice
A small “We use cookies” card in the bottom corner (full width on phones) with a Dismiss button. It appears on every page until the visitor dismisses it, and then stays dismissed in that browser. There’s no setting to turn it off. The notice informs; it doesn’t ask. Dismissing it hides it, and that’s all - analytics run either way.Pop-up offers
The offers a merchant creates under Products → Pop-up Offers: a title, a message, and a coupon code the buyer can copy. Each offer opens either:- On entrance - when the page loads, after the delay you set, or
- On exit intent - when the pointer leaves through the top of the window. That needs a pointer, so in practice it’s desktop only.
Recent-order notifications
Turn on Recent order notifications under Online Store → Settings → General and small toasts appear in the corner: a buyer’s masked name and country, the product and the price, and how long ago they ordered. The first shows after a few seconds, then another every 15 seconds.Analytics
The script feeds the store’s analytics in the dashboard. You don’t call anything.
Route changes are picked up from the History API (
pushState, replaceState and the back button),
which is how every mainstream router navigates, so single-page apps need no extra work.
Because a successful getProduct() counts as a product view, use it for product pages only. To show
names and prices in a cart or a grid, look products up in store.products from getStore() instead.
Affiliate links
An affiliate link is any page of your storefront with?ref= and the affiliate’s code on the end. When
init() runs it saves the code in a first-party cookie for 30 days, and a later link replaces an
earlier one - the last click wins. At checkout the code is exchanged for the affiliate, who is
credited with the order.
The Embed SDK uses the same cookie, so a buyer who lands on your storefront and
pays through an embedded checkout - or the other way round - is still credited to the same
affiliate. See Affiliates for how commission works.
Older integrations that set a
kmrza_ref cookie to an affiliate’s ID by hand still work. When
that cookie is present it takes precedence.Security
What Komerza takes care of
- Every order is priced on the server.
checkout()sends product IDs, variant IDs, quantities, the email address and the coupon code - never a price. Prices, discounts, stock and quantity limits are all worked out and checked by Komerza, so nothing done to your page’s JavaScript can change what a buyer pays. - Payment never touches your site. The buyer pays on Komerza’s hosted checkout, so card details never pass through your page.
- Checkout has a bot check. Before it creates the order,
checkout()runs a check in a small frame served fromcheckout.komerza.com. Most buyers never see it. Now and then one is asked to confirm they’re human in a small dialog, and checkout carries on once they have. It’s one reason to show a loading state whilecheckout()runs. - Order creation is rate-limited, which blunts scripts that hammer your store with fake orders.
What your page has to do
- Render store data as text. Review text is written by customers, so an
innerHTMLthat includes it can run their script on your storefront. UsetextContent, or your framework’s normal text binding - React, Vue and Svelte all escape by default. Never pass review text toinnerHTML,dangerouslySetInnerHTML,v-htmlor{@html}. - Sanitize markdown you turn into HTML. Store and product descriptions are markdown. If you render them as HTML, run the result through a sanitizer such as DOMPurify.
- Keep API keys out of the page. The client library needs no key, and anything in your page can be read by every visitor. Keys belong on a server, with the API.
- Allow the SDK in your Content-Security-Policy, if your site sends one - below.
Content-Security-Policy
Only relevant if you host the storefront yourself and send a CSP header. Add these origins to the policy you already have:
The redirect to
checkout.komerza.com is an ordinary navigation and needs no entry. If a directive is
missing, the browser blocks that request and logs a CSP violation in the console - checkout in
particular can stall while the bot-check frame is blocked.