> ## 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.

# Examples

> Every open-source example in TagadaPay/examples, mapped to the tutorial that explains it — clone one, run tagada-init, ship

# Examples

Every project in [`github.com/TagadaPay/examples`](https://github.com/TagadaPay/examples) is a **finished, runnable app** — and every one of them has a tutorial on this site that rebuilds it step by step. This page is the map between the two.

<Info>
  **The 60-second loop** for any example: clone → `npx -p @tagadapay/node-sdk tagada-init you@example.com` (prints an API key, no browser) → `pnpm seed <API_KEY>` where there is a seed → `pnpm dev`. Each README repeats the exact commands.
</Info>

***

## Storefronts & funnels (Headless SDK)

You own the frontend; TagadaPay handles cart, payment, 3DS, and one-click offers.

| Example                                                                                        | What it teaches                                            | Tutorial                                                                                                        |
| ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| [`headless-react-store`](https://github.com/TagadaPay/examples/tree/main/headless-react-store) | Fork-ready boutique storefront — rebrand and ship in a day | [Build a Store with AI](/developer-tools/headless-sdk/build-store-with-ai)                                      |
| [`headless-react`](https://github.com/TagadaPay/examples/tree/main/headless-react)             | Interactive playground for every React hook in the SDK     | [Build a Store with AI](/developer-tools/headless-sdk/build-store-with-ai#fastest-path--clone--ship-3-commands) |
| [`headless-vanilla`](https://github.com/TagadaPay/examples/tree/main/headless-vanilla)         | Full funnel in **3 HTML files** — no React, no build step  | [Checkout in plain HTML](/developer-tools/examples/headless-vanilla)                                            |
| [`basic-post-purchase`](https://github.com/TagadaPay/examples/tree/main/basic-post-purchase)   | Landing → checkout → OTO → downsell → thank you            | [Basic post-purchase](/developer-tools/funnel-demos/basic-post-purchase)                                        |
| [`geo-offers`](https://github.com/TagadaPay/examples/tree/main/geo-offers)                     | Route the offer by visitor region 🇺🇸 / 🇪🇺 / 🌍         | [Geo-based offers](/developer-tools/funnel-demos/geo-offers)                                                    |
| [`vip-tag-offers`](https://github.com/TagadaPay/examples/tree/main/vip-tag-offers)             | Route the offer by CRM tags ⭐ / 🆕                         | [VIP tag offers](/developer-tools/funnel-demos/vip-tag-offers)                                                  |
| [`cart-value-upsell`](https://github.com/TagadaPay/examples/tree/main/cart-value-upsell)       | Route the offer by the real order total                    | [Cart-value upsell](/developer-tools/funnel-demos/cart-value-upsell)                                            |

## Payments with your own cart (core-js)

You already have the order — Medusa, Woo, a custom API. You only need tokenize + charge.

| Example                                                                                                  | What it teaches                                              | Tutorial                                                                                   |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| [`core-js-tokenization`](https://github.com/TagadaPay/examples/tree/main/core-js-tokenization)           | Tokenize a card, create a payment instrument, 3DS, charge    | [Card tokenization & 3DS](/developer-tools/examples/card-tokenization)                     |
| [`core-js-card-payment`](https://github.com/TagadaPay/examples/tree/main/core-js-card-payment)           | The same flow, minimal — one page, one card form, one charge | [Card tokenization & 3DS](/developer-tools/examples/card-tokenization#the-minimal-variant) |
| [`apple-google-tokenization`](https://github.com/TagadaPay/examples/tree/main/apple-google-tokenization) | Native Apple Pay & Google Pay buttons + the same charge path | [Apple Pay & Google Pay](/developer-tools/examples/apple-google-pay)                       |

## SaaS billing (core-js + node-sdk)

| Example                                                                                  | What it teaches                                  | Tutorial                                                              |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------- |
| [`mini-saas-billing`](https://github.com/TagadaPay/examples/tree/main/mini-saas-billing) | Subscribe a customer: plans, trials, MIT rebills | [SaaS Billing Quick Start](/developer-tools/saas-billing/quick-start) |

<Tip>
  Not sure which family you're in? [Choose how you accept payments](/developer-tools/payments/choose-your-integration) picks the right integration in under a minute. Rule of thumb: **TagadaPay manages the cart → Headless SDK. You already have the order → core-js.**
</Tip>

***

## Next

<CardGroup cols={2}>
  <Card title="TagadaPay/examples on GitHub" icon="github" href="https://github.com/TagadaPay/examples">
    All eleven projects, MIT-licensed. Clone, fork, ship.
  </Card>

  <Card title="Funnel demos" icon="layer-group" href="/developer-tools/funnel-demos/introduction">
    The funnel catalog — one graph pattern per demo
  </Card>

  <Card title="Hosted checkout plugins" icon="react" href="/developer-tools/sdk/open-source-examples">
    Five MIT checkout plugins for the Plugin SDK (different repo)
  </Card>

  <Card title="Get an API key" icon="key" href="/developer-tools/node-sdk/get-api-key">
    `tagada-init` from the terminal — 30 seconds, no browser
  </Card>
</CardGroup>