GoCardless Components
GoCardless Components let you embed Direct Debit mandate setup directly inside your own checkout. Your customer fills in their details and authorises the mandate without leaving your site or app, while GoCardless handles compliance, payer verification, and form validation behind the scenes.
Components sit between our Hosted payment pages and Custom payment pages: more brand and UX control than a Hosted page, far less build effort than a fully custom integration.
Please note: Components currently supports Bacs (UK) Direct Debit mandate setup only. We are working on expanding the scheme coverage to SEPA. If you collect payments under other schemes, Hosted or Custom payment pages are available.
When to choose Components
Components are a good fit when:
You want customers to set up their Direct Debit without leaving your website or app
Maintaining a consistent brand experience through checkout matters to your business
You want to fine-tune your checkout's design (colours, fonts, spacing) without building from scratch
The primary action is setting up a recurring Direct Debit mandate
You want easy maintenance and updates, without rebuilding your integration each time
What Components include
Out of the box, Components provide:
An embedded mandate setup flow that mounts inside your existing checkout
A compliant mandate authorisation flow that meets scheme requirements
Brand customisation through colours, fonts, borders, button styling, and more
Optional prefill of customer details from your own systems
Built-in form validation, error handling, and retry behaviour
Matching Components to your brand
Components is styled and ready to use out of the box, so there's no design work needed to get started. When you're ready to make it feel like your product, you can adjust:
Background, text, and button colours
Fonts and font sizes
Border radius and padding
A full reference of customisation options is available in our developer documentation.
Because the mandate authorisation flow itself must remain scheme compliant, certain elements, such as fields and legal copy, cannot be altered.
Ready to build?
Components are available to be implemented by your development team. Our Components developer guide covers everything they'll need: installing the library, generating tokens, embedding Components in your checkout, and applying your branding, with working code samples throughout.