Paystack

How to integrate Paystack with Webflow

Webflow's native payment integrations support only Stripe and PayPal according to Webflow's payment provider documentation. Businesses targeting African markets need access to mobile money, USSD payments, and bank transfers that aren't available through Webflow's built-in options. Integrating Paystack and Webflow enables these payment methods for customers in Nigeria, Ghana, Kenya, and South Africa.

Use Paystack's Inline Checkout JavaScript SDK to embed payment interfaces directly in your pages, or build custom payment flows with Paystack's Transaction APIs. The Paystack API reference documents all endpoints with request parameters and response schemas.

Embed Paystack InlineJS popup checkout

The InlineJS popup loads Paystack's hosted checkout interface directly on your Webflow pages. According to the Paystack InlineJS documentation, you can accept one-time payments, split payments, multi-split payments, and subscriptions through a single JavaScript library without building backend infrastructure for basic implementations.

Add the Paystack script to your site through Webflow's custom code in head and body tags (Project Settings → Custom Code → Head Code section) or use a custom code embed element where you want the payment button to appear. The popup maintains PCI compliance by keeping card data entirely within Paystack's secure environment when you use Paystack's Popup or Inline Checkout integration method.

This integration enables the following actions:

• Include the SDK: Add <script src="https://js.paystack.co/v2/inline.js"></script> to your site through Webflow's custom code areas or directly in HTML embed elements
• Initialize payments: Call PaystackPop.setup() with your public key, customer email, amount, and transaction reference to launch the payment popup
• Handle callbacks: Implement onSuccess, onCancel, and onError callbacks to manage payment states and update your interface based on outcomes
• Support multiple channels: Enable cards, bank transfers, USSD, mobile money, and Apple Pay through the channels parameter in your popup configuration
• Process subscriptions: Pass subscription codes from existing plans to enable recurring billing flows

The InlineJS approach works well for landing pages, donation forms, and simple product sales where you need quick implementation. For production deployments, verify transactions server-side using GET https://api.paystack.co/transaction/verify/:reference before fulfilling orders. Never rely solely on frontend callbacks since users can manipulate client-side code.

Build with Webflow and Paystack API

The Paystack Transaction API gives you complete control over payment flows, verification logic, and CMS synchronization. According to the Paystack API documentation, all endpoints follow RESTful conventions with JSON request and response formats, Bearer token authentication, and comprehensive error codes.

You'll need server-side infrastructure since Webflow doesn't execute backend code according to Webflow's custom code documentation. Deploy serverless functions on platforms like Netlify Functions, Vercel Functions, AWS Lambda, or Cloudflare Workers to handle transaction initialization, webhook signature validation, and secure API calls using your Paystack secret key.

Accept one-time payments

Single-payment transactions follow a three-step pattern. Initialize the transaction server-side using the /transaction/initialize endpoint, redirect customers to the authorization URL to complete payment, then verify the transaction result using the /transaction/verify endpoint before fulfilling orders.

Call POST /transaction/initialize from your server with required parameters email and amount (in smallest currency unit where ₦100.00 = 10000). The response includes authorization_url which you redirect customers to, and reference for verifying the transaction. Set callback_url to return customers to your Webflow site after payment.

Verify every transaction server-side using GET /transaction/verify/:reference before delivering value. The verification endpoint returns complete transaction details including status, amount, customer information, and payment channel. Never trust frontend callbacks alone since users can manipulate client-side code.

Paystack accepts these payment methods:

• Card payments: Visa, Mastercard, Verve, American Express processed through Paystack's secure popup
• Bank transfers: Direct bank transfers with automatic reconciliation
• Mobile money: MTN, AirtelTigo, Vodafone, M-PESA, Orange, Wave support across Ghana, Kenya, and other markets
• USSD codes: Unstructured Supplementary Service Data for feature phone payments
• QR codes: SnapScan and Scan to Pay apps in South Africa

Bank transfers, USSD, and mobile money complete asynchronously. Customers receive payment instructions and complete transactions outside your checkout flow. You must implement webhook listeners for charge.success events since these payments can't be confirmed immediately.

According to Paystack's webhook documentation, webhook delivery follows a consistent structure with event and data fields, and your webhook endpoint must respond with HTTP 200 OK within 30 seconds to confirm receipt.

Process recurring subscriptions

Subscription billing requires coordination between Plans, Customers, and Subscriptions resources. Create billing schedules first, then assign customers to those plans.

Define pricing with POST /plan specifying name, amount, and interval (hourly, daily, weekly, monthly, quarterly, biannually, or annually). Store the returned plan_code for subscription creation.

Create subscriptions by calling POST /subscription with customer (email or customer code) and plan (plan code). The response includes subscription_code for management operations and next_payment_date for billing tracking. Generate card update links through GET /subscription/:code/manage/link when customers need to change payment methods.

