Pay

Contents

– User needs
– How it works
– Status
– Accessibility statement
– Examples
– Research into this pattern
– Discuss this pattern

---

User needs

This pattern informs the user when they are about to make a payment and to be notified when they have successfully or unsuccessfully made a payment.

The pattern includes:

• the handover page to the third-party payment system
• the success of a payment
• failure of payments: payment declined or payment unsuccessful

How it works

The Pay pattern provides users with relevant information when being handed over to the third-party payment system.

Handover to third-party payment system

Prior to the payment users will be able to review the amount before being handed over to payment on a third-party system page. Informing the user before payment will build trust and confidence when going to an external payment page.

Handover page must include:

• the amount that the user is paying
• instructions on what is going to happen next

Visit the 'Pay' handover page in Axure for more information.

End-point - Payment unsuccessful

This page is used when there is an unexpected technical error with the service or website.

End-point - Payment unsuccessful due to a technical error, it must include:

• H1: We’re sorry, there was a problem with the payment
• Body text: No money has been taken from your account, please try again if you want to continue
• include a primary button: Try the payment again
• include a secondary button: Go to the homepage

Do not include:

• Breadcrumbs
• A – Z

Visit the End-point - Payment unsuccessful page in Axure for further information.

End-point - Payment declined

Use this when a user’s payment process has failed.

End-point - Payment declined must include:

• H1: Your payment was declined
• Body text example: Contact your bank for more details. No money has been taken from your account.
• What the user must do next – for example, 'Contact your bank'.
• include a primary button: Try the payment again
• include a secondary button: Go to the homepage

Do not include:

• Breadcrumbs
• A – Z

Visit the End-point - Payment declined page in Axure for further information.

Success page

Reassure users that they have completed a transaction and help them understand what to expect next. The content will change depending on the logic of the user through the form.

Success page must include:

• a reference number, if there is one
• what happens next
• include a primary button: Go to the homepage

Do not include:

• Breadcrumbs
• A – Z

Visit the 'Pay' Success page in Axure for further information.

Success page content

Logic: if an email address is mandatory:

'We’ve sent you an email confirmation with this information.'

Logic: If an email address is optional:

'If you provided your email address when you made your payment, you’ll receive an email receipt.'

Visit the 'Pay' Success page in Axure for further information.

'Pay' email content

For information on 'Pay' email content, visit the Pay journey and email IAG page in Axure

---

Content for if making a booking:

'Your appointment is:
at [time]
on [full date, for example 'Wednesday 15 January 2020']
at [include address of appointment]

Please keep a record of these details as you’ll need them if you want to contact us about your #### [booking/payment/order/appointment]

If required:

H2: What happens next

Notes to the content author: You should include information that is helpful to the user about what they need to do next, and could include:

• What they need to take to the appointment
• When the item will be delivered
• How to change or cancel a booking/payment/appointment

For further information on content for if making a booking, visit the GitHub Design Patterns Book pattern and the Book Axure pattern

---

My Account IAG (if needed)

H3: Manage your information in My Account

'You can view your personalised Council tax information in My Account. You'll be able to view and download your latest bills and see all of your past transactions.'

Or:

H3: Manage your Council Tax in one place

‘You can use My Account to view and manage your personalised Council Tax information. You’ll be able to view your upcoming payments and manage how you receive your bills’

Primary button: Go to My Account Secondary button: Go to the homepage

Rules:

Only provide the ‘go back to homepage’ CTA button if there are no other primary CTA’s on the page. If there is only one My Account CTA then you can have the ‘Go back to homepage’ button too.

If there is a primary CTA such as a 'document upload' button then don’t provide the ‘go back to the homepage’ button as well – as we want users to use the document upload. Three CTA buttons would be confusing to the user. You could provide a secondary CTA button: ‘Go to My Account’.

---

Status

Working progress

Accessibility statement

This pattern has a rating of AA

Please see our accessibility statement.

Improvements

To make it AAA, we need to:

• Add...

Examples

Axure mockup - Pay

Research into this pattern

For the development of this pattern, we looked closely at: ##

Discuss this pattern