GoCardless

How to integrate GoCardless with Webflow

Direct Debit payments offer higher success rates and lower fees than cards, making them ideal for subscriptions, memberships, donations, and retainers. GoCardless handles all sensitive payment data, so you don't need to manage PCI compliance yourself.

GoCardless has no native Webflow app. Options include hosted payment pages, payment links via Code Embed, automation platforms like Zapier and Make, or custom API integration.

Use GoCardless hosted features

Hosted payment pages

Create payment pages in GoCardless dashboard, link from Webflow buttons, and configure redirect URLs. GoCardless handles PCI compliance automatically.

To set up hosted payment pages:

• Create and configure payment pages in GoCardless dashboard
• Generate unique URLs per payment page
• Add Webflow buttons linking to GoCardless URLs
• Configure success/failure redirects
• Test in sandbox before production

Limitations: Customers leave your site, limited design customization, 3-8 day settlement delay.

Payment links

Generate shareable URLs for one-time or recurring payments, then embed in Webflow as links or Code Embed elements.

To implement payment links:

• Create payment link in GoCardless dashboard
• Configure payment type, amount, and currency
• Add to Webflow buttons or embed code
• Style for brand consistency
• Configure redirect URLs

Best for: SaaS subscriptions, nonprofit donations, gym memberships, B2B invoicing, subscription boxes.

Build with automation platforms

Connect GoCardless to Webflow through automation platforms like Zapier and Make. Here are the steps to follow:

Zapier integration

Connect Webflow forms to GoCardless payment workflows. Note: Currently in Beta — consider Make for production use.

Zapier triggers include: New Payment Authorization Request, Payment Authorization Approved, Payment Secured, Payment Paid Out, Payment Failed, Mandate Cancelled

Zapier actions include: Create Instant Bank Pay payment, Create Direct Debit Mandate, Create Direct Debit Mandate Payment

Make integration

Make offers more extensive GoCardless integration than Zapier, with 26 actions, 4 triggers, and 9 search modules, plus refund and cancellation capabilities.

Make triggers include: Watch Approved Authorizations, Watch Billing Requests, Watch Mandates, Watch Payments

Make actions include: Cancel Payment, Cancel Subscription, Cancel Instalment Schedule, Create Direct Debit/ACH Mandate, Create Bank Debit Payment, Create Refund, Create Subscription, Create Instalment Schedule

Build with Webflow and GoCardless API

Custom API integration gives you full control over payment flows. Requires backend development — use hosted pages or automation platforms if you don't have dev resources.

Authentication and setup

Use Bearer token authentication: Authorization: Bearer {accesstoken}. Include Content-Type: application/json for POST/PUT requests. OAuth 2.0 is available for partner applications.

Base URLs:

• Sandbox: https://api-sandbox.gocardless.com/
• Production: https://api.gocardless.com/

Core API endpoints

• POST /customers — Create customers
• POST /mandates — Set up mandates
• POST /payments — Initiate payments
• POST /subscriptions — Create subscriptions
• GET endpoints — List resources with filtering/pagination

Webhook integration

Configure HTTPS endpoints to receive payment events. HMAC signature verification is mandatory for production. Return 2xx quickly and process asynchronously.

Key events include: mandates.cancelled, mandates.expired, payments.created, payments.confirmed, payments.paidout, payments.failed

Webflow integration pattern

Build serverless functions receiving GoCardless webhooks, extract resource IDs, fetch details via API, then sync to Webflow CMS using the Webflow Data API. Use automation platforms as webhook intermediaries if you don't have backend resources.

Technical requirements

HTTPS webhooks with mandatory HMAC verification. Handle payment failures, timeouts, and scheme-specific requirements. Account for 3-8 day settlement delays. Custom API requires PCI DSS certification unless using hosted pages.

What you can build

Integrating GoCardless with Webflow lets you build recurring payment systems that use Direct Debit for subscriptions, memberships, and donations.

• Subscription membership sites: Build tiered platforms with GoCardless payment pages and automation syncing member data to Webflow CMS collections
• Nonprofit recurring donation pages: Create donation forms with Direct Debit mandates and webhook-synced donation history
• SaaS billing pages: Build pricing tier pages that trigger payment authorization
• Service retainer billing: Create client portals with recurring payment mandates and payment history stored in CMS