Skip to main content

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.

Build a real store in 15 minutes — no Shopify, no WooCommerce.

The Shopify era is over. When your storefront and your payments both live on someone else’s platform, you’re one policy change away from losing the shop overnight — the only way to stay in business is to keep the monopoly on your code and the flexibility on your payments. That’s exactly what Tagada gives you: a ready-made CRM, a payment orchestrator that plugs into your own PSPs or routes through TagadaPay (every vertical welcome — low-risk and high-risk, no judgment), and a Headless SDK that Claude or Lovable can wire into an AI-generated storefront in minutes. The breakthrough: even if you’ve never shipped a line of code, you can now ship a real, fully-owned store in an afternoon. That’s what this tutorial is for.
You bring an AI coding tool (Claude, Lovable, v0). It writes your storefront UI. TagadaPay is the headless backend — payments, emails, subscriptions, upsells, and pixel tracking all included.

Create your account from the terminal

npx -p @tagadapay/node-sdk tagada-init you@example.com — verify with a 6-digit code, get an API key in 30 seconds. No browser.

See the live demo

Real React store, real test payments, real upsells.
Three ways to get an API key, same outcome:
  • CLInpx -p @tagadapay/node-sdk@latest tagada-init you@example.com
  • SDKTagada.public().start(...) then verify(...) (snippet here)
  • Webapp.tagada.io → Settings → Access Tokens
Full walkthrough on Get an API key from code.
Time to first sale: ~15 minutes. Seriously. You go from zero to a live store with real payments. The AI writes the UI, you paste a few SDK calls, TagadaPay does the rest.

What you’ll build

A complete commerce flow — every page below is generated by the AI from one prompt:

Product page

Browse products from your Tagada catalog

Cart

Add, remove, change quantity, see totals

Checkout

Customer info · shipping · promo codes · Google address autocomplete

Payment

Card payments, PCI-safe tokenization, 3DS handled

Thank you + upsells

One-click upsells on the same card

Subscriptions & rebills

Recurring billing, dunning, customer portal
No backend to write. TagadaPay is the backend.

Fastest path — clone & ship (3 commands)

If you just want to see it work, this is the shortest road. No browser, no CRM tab, no copy-pasting API keys — one CLI command provisions a fresh Tagada account, writes your .env, and seeds a demo store. You’ll be on localhost:5173 in under a minute.
1

Provision a fresh Tagada account from your terminal

tagada-init mails you a 6-digit code, verifies it, creates a free sandbox account, provisions a demo-seeded store (sandbox processor + payment flow + 2 demo products — an Essential Tee in 3 colorways and an Essential Cap — a checkout upsell, a default shipping rate, and a checkout funnel), and writes TAGADA_API_KEY / TAGADA_STORE_ID / TAGADA_ACCOUNT_ID to .env in the current directory.
Want a richer 6-product apparel catalog instead of the 2-product default? After tagada-init, run pnpm seed $TAGADA_API_KEY — the example ships with a scripts/seed.ts that overwrites the demo with a fuller storefront. Skip it if the default is enough.
git clone https://github.com/TagadaPay/examples.git
cd examples/headless-react-store
npx -p @tagadapay/node-sdk@latest tagada-init you@example.com
Paste the code from your inbox when prompted. That’s it — no signup form, no dashboard navigation.
Same flow, exposed as Tagada.public() in the Node SDK. Useful for AI agents, framework installers, or any tool that already has its own prompt loop:
import Tagada from '@tagadapay/node-sdk';

const onboarding = Tagada.public();

await onboarding.start({ email: 'you@example.com' });

const { apiKey, storeId, accountId } = await onboarding.verify({
  email: 'you@example.com',
  code: '123456', // however you collected it
});

const tagada = new Tagada(apiKey); // ready to use immediately
Full reference: Get an API key from code.
2

Install + run

pnpm install
pnpm dev
Open http://localhost:5173 → buy something with 4242 4242 4242 4242. Done.The demo products, payment flow, and funnel seed asynchronously (~30s) — your store is already usable, the catalog will populate as you watch.
Prefer the web flow? Head to app.tagada.io, copy your API key from Settings → Access Tokens, then run pnpm seed <your-key> instead of tagada-init. Same outcome, two extra clicks.
Two examples, two purposes:
  • headless-react-store (above) — a fork-ready storefront. Hand it to a designer or paste it into Claude and iterate. Start here if you want to ship.
  • headless-react — an interactive playground that explains every Headless SDK hook with side-by-side code panels. Read this if you want to learn the SDK before forking.
