# Payment Walks users through paying a fee, and reports whether it worked. ## Preview ```html title="Payment"

Complete your payment

Check the details below, then continue to payment to finish your submission

Service:
Application fee
Unit price:
$10
Quantity:
2
Amount:
$20

You will be redirected to EZ Pay to securely complete your payment.

``` ```tsx import { Button, Payment } from '@govtech-bb/react'; ; ``` The Payment component summarises a fee before the user pays it (the service, unit price, quantity and total), with a button that takes them to the payment provider, and a note telling them where they are being sent. The itemised rows are a description list (`
`), so screen readers announce each label with its value. React apps can use the `Payment` wrapper from `@govtech-bb/react`. ## Usage

When to use

  • Use the payment component when a user is ready to pay a confirmed fee for a service.
  • Use the outcome variants only after the payment provider returns a verified result.

When not to use

  • Do not use it to publish general fee information; use a table or page content.
  • Do not use a payment outcome to represent an application, account or service status.
## Best practices ### Confirm the amount before redirecting Show the service, quantity where relevant, total amount and currency. Name the payment provider and explain that the user will leave the service to complete payment. ### Give a complete outcome On success, provide a reference, date and next step. On failure, state whether the user was charged and offer a safe route to try again without creating a duplicate payment. Always keep the outcome heading: it is what tells screen reader users the result, since the green or red styling alone cannot. Show the outcome on a fresh page whose title and heading state the result. If the outcome must render on the same page after the provider redirect, move focus to the block or give it `role="status"` so the result is announced. ## Success Show the **success** variant once the payment provider confirms payment. Give the user a reference number and date they can keep, and confirm what happens next (such as a confirmation email). ```html title="Successful payment"

Your payment was successful

Your payment has been received. We've sent a confirmation email to the address you provided.

Service:
Application fee
Amount:
$20
Reference number:
UIGWB248U42
Date:
12 December 2026
``` ## Failed Show the **failed** variant when the payment could not be processed. Reassure the user about whether they have been charged, and give them a way to try again. ```html title="Failed payment"

Unfortunately, your payment was unsuccessful

Your payment could not be processed. You have not been charged.

Try paying again. If the problem continues, check with your bank or try a different payment method.

```