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.