Want to do it from scratch instead? Keep reading — the rest of this page walks through the same flow manually so an AI can generate it for you.

Prerequisites

  • Node.js 18+
  • An AI coding tool: Claude, Lovable, v0, or any IDE with AI
  • A free Tagada account — three ways to get one in ~30 seconds, all detailed on Get an API key from code:
    • CLI: npx -p @tagadapay/node-sdk@latest tagada-init you@example.com — interactive, writes .env for you.
    • SDK: Tagada.public().start(...) then verify(...) — programmatic, for AI agents or installers.
    • Web: app.tagada.io → Settings → Access Tokens — same key, two extra clicks.
    No credit card required.
Tagada vs. TagadaPay vs. Hub — three things, one ecosystem:
  • Tagada (app.tagada.io) is the CRM — your account, your stores, your products, your API keys, your orchestrator. This is what tagada-init provisions, and what every code sample in this tutorial assumes you have. Free, instant, no credit card.
  • TagadaPay is the payment processor — one of many PSPs you can plug into your Tagada account (alongside Stripe, Adyen, Checkout.com, …). Becoming a TagadaPay-processed merchant requires KYB, applied for separately at hub.tagada.io.
  • Hub (hub.tagada.io) is the TagadaPay application form. KYB review, ~24h. Optional — you can ship a fully-working store with just your Tagada CRM account + your own Stripe keys.
You can ship a fully-working store with just Tagada (CRM) + your own Stripe. TagadaPay (the processor) is optional and orthogonal.

Step 1 — Create your store with the Node SDK

This single script provisions everything you need for a headless storefront: processor, payment flow, store, and products. Routing (checkout → thank-you) lives in your React app, so there’s nothing else to register server-side.
mkdir my-store && cd my-store
npm init -y
npm install @tagadapay/node-sdk @tagadapay/headless-sdk
Create setup.ts:
import Tagada from '@tagadapay/node-sdk';

const tagada = new Tagada(process.env.TAGADA_API_KEY!);

// 1. Processor — connect Stripe (or use 'sandbox' for testing).
const { processor } = await tagada.processors.create({
  processor: {
    name: 'Stripe',
    type: 'stripe',
    enabled: true,
    supportedCurrencies: ['USD', 'EUR'],
    baseCurrency: 'USD',
    options: {
      secretKey: 'sk_test_...',
      publicKey: 'pk_test_...',
    },
  },
});

// 2. Payment flow — route transactions through that processor.
const flow = await tagada.paymentFlows.create({
  data: {
    name: 'Main Flow',
    strategy: 'simple',
    fallbackMode: false,
    maxFallbackRetries: 0,
    threeDsEnabled: false,
    stickyProcessorEnabled: false,
    pickProcessorStrategy: 'weighted',
    fallbackProcessorConfigs: [],
    processorConfigs: [
      { processorId: processor.id, weight: 100, disabled: false, nonStickable: false },
    ],
  },
});

// 3. Store
const store = await tagada.stores.create({
  name: 'My AI-Built Store',
  baseCurrency: 'USD',
  presentmentCurrencies: ['USD', 'EUR'],
  chargeCurrencies: ['USD'],
  selectedPaymentFlowId: flow.id,
});

// 4. Product
const tshirt = await tagada.products.create({
  storeId: store.id,
  name: 'Premium T-Shirt',
  description: 'Organic cotton, available in 3 colors',
  active: true,
  variants: [{
    name: 'Black / M',
    sku: 'tshirt-black-m',
    grams: 200,
    active: true,
    default: true,
    imageUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=600&h=600&fit=crop',
    price: 3900,
    compareAtPrice: 4900,
    prices: [{
      currencyOptions: { USD: { amount: 3900 }, EUR: { amount: 3500 } },
      recurring: false,
      billingTiming: 'in_advance',
      default: true,
    }],
  }],
});

