> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rmz.gg/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding Checkout

> Add an RMZ product checkout widget to any external website.

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.

## Quick Start (Widget)

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

```html theme={null}
<!-- 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`) |

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

### 3. Multiple products on one page

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

```html theme={null}
<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

<Steps>
  <Step title="Enable embed">
    Go to **Dashboard > Settings > Embed** and toggle the feature on.
  </Step>

  <Step title="Select a product">
    Choose the product you want to embed from the dropdown.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Copy the embed code">
    Copy the generated HTML snippet and paste it into your website.
  </Step>
</Steps>

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

***

## JavaScript Events

The widget dispatches custom DOM events you can listen for:

```javascript theme={null}
// 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](/embed-api/overview) 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

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

### Example: Fetch product and create checkout

```javascript theme={null}
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](/embed-api/overview) for all endpoints and parameters.