GoCardless

How to integrate GoCardless with Webflow

API integration provides complete control over payment flows, mandate creation, and subscription management. You can build custom checkout experiences and manage subscription lifecycle through the GoCardless API, which supports customer creation, mandate authorization, payment processing, and webhook notifications for real-time status updates. While you can sync payment data to Webflow CMS collections using the Webflow API, this requires custom development, as Webflow does not natively support GoCardless.

Use payment button/link embeds for simple one-off payment collection. These require minimal custom code in a Webflow Custom Code Embed element (available on Core, Growth, Agency, or Freelancer Workspace plans). For advanced features like subscription management, payment status tracking in Webflow CMS, or automated billing workflows, use API integration with GoCardless webhooks to sync real-time payment data to your Webflow CMS collections.

### Embed payment links and buttons

GoCardless provides shareable payment links that redirect customers to hosted payment pages. This method works for one-off payments, donation collection, or simple subscription signups without requiring API integration or custom code.

The GoCardless payment button guide explains how to generate payment links from your GoCardless dashboard and embed them as clickable buttons in Webflow. Download branded button assets from the GoCardless dashboard or contact GoCardless support for official payment button graphics.

Implementation steps:

• Generate payment link in GoCardless dashboard for specific product or subscription

• Add image or button element to Webflow page

• Link button to GoCardless payment URL

• Customer completes payment on GoCardless-hosted page

  Limitations:

• Requires redirecting customers to GoCardless payment pages instead of using a custom Webflow payment form

• GoCardless customer and payment data does not sync automatically to Webflow CMS—manual API integration is required

• Payment page appearance cannot be customized within Webflow; styling is limited to GoCardless's standard payment interface

• Manual process required to track and reconcile payments between GoCardless and Webflow CMS

  This approach requires a paid Webflow site plan to use the Custom Code Embed element.

  Build with Webflow and GoCardless APIs

  Custom API integration with GoCardless enables Webflow developers to create customers, authorize mandates, process payments, and sync status updates back to Webflow CMS collections. GoCardless API documentation shows this requires custom code development using endpoints like POST /customers, POST /mandates, and POST /payments, with status updates synchronized via PATCH requests to Webflow CMS items. For non-technical users, GoCardless billing request flows can be embedded directly in Webflow pages using Custom Code Embed elements, allowing payment collection without external redirects, though Webflow does not natively support GoCardless as a payment processor.

  The GoCardless API provides RESTful endpoints for payment operations with bearer token authentication (an access token included in request headers to verify identity) and requires the GoCardless-Version: 2015-07-06 header. The Webflow API enables form submission retrieval, CMS item management, and webhook configuration for event-driven workflows, with webhook support for triggers including form_submission, collection_item_created, and e-commerce events.

  Common implementation pattern: Webflow webhook triggers on form submission, serverless function (code that runs on-demand without managing servers) retrieves submission data through the Webflow Form Submissions API, creates GoCardless customer and mandate, then updates Webflow CMS collection with payment status.

  Process one-off payments

  One-off payments work for product purchases, invoices, or donation collection. You collect customer details through Webflow forms, create a GoCardless customer record using the Customers API, create a mandate using the Mandates API to authorize direct debit, then process the payment using the Payments API.

  Use POST /customers to create customer records. Create payment authorization with POST /mandates linking to the customer ID. Process the charge with POST /payments following the one-off payment guide.

  Store payment confirmation in Webflow using POST /collections/{collection_id}/items to create CMS records with GoCardless payment IDs, amounts, and status fields.

  Required for EU/UK SEPA Direct Debit payments:

  For SEPA Direct Debit compliance, the SEPA payment pages guide specifies you must collect First Name, Last Name, Account Holder Name, Address, and IBAN fields. Display the electronic mandate before submission and provide 3-14 days pre-notification before collecting payment.

  Set up subscription billing

  Subscription payments enable recurring billing for memberships, SaaS products, or ongoing services. GoCardless handles automatic collection on scheduled intervals with intelligent retry logic for failed payments.

  Create customer and mandate using the same process as one-off payments. Then use POST /subscriptions to establish recurring billing schedules. Amounts must be specified in minor currency units (pence for GBP, cents for EUR/USD).

  Manage subscription lifecycle with GET /subscriptions/{id} for status checks and POST /subscriptions/{id}/actions/cancel for cancellations (requires Authorization: Bearer YOUR_ACCESS_TOKEN and GoCardless-Version: 2015-07-06 headers). Update Webflow CMS records using PATCH /collections/{collectionid}/items/{itemid} with cms:write scope when subscription status changes.

  Enable automatic payment recovery by setting retry_if_possible: true in payment requests. GoCardless's Success+ feature automatically retries failed payments using optimal timing to improve collection rates.

  Sync payment status with webhooks

  GoCardless webhooks enable real-time payment status updates to Webflow CMS. The GoCardless webhook documentation provides real-time event notifications for payment and subscription activities. Your webhook handler receives event payloads with payment IDs, status changes, and customer references.

  Supported payment events:

