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

# Open-Source Plugin Examples

> Five production-ready checkout plugins — fork, study, or ship as-is. 100% MIT.

# Open-Source Plugin Examples

<Info>
  Everything on this page is **real code in a real GitHub repo**, not pseudo-snippets.
  Clone it, run `pnpm dev`, read the source, swap the branding, or ship it verbatim.

  <CardGroup cols={1}>
    <Card title="github.com/TagadaPay/plugins" icon="github" href="https://github.com/TagadaPay/plugins">
      All five examples live in a single monorepo under the MIT license. Star it, fork it, send PRs.
    </Card>
  </CardGroup>
</Info>

***

## Plugin SDK vs. Headless SDK — quick primer

Before you fork anything, make sure you're looking at the right tool for the job:

<CardGroup cols={2}>
  <Card title="Plugin SDK (this page)" icon="react">
    **`@tagadapay/plugin-sdk/v2`** — a full React framework for building **hosted checkout, upsell, and thank-you pages** that TagadaPay serves from your own domain. Handles sessions, funnel state, payments, pixels, i18n, drafts, build mode, etc.

    Use when you want a **full checkout experience** we host and route for you.
  </Card>

  <Card title="Headless SDK" icon="terminal" href="/developer-tools/headless-sdk/introduction">
    **`@tagadapay/headless-sdk`** — framework-agnostic TypeScript client for calling the TagadaPay API from **your own storefront** (Shopify theme, Next.js app, Nuxt, etc.).

    Use when you already have a frontend and just need to create checkouts, fetch orders, or track pixels.
  </Card>
</CardGroup>

The five examples below all target the **Plugin SDK**. Each is a complete, deployable TagadaPay plugin.

***

## The Five Style Variants

Same behavior, same SDK hooks, same `plugin.manifest.json` structure — only the **visual system** changes.
Use them as starting points to understand how far the Plugin SDK's theming layer lets you push a single checkout design.

