Skip to main content
​
string
required
CSS selector of the container. The component renders inside it and empties it on destroy().
​
string
required
Your public key, pk_live_... or pk_test_... (see Public keys).
​
string
required
The product, cart or order amount as a string with the currency’s decimals: "45.000" for KWD. Plain digits with an optional fraction, no sign, no exponent. Never a float.
​
string
required
ISO code of your store’s currency, "KWD".
​
'en' | 'ar'
Default: the page’s <html lang>, else en. Arabic renders right to left.
​
'product' | 'cart'
KrtiPromo only. On the cart, a total under an offer’s minimum shows the “on orders from” nudge; product pages show the generic line instead.
​
string
The product’s SKU, up to 64 characters, so SKU-specific offers show on the product page.
​
'light' | 'dark' | 'auto'
Default light. auto follows the shopper’s prefers-color-scheme and updates live. Picks the defaults of the --krti-* variables and the pop-up’s theme. See Styling.
​
'brand' | 'dark'
Default brand: the Krti badge (the wordmark on a small pill, in the line and the card) is brand blue with a white wordmark. dark fills it with the text colour, black on a light page and white on a dark one. Pick the one that suits your page; the partners console previews both.
​
boolean
true drops the fill of the line and the card. They keep their border, padding and radius on your own surface.

​
Instance methods

​
Re-renders with the new amount (variant or quantity change). One request per change, memoised for a minute per amount.
​
Empties the container and removes every listener.

​
Behaviour you can rely on

  • Any failure (network, revoked key, rate limit, a bad option) renders nothing or keeps the last message, and logs one console.warn('[Krti] ...'). The script never throws into your page.
  • Text from the API is rendered as text, never as HTML.
  • The pop-up is an iframe of checkout.krti.com; the script only accepts messages from that origin and only opens pop-ups on krti.com.