Skip to main content

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)

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.
Where do I find my storeId and variantId? Go to the CRM dashboard → your store settings for the store ID, and Products → select a variant for the variant ID.

Full Copy-Paste Example

Drop this into any HTML page and it works:
<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

ParameterTypeDescription
baseApiUrlstringAlways https://app.tagadapay.com/api/public/v1/checkout/init (or .dev for testing)
storeIdstringYour TagadaPay store ID (e.g., store_019dd15cdb5b)
checkoutUrlstringThe URL of your hosted checkout page (e.g., https://secure.mystore.com/checkout)
itemsarrayArray of line items to add to the cart

Line Item Fields

FieldTypeRequiredDescription
variantIdstringYesProduct variant ID
priceIdstringNoSpecific price ID (for subscriptions or multi-price variants)
quantitynumberYesQuantity

Optional

ParameterTypeDescription
currencystringCurrency code (default: USD)
defaultItemobjectFallback line item used when items is empty

More Examples

Bundle (Multiple Items)

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

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)

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 }],
    });
  });
});
<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.
If you want to customize the helper or understand how it works, here’s the full annotated version:
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.

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

External Page Tracker

Add funnel analytics to your external pages

Funnel Orchestrator

Create multi-step checkout flows

Custom Domains

Set up a custom domain for your checkout

Plugin SDK

Build custom checkout experiences