PaymentRequest.show()

Sorry - Not Available on this Browser

Unfortunately the PaymentRequest API isn't available in your browser. Why not try this on Chrome for Android?

Payment Request API Demo

This demo allows you to play with the various options and inputs you can provide to the PaymentRequest API.

Please note that this demo will not charge you. It'll go through the process and print the details at the bottom of this page.

The values will not add up in the total since the Payment Request API does no calculations.

Select Supported Payment Methods

The Payment Request API has a range of support payment methods, this demo currently only supports basic credit cards but the Payment Request API can support third party payment processors.

Order Summary

The order summary is the value that is shown most prominently to the user, it should be treated as the total of the users transaction.

Change the name, total and current to see how it effects the UI.

The value must be a number.
Display Items

It's possible to define any number of display items in the Payment Request UI.

It's up to you the developer to ensure that the list of items equals the total value shown in the order summary, the Payment Request API performs no calculations.

Try adding both valid and invalid amounts in the display items and the summary total to see the differences.

Options

The API can also request information for the user. The type of transaction will determine will often dictate what is needed.

Shipping Type
Shipping Options

If you require shipping information (i.e. you have the shipping option ticked above) you can provide a set of shipping options for the user to select from.

The UI will require the user to input an address to ship to which you listen to when it changes and accept or deny the address as valid.

Can Make Payment

You can call paymentRequest.canMakePayment() before calling paymentRequest.show() to determine if the PaymentRequest object can be used to make a payment.

paymentRequest.canMakePayment() Result

If you call canMakePayment(), the result will be printed below.

Press the "Can Make Payment" button.
Buy Now

When you are ready to request payment from the user, you call paymentRequest.show(), which is what will happen when you click "Buy Now" below.

paymentRequest.show() Result

If you complete a "purchase" with the payment request API, the result will be printed below.

Press the "Buy Now" button.