DGateway Framer Plugin

Drop-in payment components for Framer sites. Configure inside the Framer editor, copy the generated Framer code component (or HTML embed), paste onto your canvas, ship.

What it does

Five components, all powered by your existing DGateway hosted checkout — no API keys ship to the browser, no backend to host:

Component	What it generates
Pay Button	A button that opens a fixed-amount payment link in a popup
Donation Form	Preset-amount chips + custom amount input, opens hosted donate page
Product Card	Image + name + price + buy button → hosted product checkout
Subscribe Button	Opens hosted subscription signup for a given Plan ID
Payment Link	Styled embed for any DGateway payment link URL

Each component has two output formats:

• Framer code component — a .tsx snippet with addPropertyControls. Paste into Framer Studio → Assets → Code → New File. Once saved, drag from the Assets panel and tweak via the right-side controls.
• HTML embed — a static snippet. Drag Framer's built-in Embed component onto the canvas and paste this into its HTML field.

Installation

From a zipped build (recommended)

1. Download dgateway-framer-plugin.zip.
2. In Framer, open any project → top-right menu → Plugins → Add Plugin → Open from File → select the zip.
3. The DGateway icon appears in your plugin tray. Click to open.

Installation tip: Framer expects the zip to contain the built plugin assets (the contents of dist/), not the source. If you're building locally, run npm run pack — it builds and zips in one step.

From source (development)

git clone https://github.com/MUKE-coder/dgateway-framer-plugin
cd dgateway-framer-plugin
npm install
npm run dev

Then in Framer: Plugins → Add Plugin → Open from URL → paste the local dev URL (printed by npm run dev, typically http://localhost:5173). Hot reload works out of the box.

Quick start

1. Open the plugin in your Framer project (top-right menu → Plugins → DGateway).
2. Set your app slug the first time you open it. Find it in DGateway dashboard → your app → Store Settings → Slug.
3. Pick a component from the home list.
4. Fill in the details — payment-link slug, label, currency, etc.
5. Copy the snippet (either format) and paste into Framer.

Why no API key?

WordPress runs PHP server-side, so the WordPress plugin can safely hold a secret API key. Framer sites are 100% static client-side — embedding a secret key in the published JS would leak it to anyone with browser dev tools.

This plugin works around that by never making authenticated API calls from the browser. Components just open your DGateway-hosted checkout pages in a popup. All payment processing, status updates, fulfillment, webhooks happen server-side on DGateway. The plugin's job is purely to render styled CTAs and take the buyer to the right hosted page.

Prerequisites

• A DGateway account: https://dgatewayadmin.desispay.com/store/signup
• An app slug (Store Settings)
• For Pay Button / Donation Form: a Payment Link in your DGateway dashboard
• For Subscribe Button: a Subscription Plan ID
• For Product Card: a digital product slug

Distribution

The plugin is distributed two ways:

1. Direct install via the zip file (above) — fastest, no review process.
2. Framer Plugin Marketplace — under review, listing pending.

Tech stack

• React 18 + TypeScript + Vite
• framer-plugin SDK for the plugin runtime APIs
• Tailwind CSS with Framer theme tokens (auto dark-mode)

Repo layout

dgateway-framer-plugin/
├── framer.json          Plugin manifest
├── package.json
├── vite.config.ts
├── index.html
├── public/icon.svg
└── src/
    ├── main.tsx         framer.showUI() + React mount
    ├── App.tsx          Screen router
    ├── types.ts         Settings + per-component config shapes
    ├── components/
    │   └── ui.tsx       Button, Input, Tabs, CodeBlock, …
    ├── screens/
    │   ├── Home.tsx
    │   ├── Settings.tsx
    │   └── ComponentConfig.tsx
    ├── generators/      One file per component (TSX + HTML outputs)
    │   ├── pay-button.ts
    │   ├── donation-form.ts
    │   ├── product-card.ts
    │   ├── subscribe-button.ts
    │   └── payment-link.ts
    └── lib/
        ├── storage.ts   framer.getPluginData / localStorage fallback
        └── clipboard.ts

License

GPL-2.0-or-later (matches the WordPress plugin so creators stay on the same license across both surfaces).

Support

WhatsApp: +256 762 063 160 (JB) Email: gmukejohnbaptist@gmail.com Docs: https://dgateway.desispay.com/docs/framer