Embeds

Embeds let you place Storrik products and checkout experiences directly inside your website or application.
Unlike the rest of the v1 API, embeds are already active and production-ready.

Getting Started

Include the Storrik embed script:

<script src="https://cdn.storrik.io/embed.js" async></script>

or

<script src="https://cdn.storrik.io/embed/embed.js" async></script>

Trigger the payment modal

You can trigger the checkout modal from anywhere on your page.

Basic Product Checkout

<!-- With onclick -->
<button onclick="storrik.pay('STORE_ID', 'PRODUCT_ID')">Buy Now</button>

<!-- Or directly in JS -->
<script>
  storrik.pay('STORE_ID', 'PRODUCT_ID')
</script>

This opens the checkout modal for the base product. If the product has variants, the user will be prompted to select one before continuing.

Variant-Specific Checkout

You can now directly open checkout for a specific variant using the third parameter.

<!-- With onclick -->
<button onclick="storrik.pay('STORE_ID', 'PRODUCT_ID', 'VARIANT_ID')">Buy Now</button>

<!-- Or directly in JS -->
<script>
  storrik.pay('STORE_ID', 'PRODUCT_ID', 'VARIANT_ID')
</script>

If a variant ID is supplied:

• The checkout modal will automatically load that variant’s price and stock.
• The product name will be displayed as: Product Name – Variant Name
• Users skip the “Select option” step and proceed directly to purchase.

Parameters

When calling storrik.pay(storeId, productId, variantId?, options?), you can provide:

style

Controls the layout mode of the modal.
Options:

• compact – minimal design
• normal – default layout
• expanded – full product detail view

colors

Customize the color palette of the embed.
You can override any of these:

• overlay – background overlay
• background – page background
• surface – base card background
• surfaceElevated – elevated card layers
• border – borders & dividers
• text – main text color
• muted – secondary text
• primary – primary accent color
• buttonText – button text color
• success – success messages / states
• warning – warnings / alerts
• danger – errors / destructive actions
• glow – glow effect color

If not provided, Storrik applies sensible defaults.

Example: Customized Embed

<script src="https://cdn.storrik.io/embed.js" async></script>
<script>
  storrik.pay("store_abcd123", "prod_efgh456", {
    style: "compact",
    colors: {
      primary: "#10b981",
      buttonText: "#ffffff",
      glow: "#22d3ee"
    }
  })
</script>