Secure, Fast, easy payments

Pay securely from your bank account. No cards. No typing. No accounts to create.

Scan the QR code

Use your phones camera to scan the QR code and we'll take you to a secure webpage where you select your bank.

Select your bank

We'll automatically transfer you to your banking app or website with the payment information prefilled.

Approve the payment

Use your face or fingerprint to approve the payment.

Choose Instant cardless payment at checkout

We'll take you to a secure webpage where you select your bank

Select your bank

We'll automatically transfer you to your banking app or website with the payment information prefilled

Approve the payment

Use your face or fingerprint to approve the payment

Regulated by the FCA

UX best practice

Learn how to display Instant cardless payment on your payment page to maximise conversion

Introduce Instant cardless payment pre-checkout

Encouraging your customers to choose "Instant cardless payment" at checkout is better for both you and them. For you it’s more cost-effective, funds arrive in your account within seconds and the risk of chargebacks is reduced. For your customers, they don’t need to type anything and it’s more secure then cards, meaning less fraud.

Before your customers arrive at your payment page, we recommend familiarising them with "Instant cardless payment" by promoting it. You could use an email campaign, social posts or what ever your preferred channel is. Introduce the new payment method, explain the benefits of paying with via an "Instant cardless payment"; it’s safe, secure, fast and easy to use. We have recommended messaging that you can use. Then, when your customers see "Instant cardless payment" on the payment selector page they will already be familiar with it and are more likely to select it.

Instant cardless payment selector components

Payment descriptor. Instant cardless payment is our payment descriptor label. We don’t recommend using open banking or Citizen. Some users may not know what open banking is and most won’t be familiar with Citizen. From our research, referencing Citizen at this stage can make users think the payment journey requires more steps than it actually does.

Tag line. From your existing bank app | No typing. "Instant cardless payment" will introduce the user to a brand new payment experience they probably won’t have seen before. This supplementary text provides enough information to generate a mental model of what the payment journey involves (and doesn’t involve) without overloading the user with too much detail.

Learn more link. We use progressive disclosure to provide users with more information when they need or want it. For your convenience we have a pre built webpage containing more detailed information on "Instant cardless payments". Clicking "Learn more" should bring up a modal containing this webpage in an iframe. 

Supported bank logos. The bank logos are recognisable and instil trust within the user. We have a selection of bank logo images for different countries.

Payment badge. If your payment page allows one, we suggest using a bank icon with a lightning bolt, or similar. This can be in your UI style. We don’t recommend using the Citizen logo as it’s not a familiar brand.

Live layout examples

Click around the demo below to see how "Instant cardless payment" can be displayed in different layouts.

Instant cardless payment

From your existing bank app | No typing | Learn more

Regular bank transfer

View our bank details then make a transfer from your bank

Card

Klarna

Pay in 3 interest-free payments of £25.00

Paypal

You'll be taken to Paypal to complete your purchase then brought back here

Instant cardless payment

From your existing bank app | No typing

Regular bank transfer

Card

Pay

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Regular bank transfer

Card

Download our payment page assets

We suggest using a bank logo image in every integration as the logos are widely recognised and trusted. You can use different images for mobile and desktop.

Bank icon

If you use this asset, feel free to change the colour to match your brand.

"Learn more" iframe

We recommend always including the "Learn more'" text link or "i'" link next to the payment label or tagline. Insert this iframe in a modal.

<iframe src="https://www.paywithcitizen.com/learn-more-modal" width="100%" height="100%" frameborder="0"></iframe>

<iframe src="https://www.paywithcitizen.com/learn-more-modal" width="100%" height="100%" frameborder="0"></iframe>

Copy

Payment selector page best practice

There are some optimisations that you can do to your checkout page as a whole to help with the adoption of "Instant cardless payment" and lower your payment acceptance costs.

Payment method order. We recommend having "Instant cardless payment" as the first payment option at checkout as this gives the payment method maximum importance on the page.

Pre-select and "Recommended" flag. Pre-selecting "Instant cardless payment" lowers the interaction cost and reduces the choice users need to make whilst a "Recommended" or "New" flag increases the likelihood of the user interacting with the payment method.