// That's it — no funnel needed. In a headless store your React app
// owns the routing (cart → checkout → thank-you), so the Tagada
// `funnels` resource (which exists for the no-code Studio runtime) is
// not required. The Headless SDK never reads it. See the
// "Why no funnel here?" accordion below if you're wondering when
// you would want one.

console.log(`Store ready: ${store.id}`);
Run it:
npx tsx setup.ts
Copy the store_xxx ID it prints — you’ll paste it into the AI prompt next.
Return shapes:
  • processors.create() returns { processor: { id, name, type, ... } } — destructure with const { processor } = await ...
  • paymentFlows.create() returns a flat flow object: { id, name, strategy, ... }
  • stores.create() returns a flat store object: { id, name, baseCurrency, ... }
  • products.create() returns { id, variants: [{ id, name, prices: [{ id }] }] } — a summary, not the full product
TagadaPay is gateway-agnostic. Use the type field when creating a processor:
TypeProviderKey Options
stripeStripesecretKey, publicKey — or use Stripe Connect OAuth
adyenAdyenapiKey, merchantAccount, hmacKey, liveEndpointPrefix
checkoutCheckout.comapiKey — or clientId + clientSecret (OAuth)
nmiNMIapiKey or username + password
authorizenetAuthorize.NetapiLoginId, transactionKey, clientKey
airwallexAirwallexclientId, clientSecret, clientApiKey
ngeniusN-Genius (Network International)apiKey, outlet, apiUrl
ccavenueCCAvenueaccessCode, workingKey
finixFinixapiKey, username, password
tapTap PaymentssecretKey
mastercardMastercard GatewaymerchantId, apiKey, gatewayUrl
efipaymentsEFI PaymentsapiKey
ovriOvriwebsiteKey, secretKeyPos, apiKey
sandboxTagadaPay Sandbox(none — use for testing)
All processors share optional fields: enable3DS, testMode, descriptor, merchantName, merchantUrl, merchantCountryCode.
FieldTypeDescription
namestringHuman-readable flow name
strategy'simple' | 'cascade'simple = single processor, cascade = try next on failure
fallbackModebooleanEnable fallback when primary fails
maxFallbackRetriesnumberMax retry attempts (0 = no retries)
threeDsEnabledbooleanEnable 3D Secure authentication
stickyProcessorEnabledbooleanRoute returning customers to same processor
pickProcessorStrategy'weighted' | 'lowestCapacity' | 'automatic'How to pick among multiple processors
processorConfigsarrayProcessors: { processorId, weight, disabled, nonStickable }
fallbackProcessorConfigsarrayFallback order: { processorId, orderIndex }
If you’ve used Tagada Studio (the no-code page builder), you’ll have noticed it asks you to create a funnel with nodes for checkout, thankyou, offer, etc. That’s a Studio-only construct — it tells the Studio runtime which page to render at which path, and how to chain steps for built-in funnel attribution.In a headless setup, your React/Next/Astro app owns the routing. There is no Studio runtime to drive, no URL-to-step mapping to declare. The Headless SDK’s useCheckout, usePayment, useOffers hit the API directly with storeId + tokens — they never read a funnel record.Don’t create a funnel for a headless store. It’s dead code that adds confusion.If you later want pixel tracking (Meta, Google Ads, TikTok…) or multi-page funnel attribution that survives across domains, you have two options:
  • Add pixel snippets directly in your React app and fire view_content / add_to_cart / purchase events yourself.
  • Use the standalone external-tracker from the Plugin SDK — it does require a funnel + step IDs, by design, since it’s built for hybrid Studio-hosted setups.

Step 2 — Generate the storefront with AI

Paste this prompt into Claude, Lovable, or your AI tool. Replace the placeholder with the store_xxx ID from Step 1.
Build me a modern e-commerce store using React + Tailwind CSS.

The store uses @tagadapay/headless-sdk for ALL backend operations
(catalog, checkout, payment, upsells) — no custom API needed.

Architecture:
- Wrap the app in <TagadaHeadlessProvider storeId="STORE_ID" environment="production">
- Use these hooks from '@tagadapay/headless-sdk/react':
  • useCatalog()                       — load products
  • useCheckout(checkoutToken, sessionToken) — manage checkout session
  • usePayment()                       — tokenize cards and process payments
  • useOffers()                        — load and accept upsell offers
  • useGoogleAutocomplete({ apiKey })  — address autocomplete

