Skip to main content

​
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.
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
Editorial thank-you — desktop
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
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

1

Clone the repo

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

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

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

Deploy

pnpm build
tgd deploy                        # via @tagadapay/plugin-cli
See the Plugin CLI docs for credentials and deploy targets.

​
FAQ

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