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:
- CLI —
npx -p @tagadapay/node-sdk@latest tagada-init you@example.com - SDK —
Tagada.public().start(...)thenverify(...)(snippet here) - Web — app.tagada.io → Settings → Access Tokens
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
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.
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.Doing this from your own script instead of the CLI?
Doing this from your own script instead of the CLI?
Same flow, exposed as Full reference: Get an API key from code.
Tagada.public() in the Node SDK. Useful for AI agents, framework installers, or any tool that already has its own prompt loop:Install + run
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.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.envfor you. - SDK:
Tagada.public().start(...)thenverify(...)— programmatic, for AI agents or installers. - Web: app.tagada.io → Settings → Access Tokens — same key, two extra clicks.
- CLI:
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-initprovisions, 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.
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.setup.ts:
store_xxx ID it prints — you’ll paste it into the AI prompt next.
Return shapes:
processors.create()returns{ processor: { id, name, type, ... } }— destructure withconst { 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
Supported processor types
Supported processor types
TagadaPay is gateway-agnostic. Use the
All processors share optional fields:
type field when creating a processor:| Type | Provider | Key Options |
|---|---|---|
stripe | Stripe | secretKey, publicKey — or use Stripe Connect OAuth |
adyen | Adyen | apiKey, merchantAccount, hmacKey, liveEndpointPrefix |
checkout | Checkout.com | apiKey — or clientId + clientSecret (OAuth) |
nmi | NMI | apiKey or username + password |
authorizenet | Authorize.Net | apiLoginId, transactionKey, clientKey |
airwallex | Airwallex | clientId, clientSecret, clientApiKey |
ngenius | N-Genius (Network International) | apiKey, outlet, apiUrl |
ccavenue | CCAvenue | accessCode, workingKey |
finix | Finix | apiKey, username, password |
tap | Tap Payments | secretKey |
mastercard | Mastercard Gateway | merchantId, apiKey, gatewayUrl |
efipayments | EFI Payments | apiKey |
ovri | Ovri | websiteKey, secretKeyPos, apiKey |
sandbox | TagadaPay Sandbox | (none — use for testing) |
enable3DS, testMode, descriptor, merchantName, merchantUrl, merchantCountryCode.Payment flow fields reference
Payment flow fields reference
| Field | Type | Description |
|---|---|---|
name | string | Human-readable flow name |
strategy | 'simple' | 'cascade' | simple = single processor, cascade = try next on failure |
fallbackMode | boolean | Enable fallback when primary fails |
maxFallbackRetries | number | Max retry attempts (0 = no retries) |
threeDsEnabled | boolean | Enable 3D Secure authentication |
stickyProcessorEnabled | boolean | Route returning customers to same processor |
pickProcessorStrategy | 'weighted' | 'lowestCapacity' | 'automatic' | How to pick among multiple processors |
processorConfigs | array | Processors: { processorId, weight, disabled, nonStickable } |
fallbackProcessorConfigs | array | Fallback order: { processorId, orderIndex } |
Why no funnel here? (vs. Tagada Studio)
Why no funnel here? (vs. Tagada Studio)
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/purchaseevents yourself. - Use the standalone
external-trackerfrom 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 thestore_xxx ID from Step 1.
Click to copy the prompt
Click to copy the prompt
Loading products
Creating a checkout session
Customer + address + shipping + promo
Payment (tokenize + pay, 3DS handled automatically)
Post-purchase upsells
Step 3 — Deploy
Your storefront is just static files. Pick the host that matches your stack.- TagadaPay (recommended for SPAs)
- Vercel
- Netlify
- Cloudflare Pages
Free, edge-CDN, custom domain, A/B testing — all included with your account.Full setup is in Hosting your store below.
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.| Event | Email sent | Configurable? |
|---|---|---|
| Order paid | Order confirmation with receipt | Yes — template, sender domain |
| Subscription rebill | Recurring payment receipt | Yes |
| Subscription canceled | Cancellation confirmation | Yes |
| Payment refunded | Refund notification | Yes |
| Subscription past due | Failed payment alert | Yes |
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 firesPageView, 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.Architecture summary
Why this beats Shopify / WooCommerce
| Shopify | WooCommerce | AI + TagadaPay | |
|---|---|---|---|
| Monthly fee | 399 / mo | Hosting + plugins | $0 (pay per transaction) |
| Storefront tech | Liquid templates | PHP themes | Any framework, any AI tool |
| Customization | Limited by theme | Plugin conflicts | Unlimited — you own the code |
| Payment routing | Shopify Payments only | WooCommerce Payments | Multi-PSP · fallback · load balancing |
| Upsells | $50 / mo app | Plugin | Built-in |
| Emails | Basic | Plugin | Built-in, customizable templates |
| Pixel tracking | Basic | Plugin | Auto-injects Meta · TikTok · GA4 · GTM |
| Subscriptions | $39+/mo app | Plugin | Built-in (dunning, customer portal) |
| Lock-in | High | Medium | Zero — 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.Option A — Deploy on TagadaPay (recommended for SPAs)
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:
Run it
https://my-store--{storeId}.cdn.tagadapay.com/.
What deployDirectory() does under the hood:
- Scans your build directory recursively
- Detects MIME types for 20+ file extensions (HTML, JS, CSS, images, fonts, etc.)
- Base64-encodes and uploads all files
- Creates a live instance for your store
- 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.A/B testing
Deploy two versions and split traffic between them:Advanced: lower-level deploy methods
For full control, use the individual methods directly: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:| Platform | Best for | Deploy command |
|---|---|---|
| Vercel | Next.js, SvelteKit | vercel --prod |
| Netlify | Astro, static sites | netlify deploy --prod |
| Cloudflare Pages | Any framework | wrangler pages deploy dist/ |
Option C — Fly.io, Railway, or Docker
For apps that need a Node.js backend (webhooks, database, background jobs):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
Can I use this with Next.js / Astro / Remix / SvelteKit?
Can I use this with Next.js / Astro / Remix / SvelteKit?
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.Do I need a server?
Do I need a server?
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.
Is card data safe?
Is card data safe?
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.Can I use Lovable to generate the entire store?
Can I use Lovable to generate the entire store?
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.
How do subscriptions work?
How do subscriptions work?
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.Can I process test payments?
Can I process test payments?
Yes. Use a sandbox processor or Stripe test mode. Test card:
4242 4242 4242 4242, any future expiry, any CVC.What does TagadaPay actually cost?
What does TagadaPay actually cost?
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.
