> ## 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 Store with AI + TagadaPay > Use Claude, Lovable, or v0 to generate your storefront — TagadaPay handles payments, emails, and pixel tracking # 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. `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. 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(...)` then `verify(...)` ([snippet here](/developer-tools/node-sdk/get-api-key#path-2--the-sdk-programmatic)) * **Web** — [app.tagada.io](https://app.tagada.io/sign-up?source=tagadapay-docs-ai-store) → Settings → Access Tokens Full walkthrough on [Get an API key from code](/developer-tools/node-sdk/get-api-key). ```mermaid theme={null} flowchart LR AI["AI coding tool
Claude · Lovable · v0"] --> UI["Your storefront
React · Next.js · Astro · plain HTML"] UI -->|"@tagadapay/headless-sdk"| TGD["TagadaPay
headless backend"] TGD --> Pay["Payments
Stripe · Adyen · 12+ PSPs"] TGD --> Mail["Emails
order · rebill · refund"] TGD --> Pix["Pixels
Meta · TikTok · GA4 · GTM"] TGD --> Sub["Subscriptions
upsells · CRM"] classDef primary fill:#16A34A,stroke:#15803D,color:#fff,font-weight:600; classDef plain fill:#F8FAFC,stroke:#CBD5E1,color:#0F172A; class TGD primary; class AI,UI,Pay,Mail,Pix,Sub plain; ``` **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: Browse products from your Tagada catalog Add, remove, change quantity, see totals Customer info · shipping · promo codes · Google address autocomplete Card payments, PCI-safe tokenization, 3DS handled One-click upsells on the same card 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. `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. ```bash theme={null} 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: ```ts theme={null} 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](/developer-tools/node-sdk/get-api-key). ```bash theme={null} pnpm install pnpm dev ``` Open [http://localhost:5173](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](https://app.tagada.io/sign-up?source=tagadapay-docs-ai-store), copy your API key from Settings → Access Tokens, then run `pnpm seed ` instead of `tagada-init`. Same outcome, two extra clicks. **Two examples, two purposes:** * **[`headless-react-store`](https://github.com/TagadaPay/examples/tree/main/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`](https://github.com/TagadaPay/examples/tree/main/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](https://nodejs.org/) 18+ * An AI coding tool: [Claude](https://claude.ai), [Lovable](https://lovable.dev), [v0](https://v0.dev), 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](/developer-tools/node-sdk/get-api-key): * **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](https://app.tagada.io/sign-up?source=tagadapay-docs-ai-store) → 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](https://app.tagada.io/sign-up?source=tagadapay-docs-ai-store)) 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](https://hub.tagada.io/sign-up?source=tagadapay-docs-ai-store). * **Hub** ([hub.tagada.io](https://hub.tagada.io/sign-up?source=tagadapay-docs-ai-store)) 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. ```bash theme={null} mkdir my-store && cd my-store npm init -y npm install @tagadapay/node-sdk @tagadapay/headless-sdk ``` Create `setup.ts`: ```typescript theme={null} 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: ```bash theme={null} 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: | Type | Provider | Key Options | | -------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | `stripe` | Stripe | `secretKey`, `publicKey` — or use [Stripe Connect OAuth](/developer-tools/node-sdk/multi-stripe-routing#stripe-connect-via-api) | | `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) | All processors share optional fields: `enable3DS`, `testMode`, `descriptor`, `merchantName`, `merchantUrl`, `merchantCountryCode`. | 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 }` | 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`](https://www.npmjs.com/package/@tagadapay/plugin-sdk) 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. ```text theme={null} 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 - 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 ```tsx theme={null} import { useCatalog } from '@tagadapay/headless-sdk/react'; function ProductPage() { const { products, isLoading, loadProducts } = useCatalog(); useEffect(() => { loadProducts(); }, [loadProducts]); return products.map(product => ( )); } ``` ### Creating a checkout session ```tsx theme={null} 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 ```tsx theme={null} 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) ```tsx theme={null} 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 ```tsx theme={null} 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. Free, edge-CDN, custom domain, A/B testing — all included with your account. ```bash theme={null} npm run build npx tsx scripts/deploy.ts # picks up TAGADA_API_KEY from .env ``` Full setup is in [Hosting your store](#hosting-your-store) below. ```bash theme={null} npm install -g vercel vercel --prod ``` ```bash theme={null} npm install -g netlify-cli netlify deploy --prod ``` ```bash theme={null} npx wrangler pages deploy dist ``` 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. | 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 | **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](/developer-tools/headless-sdk/emails) 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](/developer-tools/headless-sdk/pixels) 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. ```typescript theme={null} 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: ```typescript theme={null} // 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 ```mermaid theme={null} flowchart TB subgraph Front["Your storefront — you own this"] UI["UI
React · Next.js · Astro · plain HTML"] SDK["@tagadapay/headless-sdk
useCatalog · useCheckout · usePayment · useOffers · useGoogleAutocomplete"] UI --- SDK end subgraph Cloud["TagadaPay cloud — we handle this"] direction TB Pay["Payment orchestration
14+ PSPs · fallback · 3DS · sticky routing"] Mail["Transactional emails
order · rebill · canceled · refund · past due"] Pix["Pixel tracking
Meta · TikTok · GA4 · GTM · Snap · Pinterest"] Sub["Subscriptions & rebilling
dunning · retries · customer portal"] CRM["CRM dashboard
orders · customers · analytics"] Off["Offers & upsells
post-purchase · order bumps"] end Front -->|HTTPS| Cloud classDef yours fill:#F0FDF4,stroke:#16A34A,color:#0F172A; classDef ours fill:#16A34A,stroke:#15803D,color:#fff; class UI,SDK yours; class Pay,Mail,Pix,Sub,CRM,Off ours; ``` *** ## Why this beats Shopify / WooCommerce | | Shopify | WooCommerce | AI + TagadaPay | | ------------------- | --------------------- | -------------------- | -------------------------------------- | | **Monthly fee** | $39 – $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 | `npx -p @tagadapay/node-sdk tagada-init you@example.com` — sandbox account + API key + seeded store in 30 seconds. 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`: ```typescript theme={null} 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 ```bash theme={null} 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`](https://github.com/TagadaPay/examples/tree/main/headless-react-store) and [`headless-react`](https://github.com/TagadaPay/examples/tree/main/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: ```typescript theme={null} 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: ```typescript theme={null} 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. 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](https://vercel.com) | Next.js, SvelteKit | `vercel --prod` | | [Netlify](https://netlify.com) | Astro, static sites | `netlify deploy --prod` | | [Cloudflare Pages](https://pages.cloudflare.com) | 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): ```bash theme={null} 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 A real-looking boutique with localStorage cart and a pro checkout. Rebrand it in a day. Every Headless SDK hook explained with side-by-side code panels. Try the playground in the browser — browse, checkout, pay with test cards. Server-side automation — create stores, products, webhooks, and more. 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](https://tagadapay.com/pricing) for current rates and check the rate displayed on your account dashboard. *** `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. Sign up at app.tagada.io, copy your API key from Settings → Access Tokens. Same outcome, no credit card required.