GoCardless Components
GoCardless Components are embeddable building blocks that bring Direct Debit mandate setup natively into your own checkout. Your customers complete the entire sign-up flow inside 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: you get more brand and UX control than a Hosted page, with significantly less build effort than a fully custom integration.
Please note: GoCardless Components currently supports Bacs (UK) Direct Debit mandate setup only. If you collect payments under other schemes, please use Hosted payment pages or Custom payment pages instead.
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 sign-up matters to your business
You want more design control than a Hosted page allows, but don't want to build a fully custom payment page from scratch
Your primary action is setting up a recurring Direct Debit mandate under Bacs
If you collect payments outside the UK or work across multiple Direct Debit schemes, Hosted or Custom payment pages are likely a better fit today.
What Components include
Out of the box, Components provide:
An embedded mandate setup flow that mounts inside your existing checkout
Built-in form validation, error handling, and retry behaviour
A compliant mandate authorisation flow that meets Bacs scheme requirements
The ability to pre-fill customer details from your own systems
Brand customisation through colours, fonts, borders, button styling, and more
Designing your Components experience
Components are styled and ready to use out of the box, so you don't need to write any custom design code to get started. When you're ready to match them to your brand, a wide range of appearance settings is available, including:
Background, text, and button colours
Fonts and font sizes
Border radius and padding
Hover and validation states
A full reference of customisation options is available in our developer documentation.
Because the mandate authorisation flow itself must remain Bacs-compliant, certain elements, such as the confirmation step and the Direct Debit Guarantee,cannot be altered.
Ready to build?
Before beginning development using GoCardless Components, please ensure you have contacted your account manager to request access to the GoCardless Components upgrade.
Components are implemented by your development team. Our Components developer guide covers everything they'll need: how to install the library, generate a public token, embed Components into your checkout, and apply your branding, with working code samples throughout.