Customize the Payment Request Button Depending on Whether User Can Make Payments

In this example, depending on whether the user can make a fast payment or needs to add payment credentials first, the title of the checkout button changes between "W3C Checkout" and "Fast W3C Checkout". This is determined using PaymentRequest.canMakePayment(). In both cases, the checkout button calls PaymentRequest.show().

For the purposes of the demo, imagine you have chosen an item and now you need to check out. Please note that no payments will be taken, this is just a front-end demo. If you would like to try entering card details, you can use dummy data, for example the card number 4111 1111 1111 1111.

Checkout

Payment Request success. Demo complete. No payment has been taken.

The Payment Request API is unsupported or was cancelled or failed. Here we can proceed with a fallback (not implemented for this demo).