Pages to build:
1. Product listing — grid of products from useCatalog()
2. Cart — line items, quantities, totals
3. Checkout — email, name, address (Google autocomplete), shipping, promo
4. Payment — card form (number, expiry, cvc), tokenize then pay
5. Thank-you — order confirmation + upsell offers from useOffers()

Style: dark theme, clean, minimal, mobile-first. Use shadcn/ui-like patterns.
Store ID: STORE_ID_FROM_STEP_1
The AI generates a working storefront. Below are the exact SDK calls it needs — paste these into the conversation if your AI gets confused.

Loading products

import { useCatalog } from '@tagadapay/headless-sdk/react';

function ProductPage() {
  const { products, isLoading, loadProducts } = useCatalog();

  useEffect(() => { loadProducts(); }, [loadProducts]);

  return products.map(product => (
    <ProductCard key={product.id} product={product} />
  ));
}

Creating a checkout session

import { useHeadlessClient } from '@tagadapay/headless-sdk/react';

const client = useHeadlessClient();

const { checkoutToken, sessionToken } = await client.checkout.createSession({
  items: cart.map(item => ({
    variantId: item.variantId,
    quantity: item.quantity,
  })),
  currency: 'USD',
});

Customer + address + shipping + promo

import { useCheckout } from '@tagadapay/headless-sdk/react';

const { session, updateCustomer, updateAddress, getShippingRates, applyPromo } =
  useCheckout(checkoutToken, sessionToken);

await updateCustomer({ email, firstName, lastName });
await updateAddress({ shippingAddress: { line1, city, state, postalCode, country } });
const rates = await getShippingRates();
await applyPromo('WELCOME10');

Payment (tokenize + pay, 3DS handled automatically)

import { usePayment } from '@tagadapay/headless-sdk/react';

const { tokenizeCard, processPayment, isProcessing, loadPaymentSetup } = usePayment({
  onPaymentSuccess: (result) => router.push(`/thank-you?orderId=${result.order?.id}`),
  onPaymentFailed: (result) => toast.error(result.error),
});

useEffect(() => {
  if (session?.id) loadPaymentSetup(session.id);
}, [session?.id]);

const { tagadaToken } = await tokenizeCard({
  cardNumber: '4242424242424242',
  expiryDate: '12/28',
  cvc: '123',
  cardholderName: 'Jane Doe',
});

const result = await processPayment({
  checkoutSessionId: session.id,
  tagadaToken,
});

switch (result.status) {
  case 'succeeded':
    router.push(`/thank-you?orderId=${result.order?.id}`);
    break;
  case 'requires_redirect':
    // usePayment handles this automatically (redirects + resumes on return)
    break;
  case 'failed':
    toast.error(result.error);
    break;
}

Post-purchase upsells

import { useOffers } from '@tagadapay/headless-sdk/react';

const { listOffers, previewOffer, payPreviewedOffer } = useOffers();

const offers = await listOffers({ type: 'upsell' });

await previewOffer({ offerId: offers[0].id });
await payPreviewedOffer({
  offerId: offers[0].id,
  mainOrderId: paymentId,
});

Step 3 — Deploy

Your storefront is just static files. Pick the host that matches your stack. No server to maintain. No database. TagadaPay handles everything.

Step 4 — Email flows (zero config)

TagadaPay sends transactional emails automatically when events happen. Set up a custom sender domain in the dashboard for branded emails.
EventEmail sentConfigurable?
Order paidOrder confirmation with receiptYes — template, sender domain
Subscription rebillRecurring payment receiptYes
Subscription canceledCancellation confirmationYes
Payment refundedRefund notificationYes
Subscription past dueFailed payment alertYes
To brand your emails: open the dashboard, go to Settings → Emails → Custom Domain → Add your-store.com, then add the SPF / DKIM / DMARC records it shows you. See the Emails guide for editing templates programmatically.

Step 5 — Pixel tracking (zero config)

