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

# Trigger a Checkout from Your Website

> Redirect customers from any website to your TagadaPay checkout with a simple JavaScript call

# Trigger a Checkout from Your Website

Send customers from **any website, landing page, or app** to your TagadaPay-hosted checkout page. No server, no API key, no authentication.

```
Customer clicks "Buy Now" → TagadaPay creates a session → Customer lands on your checkout
```

***

## How It Works (3 lines)

```javascript theme={null}
const url = createCheckoutUrl({
  baseApiUrl: 'https://app.tagadapay.com/api/public/v1/checkout/init',
  checkoutUrl: 'https://secure.mystore.com/checkout',
  storeId: 'store_abc123',
  items: [{ variantId: 'variant_main_product', quantity: 1 }],
});

window.location.href = url;
```

That's it. The customer is redirected to TagadaPay, a checkout session is created with the product in the cart, and the customer lands on your checkout page.

<Info>
  **Where do I find my `storeId` and `variantId`?** Go to the [CRM dashboard](https://app.tagadapay.com) → your store settings for the store ID, and Products → select a variant for the variant ID.
</Info>

***

## Full Copy-Paste Example

Drop this into any HTML page and it works:

```html theme={null}
<button id="buy-now">Buy Now — $29.99</button>

<script>
function createCheckoutUrl({ baseApiUrl, checkoutUrl, storeId, currency = 'USD', items = [], defaultItem = null }) {
  const lineItems = items.length > 0 ? items : defaultItem ? [defaultItem] : [];
  if (!lineItems.length) throw new Error('At least one item is required');
  const params = new URLSearchParams({ storeId, currency, checkoutUrl, items: JSON.stringify(lineItems) });
  return baseApiUrl + '?' + params.toString();
}

document.getElementById('buy-now').addEventListener('click', function () {
  window.location.href = createCheckoutUrl({
    baseApiUrl: 'https://app.tagadapay.com/api/public/v1/checkout/init',
    checkoutUrl: 'https://secure.mystore.com/checkout',  // your checkout page URL
    storeId: 'store_abc123',                              // your store ID
    items: [
      { variantId: 'variant_main_product', quantity: 1 },
    ],
  });
});
</script>
```

Replace `store_abc123`, `variant_main_product`, and the `checkoutUrl` with your real values.

***

## Parameters

### Required

| Parameter     | Type     | Description                                                                            |
| ------------- | -------- | -------------------------------------------------------------------------------------- |
| `baseApiUrl`  | `string` | Always `https://app.tagadapay.com/api/public/v1/checkout/init` (or `.dev` for testing) |
| `storeId`     | `string` | Your TagadaPay store ID (e.g., `store_019dd15cdb5b`)                                   |
| `checkoutUrl` | `string` | The URL of your hosted checkout page (e.g., `https://secure.mystore.com/checkout`)     |
| `items`       | `array`  | Array of line items to add to the cart                                                 |

### Line Item Fields

| Field       | Type     | Required | Description                                                   |
| ----------- | -------- | -------- | ------------------------------------------------------------- |
| `variantId` | `string` | Yes      | Product variant ID                                            |
| `priceId`   | `string` | No       | Specific price ID (for subscriptions or multi-price variants) |
| `quantity`  | `number` | Yes      | Quantity                                                      |

### Optional

| Parameter     | Type     | Description                                   |
| ------------- | -------- | --------------------------------------------- |
| `currency`    | `string` | Currency code (default: `USD`)                |
| `defaultItem` | `object` | Fallback line item used when `items` is empty |

***

## More Examples

### Bundle (Multiple Items)

```javascript theme={null}
const url = createCheckoutUrl({
  baseApiUrl: 'https://app.tagadapay.com/api/public/v1/checkout/init',
  checkoutUrl: 'https://secure.mystore.com/checkout',
  storeId: 'store_abc123',
  items: [
    { variantId: 'variant_product_a', quantity: 2 },
    { variantId: 'variant_product_b', quantity: 1 },
  ],
});
```

### Subscription

```javascript theme={null}
const url = createCheckoutUrl({
  baseApiUrl: 'https://app.tagadapay.com/api/public/v1/checkout/init',
  checkoutUrl: 'https://secure.mystore.com/checkout',
  storeId: 'store_abc123',
  items: [
    { variantId: 'variant_subscription', priceId: 'price_monthly_plan', quantity: 1 },
  ],
});
```

### Dynamic Product (e.g., from a product page)

```javascript theme={null}
document.querySelectorAll('[data-variant-id]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    window.location.href = createCheckoutUrl({
      baseApiUrl: 'https://app.tagadapay.com/api/public/v1/checkout/init',
      checkoutUrl: 'https://secure.mystore.com/checkout',
      storeId: 'store_abc123',
      items: [{ variantId: btn.dataset.variantId, quantity: 1 }],
    });
  });
});
```

```html theme={null}
<button data-variant-id="variant_size_s">Buy Small</button>
<button data-variant-id="variant_size_m">Buy Medium</button>
<button data-variant-id="variant_size_l">Buy Large</button>
```

***

## What Happens Behind the Scenes

1. The customer clicks your button
2. The browser navigates to `https://app.tagadapay.com/api/public/v1/checkout/init?storeId=...&items=...&checkoutUrl=...`
3. TagadaPay creates a checkout session with the items in the cart
4. TagadaPay redirects the customer to your `checkoutUrl` with a `checkoutToken` query parameter
5. Your checkout page loads and the Plugin SDK picks up the token automatically

The entire flow is a single HTTP redirect — no AJAX, no CORS, no server-side code.

***

<Accordion title="Helper Function Source Code">
  If you want to customize the helper or understand how it works, here's the full annotated version:

  ```javascript theme={null}
  function createCheckoutUrl({
    baseApiUrl,
    checkoutUrl,
    storeId,
    currency = 'USD',
    items = [],
    defaultItem = null,
    log = false,
  } = {}) {
    if (!baseApiUrl) throw new Error('baseApiUrl is required');
    if (!storeId) throw new Error('storeId is required');
    if (!checkoutUrl) throw new Error('checkoutUrl is required');

    const lineItems =
      items.length > 0
        ? items
        : defaultItem
          ? [defaultItem]
          : [];

    if (lineItems.length === 0) {
      throw new Error('At least one line item is required');
    }

    const params = new URLSearchParams({
      storeId,
      currency,
      checkoutUrl,
      items: JSON.stringify(lineItems),
    });

    const url = `${baseApiUrl}?${params.toString()}`;

    if (log) {
      console.info('Checkout URL:', url);
    }

    return url;
  }
  ```

  This is a pure client-side function. It builds a URL string — no network requests, no dependencies. You can inline it, bundle it, or rewrite it in any language.
</Accordion>

***

## No-Code Alternative

You can also generate direct links from the **CRM dashboard** without writing any code. Go to **Storefront → Direct Links**, select your products, and copy the URL.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="External Page Tracker" icon="radar" href="/developer-tools/web-integration/external-page-tracker">
    Add funnel analytics to your external pages
  </Card>

  <Card title="Funnel Orchestrator" icon="diagram-project" href="/developer-tools/funnels/funnel-orchestrator">
    Create multi-step checkout flows
  </Card>

  <Card title="Custom Domains" icon="globe" href="https://help.tagada.io/custom-domains">
    Set up a custom domain for your checkout
  </Card>

  <Card title="Plugin SDK" icon="puzzle-piece" href="/developer-tools/sdk/introduction">
    Build custom checkout experiences
  </Card>
</CardGroup>