Accept Mobile Money on Framer Sites with the DGateway Plugin

Framer has quietly become the go-to design tool for African creators, course sellers, agencies, and indie builders who want a polished site without touching Webflow's pricing tiers or wrestling with a CMS. The one thing it has never solved: payments — especially Mobile Money.

Until now. The DGateway Framer Plugin ships today. It mirrors the same five surfaces our WordPress plugin exposes — Pay Button, Donation Form, Product Card, Subscribe Button, Payment Link — adapted to how Framer actually works (static sites, no PHP runtime, no shortcodes). One zip install, no API key in browser JS, ships your first payment in under five minutes.

Download the plugin (zip) · Full guide

Why this matters for Framer creators

If you build on Framer in East Africa, you've probably hit this wall:

• The native Stripe integration is great if your buyers have cards. Most don't.
• Custom code components for Mobile Money mean spinning up a backend, writing webhook handlers, hosting an API.
• Payment-link buttons work — but look like links, not buttons. No price chips, no donation flow, no subscription support.

The DGateway plugin closes that gap. You configure everything inside the Framer editor, paste a snippet onto your canvas, and your live site has working Mobile Money + card checkout.

Plugin vs. custom integration: Same comparison logic as the WordPress plugin. The plugin handles popup management, status redirects, styling, property controls. A custom integration gives you 100% UI control but takes 2-5 days of work versus 5 minutes with the plugin.

What ships in v1

Every component outputs two formats:

1. Framer code component — a complete .tsx snippet with addPropertyControls(). Paste into Framer Studio → Assets → Code → New File. The component appears in your Assets panel and is fully editable via Framer's right-side controls (background color, radius, label, etc.).

2. HTML embed — a self-contained <a> or <form> snippet with inline styles. Drag Framer's built-in Embed component onto your canvas, paste the HTML, done. Works on Framer's free plan.

You pick the format that suits your workflow.

How the plugin actually works

There's an important architectural difference between this plugin and the WordPress one, and it's worth understanding before you install.

WordPress runs PHP server-side, so the WordPress plugin can safely hold a secret API key and make authenticated calls to /v1/payments/collect from the server. The key never reaches the browser.

Framer is the opposite — published sites are 100% static client-side JavaScript. Embedding a secret API key in the published JS would leak it to anyone with browser dev tools.

So the Framer plugin takes a different approach: it never makes authenticated API calls from the browser. The components are pure links to your DGateway-hosted checkout pages. The flow is:

1. Buyer clicks the button on your Framer site.
2. A popup window opens, pointed at https://dgatewayadmin.desispay.com/store/[your-app]/p/[link-slug] (or similar).
3. DGateway's hosted page handles the entire checkout — phone entry, STK push, status updates, success redirect.
4. Webhooks fire to whatever URL you configured in your DGateway app settings (your own backend, Zapier, n8n, etc.). Framer is not in the webhook path.

The plugin's only job is rendering a beautifully styled CTA that points at the right hosted URL.

Installation (2 minutes)

Option A — Direct zip install (recommended)

1. Open the docs page and click Download plugin.zip.
2. In Framer, open any project.
3. Top-right toolbar → Plugins icon (puzzle piece) → Add Plugin → Open from File.
4. Select the zip.
5. The DGateway icon appears in your plugin tray. Click to open.

Option B — Framer Plugin Marketplace

We've submitted to the marketplace. Once approved (1-3 weeks review), it'll be one-click install. For now, the zip is the canonical distribution path. Updates work the same way — download the new zip, re-install, your settings (app slug, base URL) persist across re-installs.

Your first Pay Button (3 minutes)

1. Create a payment link in DGateway. Dashboard → your app → Payment Links → New. Set a fixed amount (say UGX 5,000), save, copy the slug.

2. Open the Framer plugin. First open prompts you for your app slug — paste it from your DGateway dashboard's Store Settings.

3. Pick "Pay Button" from the home list. 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 — Framer Code Component or HTML Embed.

5. Click Copy snippet.

6. Paste in Framer. Code component → Assets → Code → New File → paste. HTML embed → drag Embed component onto canvas → paste into the HTML field.

7. Publish, click the button on your live site, confirm the DGateway popup opens.

The five components — quick reference

Pay Button

Single fixed-amount payment. Needs a Payment Link slug from your dashboard. Optionally redirects to a success URL after payment.

Donation Form

Preset amount chips (5000, 10000, 25000, 50000) plus an optional custom-amount input. Needs a flexible-amount payment link. The chosen amount is appended to the URL as ?amount=N.

Product Card

A complete product card — cover image, name, price, CTA. Points at your hosted product checkout (/store/[app]/pay/[product]). Use this for digital downloads, ebooks, templates.

Subscribe Button

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

Payment Link Embed

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

Code component vs HTML embed — which to pick?

Rule of thumb: if you're going to use the same button shape across multiple pages, ship the code component once and drag it everywhere. If you need a one-off CTA on a single landing page, the HTML embed is faster.

What's not in v1

A few intentional omissions:

• No admin dashboard inside Framer. Transactions, withdrawals, subscriptions — all of that lives in your DGateway dashboard. The Framer plugin is an authoring tool, not a management surface.
• No CMS sync. Future versions will pull product data live from your DGateway products and sync to Framer's CMS Collections. v1 is manual — you paste slugs.
• No code-free product picker. v1 expects you to copy the slug from your DGateway dashboard. v2 will list your products inside the plugin panel for one-click pick.

If any of these block your use case, WhatsApp JB and we'll prioritize them.

What's next

• Marketplace listing. In review with Framer.
• CMS sync. Drop your DGateway products into a Framer Collection in one click.
• Course & Event components. Specifically for creators selling courses and event tickets on DGateway.
• Live product picker. Pick products by name inside the plugin instead of pasting slugs.

If you build with Framer and DGateway, we want to see what you ship. Tag us on X @MJohnbaptist or share in the DGateway Slack.

Get started

• 📦 Download the plugin
• 📖 Full installation guide
• 🐙 Source on GitHub
• 💬 WhatsApp JB — replies in minutes

If you're already on DGateway and using Framer, this is the missing piece. If you're on Framer but haven't tried DGateway yet, signup is free and test transactions work without paying the connection fee — so you can have a working integration on your Framer site before you spend a cent.