Payment page

Date adopted: 
January 28, 2019
Last update: 
March 12, 2025

A Payment page is the point in a transaction where the government collects payment card details from users.

Why we have a design pattern for Payment pages

We have a design pattern for payment pages so users:

  • are confident the payment process is secure;
  • know what the charge is, what their payment options are and if the fee is refundable or not;
  • have a smooth transition from the digital service to the payment service and back; and
  • can see if the payment was successfully processed or not.

When to use a Payment page

Use the Payment page for all services that have online payment. You will have to complete PCI compliance for online payments.

When not to use a Payment page

Do not use a Payment page if you do not collect online payment via the service.

How Payment pages work

The government uses Worldline Online Payments (formerly called Bambora) for the online checkout and payment process.

When a person gets to the point in the service where they need to checkout and pay they are redirected to the Worldline Online Payments interface. After the payment is collected the user is redirected to the service Confirmation page.

Placement

The Payment page should go after a Check answers page and before a Confirmation page.

Style

Use the primary button to link users to pay online

Language

There are a few key pieces of content to include in a Payment page.

Text to use for payment options

You will substitute these payment options with ones specific to your service.

"Our payment service accepts Visa, MasterCard or American Express."

Text to use to indicate the payment is non-refundable

Use bold text and substitute the correct words to describe the service.

For example: “Application fee is non-refundable.” or “License and application fees are non-refundable.”

Text to let uses know they will exit to the payment service

“This link will take you to the government’s secure payment. Once the payment is processed, you’ll be redirected back to this service.”

Text to use for the button linking to the payment service

The text you use may vary based on the platform used. For consistency, use “View cart and pay” or “Pay.”

Text to use after the payment button to let people know they can cancel payment

"Once you're in the secure payment you will have the option to cancel the payment if you decide not to proceed."

Example of how to include these details on a Payment page

This is an example of how you can include these details at the bottom of a Payment page.

A screen shot showing how to incorporate contextual information at the bottom of a payment page