TagadaPay handles client-side pixel tracking for ad attribution and retargeting. Configure pixels in the dashboard once — TagadaPay injects the scripts and fires PageView, AddToCart, InitiateCheckout, Purchase to all active pixels at the right moments. No code changes in your storefront. Setup: open the dashboard → Settings → Integrations → Add pixel → Meta / TikTok / Google / Snapchat / Pinterest. The Google slot accepts GTM (GTM-…), GA4 (G-…), or Google Ads (AW-…) IDs and auto-detects the type from the prefix. See the Pixels guide for the full event mapping reference.

Step 6 — Webhooks (optional)

Listen to payment events on your backend to trigger custom logic — fulfillment, Slack notifications, ERP sync, etc.
import Tagada from '@tagadapay/node-sdk';

const tagada = new Tagada(process.env.TAGADA_API_KEY!);

await tagada.webhooks.create({
  storeId: 'store_xxx',
  url: 'https://my-store.com/api/webhooks/tagada',
  eventTypes: ['order/paid', 'subscription/created', 'order/refunded'],
});
Handle incoming events:
// api/webhooks/tagada.ts (Next.js example)
export async function POST(req: Request) {
  const event = await req.json();

  switch (event.topic) {
    case 'order/paid':
      console.log('New order:', event.data.orderId);
      break;
    case 'subscription/created':
      console.log('New subscriber:', event.data.customerId);
      break;
  }

  return new Response('OK');
}

Architecture summary


Why this beats Shopify / WooCommerce

ShopifyWooCommerceAI + TagadaPay
Monthly fee3939 – 399 / moHosting + plugins$0 (pay per transaction)
Storefront techLiquid templatesPHP themesAny framework, any AI tool
CustomizationLimited by themePlugin conflictsUnlimited — you own the code
Payment routingShopify Payments onlyWooCommerce PaymentsMulti-PSP · fallback · load balancing
Upsells$50 / mo appPluginBuilt-in
EmailsBasicPluginBuilt-in, customizable templates
Pixel trackingBasicPluginAuto-injects Meta · TikTok · GA4 · GTM
Subscriptions$39+/mo appPluginBuilt-in (dunning, customer portal)
Lock-inHighMediumZero — it’s your code

Ready? Run it from your terminal

npx -p @tagadapay/node-sdk tagada-init you@example.com — sandbox account + API key + seeded store in 30 seconds.

Or sign up the classic way

Web signup, copy your API key, ship in 15 minutes.

Hosting your store

Once your storefront is built, you need somewhere to host it. If your store is a client-side SPA (React, Vue, Svelte, plain HTML), deploy it directly on TagadaPay’s global edge CDN with a single script. No infrastructure to set up, no billing — included with your account. You get:
  • Global edge CDN (~10 ms TTFB)
  • Custom domain with automatic TLS
  • Built-in A/B testing (weighted or geo-based) on the same URL
  • Zero bandwidth bills

Deploy with the Node SDK

The @tagadapay/node-sdk ships a one-call deploy helper. Add this as scripts/deploy.ts:
import Tagada from '@tagadapay/node-sdk';

const tagada = new Tagada(process.env.TAGADA_API_KEY!);

const result = await tagada.plugins.deployDirectory({
  directory: './dist',
  storeId: 'store_xxx',
  name: 'my-store',
});

console.log(`Live at: ${result.url}`);
// https://my-store--store_xxx.cdn.tagadapay.com/

Run it

npm run build
TAGADA_API_KEY=your-api-key npx tsx scripts/deploy.ts
That’s it — one SDK call, store live on https://my-store--{storeId}.cdn.tagadapay.com/. What deployDirectory() does under the hood:
  1. Scans your build directory recursively
  2. Detects MIME types for 20+ file extensions (HTML, JS, CSS, images, fonts, etc.)
  3. Base64-encodes and uploads all files
  4. Creates a live instance for your store
  5. Mounts the instance to a CDN hostname
This is the exact flow used to deploy the headless-react-store and headless-react examples. Works for any SPA — React, Vue, Svelte, or plain HTML.
Updates? Just run the script again. New version goes live instantly — no downtime, no cache purge.

A/B testing

Deploy two versions and split traffic between them:
import Tagada from '@tagadapay/node-sdk';

