Adding Citizen to your payment page

We offer a range of flexible UI options for integrating Citizen into the payment experience on your site or app.

We want to make it as easy as possible for businesses to get started with Open Banking payments. That's why, as well as the option to create your own custom payment UI, we offer a tried and tested payment widget, that can be customised to suit your customer experience.

Give it a try! Our component builder lets you easily customise and try the options listed here for yourself. Go to component builder


onpage-f75e4ff3This option adds Citizen payments widget directly to the payment page, with all the information the customer needs to understand what an Open Banking payment is.

This works best when you have a dedicated payments page with space to set customer expectations, and explain Open Banking payments (key for building confidence and conversion).


modal-677708abThis method takes the payment widget and puts it in a modal which will open with the payment information when the 'pay with bank' button is clicked.

This is best when you have less space available on your payment page, while still optimising for conversion and customer confidence.

Window (best for apps 📱)


The new window option is best for mobile apps. This takes the same payment experience and hosts it in a new window away from the application when they pay button is clicked.

This means there are no separate Android, iOS or web app integrations to manage.

Custom 🔧

custom-fa20dc55Of course you can always start from scratch and build something unique to your site.

We’ll be on hand to help advise on best practices and share learnings from our own user research on what best boosts customer confidence and understanding.

Ready to get started? Head over to our developers page and see how easy it is to set up open banking payments with Citizen