Embedding Checkout

The Embed feature lets you sell a product directly from any website — your blog, landing page, or marketing site. RMZ provides a ready-made widget script that handles the entire purchase flow. The fastest way to embed checkout is using the RMZ widget script. This is the same code generated by your dashboard under Settings > Embed.

1. Add the script and button

<!-- RMZ Embed Code -->
<script src="https://embed-js.rmz.gg/rmz-embed.js"></script>
<button data-rmz-product="61200"
    data-rmz-key="rmz_pk_1_DIO7CqCNSyYtZSTVqqjU9VkT"
    data-rmz-theme="auto">Buy Product</button>

That’s it. When a customer clicks the button, a checkout modal opens with the full purchase flow — product info, authentication, payment.

2. Button attributes

Attribute	Required	Description
`data-rmz-product`	Yes	Your product ID from the dashboard
`data-rmz-key`	Yes	Your embed public key (starts with `rmz_pk_`)
`data-rmz-theme`	No	Theme mode: `auto`, `light`, or `dark` (default: `auto`)

You can style the button with any CSS — the embed script only uses the data attributes. The button text is also fully customizable.

3. Multiple products on one page

Add multiple buttons with different product IDs — they all share the same script:

<script src="https://embed-js.rmz.gg/rmz-embed.js"></script>

<button data-rmz-product="100"
    data-rmz-key="rmz_pk_1_DIO7CqCNSyYtZSTVqqjU9VkT"
    data-rmz-theme="auto">Buy Product A</button>

<button data-rmz-product="200"
    data-rmz-key="rmz_pk_1_DIO7CqCNSyYtZSTVqqjU9VkT"
    data-rmz-theme="dark">Buy Product B</button>

Setup in Dashboard

Enable embed

Go to Dashboard > Settings > Embed and toggle the feature on.

Select a product

Choose the product you want to embed from the dropdown.

Copy your public key

Under Security Settings, copy the Public Key (format: rmz_pk_1_...). You can regenerate it at any time, but you’ll need to update the code on all sites using it.

Configure allowed domains (optional)

Under Allowed Domains, add the domains where the widget will be used (e.g., https://example.com or *.example.com). Leave empty to allow all origins.

Copy the embed code

Copy the generated HTML snippet and paste it into your website.

If you regenerate the public key, you must update the data-rmz-key attribute on all sites using the embed code.

JavaScript Events

The widget dispatches custom DOM events you can listen for:

// Modal opened
document.addEventListener('rmz:modal:open', (e) => {
  console.log('Product:', e.detail.productId);
});

// Modal closed
document.addEventListener('rmz:modal:close', () => {
  console.log('Modal closed');
});

// Checkout completed
document.addEventListener('rmz:checkout:complete', (e) => {
  console.log('Order ID:', e.detail.orderId);
});

// Checkout error
document.addEventListener('rmz:checkout:error', (e) => {
  console.log('Error:', e.detail.message);
});

Advanced: Direct API Integration

If you need full control over the UI, you can call the Embed API directly instead of using the widget script. This lets you build a completely custom checkout experience.

Base URL

https://embed.rmz.gg/api/embed

Flow

Fetch product info: GET /api/embed/product/{productId}
Authenticate customer via OTP: POST /api/embed/auth/start → POST /api/embed/auth/verify
Create checkout: POST /api/embed/checkout (or POST /api/embed/guest/checkout)
Initiate payment: POST /api/embed/payment/initiate
Poll for completion: GET /api/embed/payment/status/{checkoutUrl}

Example: Fetch product and create checkout

const EMBED_KEY = "rmz_pk_1_DIO7CqCNSyYtZSTVqqjU9VkT";
const PRODUCT_ID = 61200;
const API = "https://embed.rmz.gg/api/embed";

// 1. Get product info
const product = await fetch(`${API}/product/${PRODUCT_ID}`, {
  headers: { "X-Embed-Key": EMBED_KEY }
}).then(r => r.json());

// 2. Start OTP auth
const auth = await fetch(`${API}/auth/start`, {
  method: "POST",
  headers: { "X-Embed-Key": EMBED_KEY, "Content-Type": "application/json" },
  body: JSON.stringify({
    product_id: PRODUCT_ID,
    country_code: "966",
    phone: "501234567"
  })
}).then(r => r.json());

// 3. Verify OTP (user enters code)
const verify = await fetch(`${API}/auth/verify`, {
  method: "POST",
  headers: { "X-Embed-Key": EMBED_KEY, "Content-Type": "application/json" },
  body: JSON.stringify({
    session_token: auth.data.session_token,
    code: "1234"
  })
}).then(r => r.json());

const token = verify.data.token;

// 4. Create checkout
const checkout = await fetch(`${API}/checkout`, {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${token}`,
    "X-Embed-Key": EMBED_KEY,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ product_id: PRODUCT_ID, quantity: 1 })
}).then(r => r.json());

// 5. Initiate payment
if (checkout.data.type !== "free_order") {
  const payment = await fetch(`${API}/payment/initiate`, {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${token}`,
      "X-Embed-Key": EMBED_KEY,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      checkout_url: checkout.data.checkout_url,
      payment_method: checkout.data.payment_methods[0].id
    })
  }).then(r => r.json());

  if (payment.data.type === "redirect") {
    window.open(payment.data.redirect_url, "_blank");
  }
}

See the full Embed API reference for all endpoints and parameters.

Getting Started

Guides

Quick Start (Widget)

1. Add the script and button

2. Button attributes

3. Multiple products on one page

Setup in Dashboard

JavaScript Events

Advanced: Direct API Integration

Base URL

Flow

Example: Fetch product and create checkout

​Quick Start (Widget)

​1. Add the script and button

​2. Button attributes

​3. Multiple products on one page

​Setup in Dashboard

​JavaScript Events

​Advanced: Direct API Integration

​Base URL

​Flow

​Example: Fetch product and create checkout

Quick Start (Widget)

1. Add the script and button

2. Button attributes

3. Multiple products on one page

Setup in Dashboard

JavaScript Events

Advanced: Direct API Integration

Base URL

Flow

Example: Fetch product and create checkout