Paystack

Paystack accepts card, bank transfer, USSD, Apple Pay, Visa QR, and mobile money payments across Nigeria, Ghana, Kenya, South Africa, and Côte d'Ivoire — the local methods the native Stripe and PayPal checkout can't cover. Card payments dropped from 54% of non-recurring transactions in 2022 to 25% by December 2023, so a store built on Stripe alone misses most buyers.

Connect Paystack to your site to collect payments in local currencies and sync transactions into the Webflow CMS through webhooks. If you have no engineering resources, link a hosted Payment Page in minutes; if you need full control, wire Paystack's APIs to a serverless backend.

How to integrate Paystack with Webflow

What is Paystack? Paystack is a payment service provider that handles online and in-person payments for African businesses. It is a Stripe company trusted by over 200,000 businesses, including Domino's Pizza, MTN, Bolt, and AXA Mansard. Paystack provides hosted checkout tools, APIs for one-time and recurring payments, fraud detection, and identity verification across Nigeria, Ghana, Kenya, South Africa, and Côte d'Ivoire.

Pair Paystack with your site when you need to sell to African customers, and the native Stripe checkout does not cover local payment methods. A Nigerian store owner needs USSD and bank transfer. A Ghanaian creator needs mobile money. Paystack supports all of these, and you can connect it through hosted links, embedded snippets, or a custom backend.

There is no official Paystack app in the Webflow Marketplace, so every method here is a documented workaround. The Paystack integration supports three approaches:

• The hosted Payment Page or Storefront link lets you collect payments with no code on any plan.
• The Code Embed method lets you drop Paystack's client-side popup into a page, though verifying payments still needs a server.
• The Webflow and Paystack APIs give you full control over checkout, subscriptions, and CMS sync, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Link a Paystack Payment Page or Storefront

This is the only true no-code path, and it works on any plan including the free Starter plan. Create a hosted payment form in your Paystack dashboard, copy the URL, and use it as a button link on your site. Card data never touches your site, so you stay out of PCI scope entirely. Payment Pages support one-time and recurring payments and are one of the easiest ways to collect payments with Paystack.

To set up the integration:

1. In your Paystack dashboard, go to Payment Pages > New Page, choose One-time Payment, Subscription Payment, or Product Payment, complete the form fields, and click Create. See the Payment Pages setup guide.
2. Copy the hosted page URL. For a full store, create one under Storefront > New Storefront instead. Use the Storefront setup guide.
3. In the Designer, select a button or link element and paste the URL as its link destination.

This approach lets you sell physical or digital products through a Paystack Storefront with inventory management, collect one-time or recurring donations with user-defined amounts, and accept subscription payments for a membership or service.

By default, customers see a Paystack "Thank You" page after paying, but you can set a callback URL to redirect them back to a confirmation page on your site instead. This method has no plan gate, which makes it the fastest way to start accepting Paystack payments on any plan, including free.

Add Paystack checkout with Code Embed elements

When you need the checkout popup to appear inside your own page rather than on a hosted Paystack URL, use a Code Embed element. This method suits developers and agencies who want a branded, in-page payment experience. You need a paid Site plan or a qualifying Workspace plan, since Code Embed is not available on free plans. Each embed accepts up to 50,000 characters of HTML, CSS, and client-side JavaScript.

The Code Embed element supports Paystack's Inline JS popup, but there is a hard limit you need to understand before you build. The popup initializes on the client side, which is fine for collecting payment. Verifying that a payment actually succeeded requires a call to the Paystack API with your secret key, and that call must never run in the browser. Always pair this method with a server for verification.

Embed the Paystack popup in a page

Place the Paystack Inline JS snippet where you want the payment button to appear. This renders the popup when a visitor clicks pay.

To add the popup:

1. In the Designer, add a Code Embed element to your page where the payment button should sit.
2. Paste your Paystack Inline JS snippet using your public key only, and set the transaction amount and customer email.
3. Publish the page and test the popup with a Paystack test key.

Never place your Paystack secret key in a Code Embed. Secret keys exposed in client-side JavaScript are a critical security vulnerability, so the next step always happens on a server.

