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.
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.
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.
The API can also request information for the user. The type of transaction will determine will often dictate what is needed.
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
to determine if the PaymentRequest object can be used to make a payment.
If you call
canMakePayment(), the result will be printed below.
Press the "Can Make Payment" button.
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.
If you complete a "purchase" with the payment request API, the result will be printed below.
Press the "Buy Now" button.