DGateway Framer Plugin

The DGateway Framer Plugin lets you drop Mobile Money and card payment components onto any Framer site — configured inside the Framer editor, pasted as either a Framer code component or a plain HTML embed. No backend to host, no API keys in browser JS.

It mirrors the same five surfaces the WordPress plugin offers — Pay Button, Donation Form, Product Card, Subscribe Button, Payment Link — adapted to how Framer actually works (static published sites, no PHP runtime, no shortcodes).

How it works

The plugin opens as a panel inside the Framer editor. You pick a component template, fill in a few fields (link slug, plan ID, label, etc.), and the plugin generates code in two formats. You paste the code into Framer, hit publish, and the button on your live site opens your DGateway hosted checkout in a popup.

Nothing about the payment flow runs inside the Framer site — DGateway handles collection, status updates, webhooks, and fulfillment on its own servers. The plugin's job is purely to render a styled CTA that points at the right hosted page.

Installation

Option A — Direct install from zip (recommended)

The fastest path. Two minutes start to finish.

1. Download dgateway-framer-plugin.zip from the latest GitHub release.
2. In Framer, open any project.
3. Click the Plugins icon in the top-right toolbar (puzzle piece).
4. Choose Add Plugin → Open from File.
5. Select the zip you just downloaded.
6. The DGateway icon appears in your plugin tray. Click it to open the panel.

Option B — From source (for developers)

If you want to fork, customize, or contribute, clone the repo and run the dev server:

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 and paste http://localhost:5173. Hot reload works.

Option C — Framer Plugin Marketplace

Your first component

Let's ship a Pay Button in under 3 minutes.

1. Create a payment link in DGateway. Open your dashboard → dgatewayadmin.desispay.com → your app → Payment Links → New. Set a fixed amount (e.g. UGX 5,000), save, copy the slug (e.g. my-product).
2. Open the Framer plugin. Click the DGateway icon in the plugin tray. On first open you're prompted to enter your app slug — paste it and save.
3. Pick "Pay Button." Fill in:
   • Payment Link Slug: my-product
   • Button Label: Buy now — UGX 5,000
   • Success URL (optional): where to redirect after payment
4. Choose your output format. Tab at the top of the preview — Framer Code Component or HTML Embed. For maximum visual flexibility, pick the code component.
5. Click "Copy snippet."
6. Paste in Framer. If you chose the code component: Assets → Code → New File → paste. If you chose HTML embed: drag an Embed component onto your canvas → paste into the HTML field.
7. Hit publish. Click the button on your live site. Confirm the DGateway popup opens.

Pay Button

A single button that opens a fixed-amount payment link in a popup. Equivalent to the WordPress [dgw_pay_button] shortcode.

Donation Form

Preset-amount chips + an optional custom-amount input. Use a DGateway payment link configured as flexible amount. The chosen amount is passed to the hosted page via URL parameter.

Product Card

An image + name + price + buy button card. Points at a hosted product checkout page (/store/[app]/pay/[product]).

Subscribe Button

Opens the hosted subscription signup page for a specific plan ID. Customer fills in their details on DGateway, gets the first cycle billed, lands back on your success URL.

Payment Link Embed

The simplest one. Paste any full DGateway payment link URL — the plugin renders a styled card-style CTA pointing at it. Useful when you already have a link and just want it to look good on your Framer site.

Framer code component

A complete .tsx file you paste into Framer Studio under Assets → Code → New File. Includes a React function component plus addPropertyControls() so the right-side panel in Framer shows editable fields (background color, radius, label, URL, etc.) once the component is on canvas.

// DGatewayPayButton.tsx
import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

interface Props { label: string; paymentUrl: string; ... }

export default function DGatewayPayButton(props: Props) {
    const { label, paymentUrl } = props
    return <button onClick={() => window.open(paymentUrl, "dgateway", "...")}>{label}</button>
}

addPropertyControls(DGatewayPayButton, {
    label: { type: ControlType.String, ... },
    paymentUrl: { type: ControlType.String, ... },
    // …
})

HTML embed

A self-contained <a> / form snippet with inline styles. Paste into a Framer Embed component's HTML field. Works on any Framer plan.

<a href="https://dgatewayadmin.desispay.com/store/your-app/p/my-product"
   target="_blank" rel="noopener"
   style="display:inline-flex;align-items:center;justify-content:center;background:#6c5ce7;
          color:#fff;padding:0 16px;height:44px;border-radius:10px;
          font:600 14px system-ui,sans-serif;text-decoration:none;">
  Buy now — UGX 5,000
</a>

Which one to pick

Why no API key?

The WordPress plugin holds a secret API key because WordPress runs PHP server-side — the key never reaches the browser. Framer is the opposite: published sites are 100% static client-side JavaScript. Embedding a secret key would expose it to anyone with browser dev tools.

So this plugin never makes authenticated API calls from the browser. The components are pure links to your DGateway hosted checkout. Payment processing, status updates, webhooks, fulfillment — all of that happens server-side on DGateway, exactly as it does today for payment links shared on WhatsApp or social.

Success redirects

Pay Button supports a successUrl property. The component opens DGateway in a popup, polls the popup for a redirect to your success URL, then closes the popup and redirects the parent site. For Product Cards and Subscribe Buttons the success URL is configured on the resource itself in your DGateway dashboard.

Styling & theming

Every code component exposes bg, color, radius, etc. as Framer Property Controls. Once on canvas, click the component and use the right-side panel to match your brand. The defaults use DGateway violet (#6c5ce7) so you can publish a working version immediately.

Webhooks & fulfillment

Since the Framer site has no backend, webhook delivery does not land on the Framer side. DGateway handles fulfillment directly:

• Digital products — buyer gets a Customer Portal account + signed download links by email.
• Subscriptions — DGateway emails the customer on each cycle, success, or failure.
• Custom logic — if you need a webhook for your own systems (e.g. provisioning), configure the webhook URL in your DGateway app settings to point at your own backend or a Zapier/n8n endpoint. Framer is not in this path.

Updates

When a new version ships, download the new zip from the GitHub releases page and re-install via Plugins → Add Plugin → Open from File. Your saved settings (app slug, hosted base URL) persist across re-installs via Framer's plugin storage.

Framer Marketplace

We've submitted the plugin to the Framer Plugin Marketplace. Review can take 1–3 weeks. Until it's listed, the zip is the canonical distribution path. Once approved, this page will be updated with a one-click install link.

Troubleshooting

Get help

WhatsApp +256 762 063 160 (JB) — replies within minutes during business hours. Or open an issue on the GitHub repo.