Embeds

Storrik embeds allow you to open a secure checkout modal directly inside your website or application.

Embeds use a dedicated public API and are fully production-ready. All pricing, currency, and availability are derived strictly from the product.

Getting Started

Include the Storrik embed script once on your page:

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

The embed automatically connects to Storrik’s public checkout infrastructure.

Configure

Before opening checkout, configure the embed with your public key:

<script>
  storrik.configure({
    pk: "PK_xxx"
  })
</script>

Trigger Checkout

Checkout is opened using the storrik.pay function.

Function Signature

storrik.pay(
  productId: string,
  variantId?: string,
  options?: {
    style?: "compact" | "normal" | "expanded"
    colors?: {
      overlay?: string
      background?: string
      surface?: string
      surfaceElevated?: string
      border?: string
      text?: string
      muted?: string
      primary?: string
      buttonText?: string
      success?: string
      warning?: string
      danger?: string
    }
  }
)

Basic Product Checkout

<button onclick="storrik.pay('PRODUCT_ID')">
  Buy now
</button

This opens checkout using the product’s default pricing and currency.

If the product has variants, the customer will be prompted to select one.

Variant Checkout

<button onclick="storrik.pay('PRODUCT_ID', 'VARIANT_ID')">
  Buy now
</button

When variantId is provided:

Variant pricing is used
Currency is taken from product
Variant selection is skipped
The product name will be displayed as: Product Name – Variant Name

Checkout With Options


<button onclick="
  storrik.pay(
    'PROD_xxx',
    'VAR_xxx',
    {
      style: 'expanded',
      colors: {
        primary: '#10b981',
        buttonText: '#000000ff'
      }
    }
  )
">
  Buy now
</button>

UI Options

style

Controls the layout mode of the modal.
Options:

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

Example

storrik.pay('PRODUCT_ID',{
  style: "expanded"
})

colors

Customize the embed color palette.

colors?: {
  overlay?: string
  background?: string
  surface?: string
  surfaceElevated?: string
  border?: string
  text?: string
  muted?: string
  primary?: string
  buttonText?: string
  success?: string
  warning?: string
  danger?: string
}

If not provided, Storrik applies sensible defaults.

Example: Customized Embed

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

<button id="buy">Buy</button>

<script>
  storrik.configure({ pk: "PK_xxx" })

  document.getElementById("buy").onclick = async () => {
    storrik.pay("PRODUCT_ID", "VARIANT_ID", {
      style: "compact",
      colors: {
        primary: "#10b981",
        buttonText: "#ffffff"
      }
    })
  }
</script>

Embeds with Next.js

When using Next.js with the App Router, embeds must be loaded client-side only.

This is because the Storrik embed relies on window.

1. Load the Embed Script

Add the embed script once in your root layout.

// app/layout.tsx
import Script from "next/script"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}

        <Script
          src="https://cdn.storrik.com/embed.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

This ensures the embed is available globally across your app.

2. Configure the Embed

Create a client component to configure Storrik once.

// components/StorrikProvider.tsx
"use client"

import { useEffect } from "react"

export function StorrikProvider() {
  useEffect(() => {
    if (typeof window === "undefined") return
    if (!window.storrik) return

    window.storrik.configure({
      pk: "PK_xxx",
    })
  }, [])

  return null
}

Mount this component once.

3. Mount the Provider

// app/layout.tsx
import { StorrikProvider } from "@/components/StorrikProvider"
import Script from "next/script"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <StorrikProvider />
        {children}

        <Script
          src="https://cdn.storrik.com/embed.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

4. Trigger Checkout

Pages that open checkout must be client components.

// app/page.tsx
"use client"

export default function Page() {
  return (
    <button
      onClick={() =>
        window.storrik.pay(
          "PROD_xxx",
          "VAR_xxx",
          {
            style: "compact",
          }
        )
      }
    >
      Buy now
    </button>
  )
}

Embeds

On this page