const tagada = new Tagada(process.env.TAGADA_API_KEY!);
const storeId = 'store_xxx';

const versionA = await tagada.plugins.deployDirectory({
  directory: './dist-a',
  storeId,
  name: 'my-store-a',
});

const versionB = await tagada.plugins.deployDirectory({
  directory: './dist-b',
  storeId,
  name: 'my-store-b',
});

const mountPoints = await tagada.plugins.listMountPoints(storeId);
const routeId = mountPoints.mountPoints[0]?.id as string;

await tagada.plugins.configureSplit({
  routeId,
  storeId,
  splitConfig: {
    type: 'weighted',
    instances: [
      { instanceId: versionA.instanceId, deploymentId: versionA.deploymentId, weight: 50 },
      { instanceId: versionB.instanceId, deploymentId: versionB.deploymentId, weight: 50 },
    ],
  },
});

Advanced: lower-level deploy methods

For full control, use the individual methods directly:
const plugins = await tagada.plugins.list(storeId);
const instances = await tagada.plugins.listInstances(storeId);
const details = await tagada.plugins.retrieveDeployment(deploymentId);
await tagada.plugins.unmount({ deploymentId, storeId, hostname });
await tagada.plugins.del(pluginId, storeId);
deployDirectory() handles builds up to 50 MB automatically — small builds use inline base64, larger builds are zipped and uploaded to blob storage. For full control, use tagada.plugins.deploy() with zipUrl or inlineAssets directly.

Full Deploy & A/B Test guide

Custom domains, geo-based A/B testing, large file uploads, and more.

Option B — Vercel, Netlify, or Cloudflare Pages

If your app uses server-side rendering (Next.js, Astro, Remix, SvelteKit), deploy to a platform that supports your framework:
PlatformBest forDeploy command
VercelNext.js, SvelteKitvercel --prod
NetlifyAstro, static sitesnetlify deploy --prod
Cloudflare PagesAny frameworkwrangler pages deploy dist/

Option C — Fly.io, Railway, or Docker

For apps that need a Node.js backend (webhooks, database, background jobs):
fly launch && fly deploy
Which should I pick?
  • Static SPA (React, Vue, Svelte)? → TagadaPay hosting (simplest, free, built-in A/B testing)
  • Next.js / SSR? → Vercel or Netlify
  • Custom backend + webhooks? → Fly.io or Railway

Resources

Storefront template (fork-ready)

A real-looking boutique with localStorage cart and a pro checkout. Rebrand it in a day.

SDK playground (learn-by-doing)

Every Headless SDK hook explained with side-by-side code panels.

Live demo

Try the playground in the browser — browse, checkout, pay with test cards.

Node SDK

Server-side automation — create stores, products, webhooks, and more.

API reference

Full REST API documentation with request/response examples.

FAQ

Yes. The Headless SDK is framework-agnostic. The React hooks (useCheckout, usePayment, etc.) work in any React app. For non-React frameworks, use the vanilla createHeadlessClient() API.
Not for the checkout flow. The Headless SDK handles everything client-side (including PCI-safe card tokenization). You only need a server if you want webhooks or custom automation — use the Node SDK for that.
Yes. Card numbers are tokenized by @tagadapay/core-js before they reach your code. Your store never sees or stores raw card data. TagadaPay is PCI DSS Level 1 compliant.
Yes. Give Lovable the prompt from Step 2 and it will generate a working storefront. You’ll just need to paste your Store ID and deploy.
Create a product with a recurring price (interval: 'month'). The Headless SDK handles the initial charge. TagadaPay automatically rebills, retries failed charges (dunning), and sends email receipts on each cycle. Manage subscriptions from the CRM dashboard or the Node SDK.
Yes. Use a sandbox processor or Stripe test mode. Test card: 4242 4242 4242 4242, any future expiry, any CVC.
Per-transaction pricing — no monthly fees. See tagadapay.com/pricing for current rates and check the rate displayed on your account dashboard.

Start building — terminal flow

npx -p @tagadapay/node-sdk tagada-init you@example.com — verify your email, get a sandbox account + API key + seeded store, all without leaving your terminal.

Or use the web signup

Sign up at app.tagada.io, copy your API key from Settings → Access Tokens. Same outcome, no credit card required.