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

# Embed Checkout

> data-markt buy buttons and Markt.init() for external merchant sites.

# Embed Checkout

Komerza-style buy buttons for sites **outside** a Join Markt theme. Dashboard product page → **Embed Checkout** generates snippets.

For in-theme product grids, use [Shortcodes & Tags](/storefront/shortcodes) (Nunjucks/Vite) instead.

***

## Quick start

```html theme={null}
<script src="https://YOUR_APP_ORIGIN/embed/embed.iife.js" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    Markt.init()
  })
</script>

<button
  data-markt-product-id="PRODUCT_CUID"
  data-markt-variant-id="VARIANT_UUID"
  data-markt-quantity="1"
  data-markt-theme="auto"
>
  Buy Now
</button>
```

Demo (local): `/embed/demo.html?productId=…&variantId=…`

***

## Globals

| API                               | Description                                    |
| --------------------------------- | ---------------------------------------------- |
| `Markt.init({ nonce? })`          | Bind `data-markt-*` buttons (MutationObserver) |
| `Markt.open({ items, theme, … })` | Open modal checkout                            |
| `Markt.close()`                   | Close modal                                    |

Alias: `MarktEmbed` === `Markt`.

***

## Data attributes

| Attribute                | Required    | Notes                       |
| ------------------------ | ----------- | --------------------------- |
| `data-markt-product-id`  | Yes         | Product CUID                |
| `data-markt-variant-id`  | If variants | Stable UUID                 |
| `data-markt-quantity`    | No          | Default `1`                 |
| `data-markt-theme`       | No          | `auto` \| `light` \| `dark` |
| `data-markt-return-url`  | No          | After paid                  |
| `data-markt-email`       | No          | Prefill                     |
| `data-markt-coupon-code` | No          | Coupon                      |
| `data-markt-metadata`    | No          | JSON string map             |

***

## Server API

`POST /api/embed/checkout` (CORS `*`)

```json theme={null}
{
  "productId": "…",
  "variantId": "…",
  "quantity": 1,
  "theme": "auto",
  "email": null,
  "couponCode": null,
  "returnUrl": null,
  "affiliateCode": null,
  "metadata": null
}
```

Response: `{ "orderId", "url" }` — `url` includes `?embed=1&theme=…`.

***

## Affiliates & CSP

* SDK reads `?ref=` then cookie `markt_affiliate`
* Merchant CSP needs `frame-src` / `script-src` for your Join Markt origin
* Checkout/embed allows `frame-ancestors *` for the modal iframe

Save the product once before shipping snippets so variant UUIDs stay stable.