<Tabs>
  <Tab title="Editorial">
    [**Source →** `simple-checkout-style-editorial`](https://github.com/TagadaPay/plugins/tree/main/simple-checkout-style-editorial)

    Clean magazine aesthetic — generous whitespace, restrained typography, editorial hierarchy.
    Best starting point if you want a neutral, trustworthy checkout.

    <Frame caption="Desktop 1440 × 900">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-editorial/screenshots/editorial-desktop.png" alt="Editorial checkout — desktop" />
    </Frame>

    <Frame caption="Thank-you page">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-editorial/screenshots/editorial-thankyou-desktop.png" alt="Editorial thank-you — desktop" />
    </Frame>
  </Tab>

  <Tab title="Neon">
    [**Source →** `simple-checkout-style-neon`](https://github.com/TagadaPay/plugins/tree/main/simple-checkout-style-neon)

    Bold neon-on-black aesthetic — high-contrast UI, fluorescent accents, uppercase display type.
    Good fit for streetwear, apparel, and youth-targeted DTC.

    <Frame caption="Desktop 1440 × 900">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-neon/screenshots/neon-desktop.png" alt="Neon checkout — desktop" />
    </Frame>

    <Frame caption="Thank-you page">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-neon/screenshots/neon-thankyou-desktop.png" alt="Neon thank-you — desktop" />
    </Frame>
  </Tab>

  <Tab title="Luxe Boutique">
    [**Source →** `simple-checkout-style-luxe`](https://github.com/TagadaPay/plugins/tree/main/simple-checkout-style-luxe)

    Quiet-luxury aesthetic — ivory cream background, serif display, amber-gold accents, gentle motion.
    Designed for beauty, skincare, and premium lifestyle brands.

    <Frame caption="Desktop 1440 × 900">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-luxe/screenshots/luxe-desktop.png" alt="Luxe checkout — desktop" />
    </Frame>

    <Frame caption="Thank-you page">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-luxe/screenshots/luxe-thankyou-desktop.png" alt="Luxe thank-you — desktop" />
    </Frame>
  </Tab>

  <Tab title="Solar Zine">
    [**Source →** `simple-checkout-style-solar`](https://github.com/TagadaPay/plugins/tree/main/simple-checkout-style-solar)

    Sunny zine energy — warm butter and peach palette, tight display type, playful but functional.
    Works for food, wellness, home goods, and indie brands.

    <Frame caption="Desktop 1440 × 900">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-solar/screenshots/solar-desktop.png" alt="Solar checkout — desktop" />
    </Frame>

    <Frame caption="Thank-you page">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-solar/screenshots/solar-thankyou-desktop.png" alt="Solar thank-you — desktop" />
    </Frame>
  </Tab>

  <Tab title="Retro Arcade / Y2K">
    [**Source →** `simple-checkout-style-arcade`](https://github.com/TagadaPay/plugins/tree/main/simple-checkout-style-arcade)

    Candy-Y2K nostalgia — lilac pastels, gradient divider lines, pulsing LIVE chip, chunky mono type.
    Tailored to gaming, digital collectibles, and early-web revival brands.

    <Frame caption="Desktop 1440 × 900">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-arcade/screenshots/arcade-desktop.png" alt="Arcade checkout — desktop" />
    </Frame>

    <Frame caption="Thank-you page">
      <img src="https://raw.githubusercontent.com/TagadaPay/plugins/main/simple-checkout-style-arcade/screenshots/arcade-thankyou-desktop.png" alt="Arcade thank-you — desktop" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  Every variant implements the **exact same checkout and thank-you behavior** (mirroring our native `native-checkout` template). The only thing that changes between them is the design token layer: CSS variables, fonts, shadows, radii, motion — all driven through `src/index.css` and a few signature components (`TopBar`, `Button`, `SectionHeader`).
</Tip>

***

## Anatomy of a Plugin (shared across all five)

Every example follows the same skeleton, so once you understand one, you understand all five:

```
simple-checkout-style-<variant>/
├─ plugin.manifest.json          # pages, features, requirements
├─ config/
│  ├─ schema.json                # strongly-typed config shape
│  └─ default.config.json        # defaults merchants can override
├─ src/
│  ├─ App.tsx                    # wouter routing + SDK matchRoute
│  ├─ pages/
│  │  ├─ CheckoutPage.tsx        # uses <SingleStepCheckout />
│  │  └─ ThankYouPage.tsx        # routes to the full ThankYou tree
│  ├─ components/
│  │  ├─ SingleStepCheckout.tsx  # orchestrates address/payment/summary
│  │  ├─ ThankYouPage.tsx        # full thank-you UI (mirrors native-checkout)
│  │  ├─ ThankYouHeader.tsx
│  │  ├─ TopBar.tsx              # ← signature per-variant
│  │  ├─ OrderSummary.tsx
│  │  └─ ui/                     # shadcn primitives (button, input, etc.)
│  ├─ data/
│  │  └─ mockOrder.ts            # drives /thankyou/preview in local dev
│  ├─ hooks/
│  │  └─ usePageMetadata.ts      # title, favicon, OpenGraph per page
│  └─ index.css                  # ← variant-specific design tokens
└─ README.md
```

<Accordion title="What ships in the shared SDK (not duplicated in the plugin)">
  All five plugins import these from `@tagadapay/plugin-sdk/v2`:

  * **Routing / funnel** — `matchRoute`, `useFunnel`, `isDraftMode`
  * **Data hooks** — `useCheckout`, `useOrder`, `useCurrency`, `useISOData`, `usePluginConfig`
  * **Payment** — Stripe/Airwallex/HiPay/NMI method renderers, 3DS flow, Zelle/custom-payment handlers
  * **Tracking** — `usePixelTracking` (Meta, TikTok, GA, etc.)
  * **i18n** — `useTranslation` with merchant-supplied locales
  * **Preview** — Draft-mode rendering for the CRM's live preview iframe

  In other words: the plugin owns **the UI and the story** — the SDK owns the wiring.
</Accordion>

***

## How to Use These Examples

<Steps>
  <Step title="Clone the repo">
    ```bash theme={null}
    git clone https://github.com/TagadaPay/plugins.git
    cd plugins
    pnpm install
    ```
  </Step>

  <Step title="Pick a variant">
    ```bash theme={null}
    cd simple-checkout-style-luxe   # or editorial / neon / solar / arcade
    pnpm dev
    ```

    Vite boots on `http://localhost:5173/checkout` by default.
    Navigate to `/thankyou/preview` to see the thank-you page with mock data.
  </Step>

  <Step title="Rebrand">
    Most brand adjustments happen in **two files**:

    * `src/index.css` — design tokens (colors, radii, fonts, motion)
    * `src/components/TopBar.tsx` — the signature header strip

    A minimal rebrand (swap palette + logo) is typically \<100 lines of diff.
  </Step>

  <Step title="Deploy">
    ```bash theme={null}
    pnpm build
    tgd deploy                        # via @tagadapay/plugin-cli
    ```

    See the [Plugin CLI docs](/developer-tools/cli/introduction) for credentials and deploy targets.
  </Step>
</Steps>

***

## FAQ

<AccordionGroup>
  <Accordion title="Is this really MIT? Can I ship it unchanged?" icon="scale-balanced">
    Yes. The entire [`TagadaPay/plugins`](https://github.com/TagadaPay/plugins) repo is MIT-licensed.
    You can fork, modify, rebrand, and deploy it commercially with zero attribution required
    (attribution is always appreciated though).
  </Accordion>

  <Accordion title="Why five variants instead of one 'themed' plugin?" icon="palette">
    Because real brands need more than palette swaps. Each variant rewires motion curves,
    typographic rhythm, TopBar behavior, order-summary density, and micro-copy —
    the things that make a checkout feel *on-brand* vs *generic-with-custom-colors*.

    Having five distinct aesthetics gives you five working references instead of one design +
    four theoretical alternatives.
  </Accordion>

  <Accordion title="Can I contribute a sixth variant?" icon="hand-holding-heart">
    Absolutely — PRs welcome. The contribution guide is in the repo's root `README.md`.
    If your variant targets an underserved vertical (gaming, B2B, SaaS checkout, donation forms),
    we'll likely feature it here.
  </Accordion>

  <Accordion title="How is this different from the Headless SDK examples?" icon="circle-question">
    The [Headless SDK examples](https://github.com/TagadaPay/examples-sdk) target a different
    use case: calling TagadaPay from **your own frontend** (Shopify theme, Next.js site, etc.).
    The Plugin SDK examples on this page are **full hosted experiences** — TagadaPay serves
    them on the customer's checkout URL; you own the code.

    If you already have a storefront and just need checkout creation + pixels → Headless SDK.
    If you want a new custom checkout/upsell/thank-you flow → Plugin SDK (these examples).
  </Accordion>

  <Accordion title="Are screenshots up to date?" icon="camera">
    Yes — every image on this page is served from the repo's `screenshots/` folder via
    `raw.githubusercontent.com`. When a maintainer updates a variant, the image here updates too.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Build your first funnel" icon="graduation-cap" href="/developer-tools/sdk/tutorial">
    Step-by-step walkthrough if you want to build from scratch instead of forking.
  </Card>

  <Card title="Plugin manifest reference" icon="file-lines" href="/developer-tools/sdk/manifest">
    Full reference for `plugin.manifest.json` — pages, features, requirements.
  </Card>

  <Card title="SDK API reference" icon="book" href="/developer-tools/sdk/api">
    Every hook exposed by `@tagadapay/plugin-sdk/v2`.
  </Card>

  <Card title="Deploy with Plugin CLI" icon="rocket" href="/developer-tools/cli/introduction">
    `tgd deploy`, environments, and release channels.
  </Card>
</CardGroup>