Open-Source Plugin Examples

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.

github.com/TagadaPay/plugins

All five examples live in a single monorepo under the MIT license. Star it, fork it, send PRs.

Plugin SDK vs. Headless SDK — quick primer

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

Plugin SDK (this page)

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

Headless SDK

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

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.

Editorial
Neon
Luxe Boutique
Solar Zine
Retro Arcade / Y2K

Source → simple-checkout-style-editorialClean magazine aesthetic — generous whitespace, restrained typography, editorial hierarchy. Best starting point if you want a neutral, trustworthy checkout.

Editorial checkout — desktop — Desktop 1440 × 900

Editorial thank-you — desktop — Thank-you page

Source → simple-checkout-style-neonBold neon-on-black aesthetic — high-contrast UI, fluorescent accents, uppercase display type. Good fit for streetwear, apparel, and youth-targeted DTC.

Neon checkout — desktop — Desktop 1440 × 900

Neon thank-you — desktop — Thank-you page

Source → simple-checkout-style-luxeQuiet-luxury aesthetic — ivory cream background, serif display, amber-gold accents, gentle motion. Designed for beauty, skincare, and premium lifestyle brands.

Luxe checkout — desktop — Desktop 1440 × 900

Luxe thank-you — desktop — Thank-you page

Source → simple-checkout-style-solarSunny zine energy — warm butter and peach palette, tight display type, playful but functional. Works for food, wellness, home goods, and indie brands.

Solar checkout — desktop — Desktop 1440 × 900

Solar thank-you — desktop — Thank-you page

Source → simple-checkout-style-arcadeCandy-Y2K nostalgia — lilac pastels, gradient divider lines, pulsing LIVE chip, chunky mono type. Tailored to gaming, digital collectibles, and early-web revival brands.

Arcade checkout — desktop — Desktop 1440 × 900

Arcade thank-you — desktop — Thank-you page

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

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

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.

How to Use These Examples

Clone the repo

git clone https://github.com/TagadaPay/plugins.git
cd plugins
pnpm install

Pick a variant

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.

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.

Deploy

pnpm build
tgd deploy                        # via @tagadapay/plugin-cli

See the Plugin CLI docs for credentials and deploy targets.

FAQ

Is this really MIT? Can I ship it unchanged?

Yes. The entire TagadaPay/plugins repo is MIT-licensed. You can fork, modify, rebrand, and deploy it commercially with zero attribution required (attribution is always appreciated though).

Why five variants instead of one 'themed' plugin?

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.

Can I contribute a sixth variant?

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.

How is this different from the Headless SDK examples?

The Headless SDK examples 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).

Are screenshots up to date?

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.

Next Steps

Build your first funnel

Step-by-step walkthrough if you want to build from scratch instead of forking.

Plugin manifest reference

Full reference for plugin.manifest.json — pages, features, requirements.

SDK API reference

Every hook exposed by @tagadapay/plugin-sdk/v2.

Deploy with Plugin CLI

tgd deploy, environments, and release channels.

Overview

Web Integration

Tracking & Attribution

Node SDK

Funnels

Shopify

SaaS Billing

Headless SDK

Plugin SDK

Plugin CLI

Studio MCP (AI Agents)

CRM MCP (AI Agents)

Hosting & A/B Testing

Internal

Open-Source Plugin Examples

Open-Source Plugin Examples

github.com/TagadaPay/plugins

Plugin SDK vs. Headless SDK — quick primer

Plugin SDK (this page)

Headless SDK

The Five Style Variants

Anatomy of a Plugin (shared across all five)

How to Use These Examples

FAQ

Next Steps

Build your first funnel

Plugin manifest reference

SDK API reference

Deploy with Plugin CLI

​Open-Source Plugin Examples

github.com/TagadaPay/plugins

​Plugin SDK vs. Headless SDK — quick primer

Plugin SDK (this page)

Headless SDK

​The Five Style Variants

​Anatomy of a Plugin (shared across all five)

​How to Use These Examples

​FAQ

​Next Steps

Build your first funnel

Plugin manifest reference

SDK API reference

Deploy with Plugin CLI

Open-Source Plugin Examples

Plugin SDK vs. Headless SDK — quick primer

The Five Style Variants

Anatomy of a Plugin (shared across all five)

How to Use These Examples

FAQ

Next Steps