Add site-wide scripts with Custom code in head and body tags

If you load the Paystack script once for the whole site rather than per page, add it to your site's custom code. This keeps the library available across pages without duplicating it in every embed.

To add site-wide code:

1. Go to Site settings > Custom Code.
2. Paste the Paystack Inline JS library reference in the Head Code or Footer Code section. Follow the docs on custom code in head and body tags.
3. Save and publish your site.

Server-side languages like PHP, Python, and Ruby do not run in custom code, so transaction verification still lives outside your site. Any verification call that uses a Paystack secret key needs a backend.

Build with the Webflow and Paystack APIs

The API path gives you full control over checkout, subscriptions, customer records, and CMS sync. You need server-side development, since any Paystack call using your secret key must run on a backend. Initiate all requests to the Paystack API from your server, never from custom code. Deploy a serverless function on Vercel, Netlify Functions, Cloudflare Workers, or AWS Lambda to sit between your site and Paystack.

The available APIs handle distinct parts of the flow:

• The Paystack Transaction API handles initializing and verifying payments and charging saved cards.
• The Paystack Subscription API and Plan API handle recurring billing.
• Paystack webhooks deliver real-time events like charge.success to your server.
• The Webflow Data API handles CMS collection items and form submissions.

Prefer webhooks over callback URLs because they deliver real-time updates faster and more reliably. That makes them the backbone of any CMS sync.

Process a one-time checkout

This flow collects a payment on your site and confirms it server-side before granting access to a product or page. It combines a client-side popup with a backend verification call.

To implement this:

1. Your frontend collects the customer's intent, then calls your serverless function, which sends POST /transaction/initialize with email and amount in subunits. Paystack returns an authorization_url and access_code.
2. Redirect the customer to the authorization_url, or pass the access_code to the Paystack Inline JS popup.
3. Configure a public webhook endpoint to receive charge.success, validate the x-paystack-signature header (HMAC SHA512 of the raw body using your secret key), and return 200 OK.
4. Confirm the payment with GET /transaction/verify/:reference and check that data.status equals "success" before fulfilling the order. See the verify payments guide.

For returning customers, POST /transaction/charge_authorization charges a saved card using a reusable authorization_code, so buyers skip re-entering card details.

Run recurring subscriptions and sync to the CMS

This flow bills customers on a schedule and mirrors their subscription status into a CMS Collection. Use it for SaaS billing or paid memberships.

To implement this:

1. Create a plan with POST /plan and store the returned plan_code, for example PLN_gx2wn530m0i3w3m.
2. For a new customer, call POST /transaction/initialize with the plan parameter and redirect to the authorization_url to collect the first payment and recurring authorization.
3. Listen for subscription webhooks like subscription.create, invoice.create, and invoice.payment_failed, then write each status change to a subscriber item using the Webflow Data API PATCH /collections/{collection_id}/items/{item_id}.
4. On a failed renewal, send a card-update link with POST /subscription/:code/manage/email/.

The CMS plan holds up to 2,000 items and the Business plan holds up to 10,000, so size your subscriber Collection to your expected member count. A Collection List can then display active members or gated content driven by that synced status.

What can you build with the Paystack Webflow integration?

Integrating Paystack lets you collect local African payment methods on your site without switching away from Webflow's design and hosting.

• No-code product store: Link a Paystack Storefront from buttons on your site to sell products with card, bank transfer, USSD, and mobile money, then redirect buyers to a thank-you page.
• In-page donation form: Embed the Paystack popup with a Code Embed element so supporters give one-time or recurring donations at custom amounts without leaving your campaign page.
• SaaS subscription billing: Wire the Subscription API to a serverless function and sync charge.success and invoice.payment_failed events into a CMS Collection that tracks each member's plan status.
• Event ticketing page: Sell multiple ticket tiers through a Paystack Payment Page and use split payments to distribute revenue, while your site renders the event landing page and schedule.

If you need more control over verification, dunning, or KYC checks, the API integration path covers those cases with full flexibility.