Paystack provides these subscription lifecycle management endpoints:

• List active subscriptions with GET /subscription filtered by customer or plan
• Enable paused subscriptions using POST /subscription/enable with subscription code and email token
• Disable active subscriptions through POST /subscription/disable for cancellations
• Handle subscription webhooks — Listen for subscription.create, subscription.disable, and subscription.expiring_cards events via Paystack webhooks

Store subscription codes in Webflow CMS user records to display billing status in member dashboards. Update subscription status fields when webhook events arrive (such as subscription.create, subscription.disable, or subscription.expiring_cards) to keep your CMS synchronized with Paystack's billing system.

Manage refunds and disputes

Issue refunds by calling POST /refund with the transaction ID or reference you want to refund. Include an amount parameter for partial refunds, or omit it to refund the full transaction. According to Paystack's Refunds API documentation, the required parameter is transaction (transaction ID or reference), with amount as an optional parameter for partial refunds.

According to Paystack's Webhooks Documentation, refund webhooks track processing stages. refund.pending fires when initiated, refund.processing during processing, refund.processed when complete, or refund.failed if unsuccessful. Listen for these events through webhook configuration in your Paystack dashboard.

Fetch refund history with GET /refund to populate admin dashboards in Webflow. Use pagination parameters perPage and page to handle large result sets.

Track customers and payment methods

Create customer profiles with POST /customer providing email as the only required parameter. Add optional fields like first_name, last_name, phone, and metadata for custom attributes. The response includes customer_code (format "CUS_xxxxxxxx") which serves as the customer identifier across all Paystack APIs. Store this in your Webflow CMS user records for linking related transactions, subscriptions, and transfers across collections.

Charge returning customers without re-entering payment details using POST /transaction/charge_authorization with their saved authorization_code. This code appears in the authorization object when customers complete their first transaction.

Paystack provides these customer management endpoints:

• Retrieve customer data with GET /customer/:email_or_code for profile displays
• Update customer records using PUT /customer/:code to modify names, phone numbers, or metadata
• Validate customer identity through POST /customer/:code/identification for KYC compliance
• Deactivate payment authorizations via POST /customer/authorization/deactivate when customers remove saved payment methods

Link customer codes across Webflow CMS collections using the customer_code reference field to maintain relationships between customers, transactions, subscriptions, and invoices. This reference field pattern enables relational data structures within Webflow's CMS architecture, allowing you to connect related payment and customer records across multiple collections.

Handle webhook events

Configure webhook URLs in your Paystack dashboard (Settings → Webhooks) pointing to server endpoints that can receive POST requests and respond with HTTP 200 OK within 30 seconds. Paystack's webhook documentation states that failed deliveries in live mode retry every 3 minutes for the first 4 attempts, then hourly for up to 72 hours.

Validate webhook signatures by computing HMAC SHA512 of the request body using your secret key, then comparing against the x-paystack-signature header. Verify the current webhook IP addresses from your Paystack dashboard to configure IP whitelisting for your webhook endpoints.

Critical webhook events for Webflow integration include:

• charge.success: Payment completed successfully, update order status in Webflow CMS
• transfer.success / transfer.failed: Payout processing complete, sync payout records to CMS collections
• subscription.create / subscription.disable: Subscription lifecycle changes, update user access permissions
• dedicatedaccount.assign.success: Virtual account assigned to customer, store account details in CMS
• refund.processed: Refund completed, update transaction records

Update Webflow CMS items through the PATCH /collections/{collectionid}/items/{itemid} endpoint when webhook events arrive. Use customer_code or transaction reference fields to locate the correct CMS items to update. According to Paystack's webhook documentation, store these unique identifiers as Plain Text fields in your Webflow CMS collections to enable reliable cross-referencing with payment data.

What you can build

Integrating Paystack with Webflow enables payment processing for African markets with mobile money, bank transfers, and USSD support alongside standard card payments.

• E-commerce checkout for African markets: Build product pages in Webflow CMS with Paystack payment buttons that accept cards, mobile money, bank transfers, and USSD codes, then update order status in your CMS when charge.success webhooks arrive
• Subscription membership sites: Create gated content areas in Webflow with subscription signup forms that call Paystack's Subscription API, manage billing cycles through automated renewals, and grant access based on subscription status stored in CMS user records
• Donation platforms with recurring giving: Design donation forms that initialize one-time transactions via POST /transaction/initialize or create recurring donations through subscription plans, tracking donor contributions in CMS collections
• Event registration with split payments: Build event landing pages that collect registration fees through Paystack's split payment feature, distribute revenue to multiple recipients automatically, and update attendee lists in Webflow CMS when payments complete