• payment:created

• payment:confirmed

• payment:failed

• payment:cancelled

• payment:charged_back

• payment:paid_out

  Supported subscription events:

• subscription:created

• subscription:cancelled

• subscription:paused

• subscription:resumed

• subscription:expired

  Configure Webflow webhooks using POST /sites/{site_id}/webhooks to trigger on form_submission or collection_item_created events. The webhook limits documentation specifies a maximum of 75 webhook registrations per trigger type per site.

  Build bidirectional sync through custom API development: Webflow form submissions can trigger GoCardless payment creation via the Webflow API and GoCardless API, then GoCardless webhooks (such as payment:confirmed and payment:failed events) update Webflow CMS items with payment confirmation. Note: This requires custom code implementation as Webflow does not natively support GoCardless—integration requires custom API development.

  Import existing customers to GoCardless

  Retrieve customer records from Webflow CMS collections and create matching GoCardless customer entries using the POST /customers endpoint, then update Webflow items with GoCardless customer IDs using PATCH /collections/{collection_id}/items/{item_id}.

  Use GET /collections/{collection_id}/items with pagination to retrieve customer data. The API returns a maximum of 100 items per request. Process customers in batches using POST /customers for each record.

  Store GoCardless customer IDs back in Webflow with PATCH /collections/{collectionid}/items/{itemid} to maintain linked records across both systems. This enables future payment processing without recreating customer entries. Authentication requires cms:write scope, and partial updates work without requiring all fields to be present in the request.

  Authentication requirements:

  GoCardless requires bearer tokens in the Authorization header with GoCardless-Version: 2015-07-06 for all requests. Review the GoCardless authentication documentation for token generation.

  Webflow uses site tokens for single-site access or OAuth 2.0 for multi-site applications. Site tokens expire after 365 days of inactivity. Check the Webflow Authentication documentation for complete token management guidance, including authentication methods and scope requirements.

What you can build

Based on GoCardless API capabilities and Webflow's CMS features, possible implementation examples include:

• Membership subscription site: Build a fitness coaching platform where users complete a Webflow form to sign up, GoCardless processes monthly membership payments (requires custom API integration via Custom Code Embed, as Webflow does not natively support GoCardless), with member status updates in Webflow CMS collections based on payment confirmation webhooks

• Donation collection page: Create a nonprofit donation page with preset or custom amount options where donors submit payment details through Webflow forms, GoCardless processes one-off direct debit payments via embedded payment links or custom API integration, and donor records sync to Webflow CMS for thank-you email automation

• SaaS billing dashboard: Develop a customer portal where users manage subscription plans stored in Webflow CMS, upgrade or downgrade triggers GoCardless subscription updates through custom API calls, and payment history displays in custom Webflow collection pages (requires developer resources as no native integration exists)

• Invoice payment system: Design an invoicing workflow where invoice data lives in Webflow CMS collections, clients receive payment links generated from GoCardless, and payment confirmation webhooks automatically mark invoices as paid in the CMS (webhook setup requires Custom Code Embed)