AMP: Building Accelerated Mobile Pages

Preparing the payment request

The next thing we need to do is set up the iframe source page. This will be a non-AMP page that:

1. Displays a checkout button.
2. Fetches the user's cart from the server.
3. Executes the JavaScript we need to set up the payment request.

There's some JavaScript to work through in this example. We'll only highlight the important parts here and you can see the full code for the amp-iframe at /ch9/checkout.html.

The first part is easy. We can add a button like this:

<button id="btn-pay">Checkout</button>

Before we do anything with the Payment Request API, we should check for support using window.PaymentRequest. If it's not supported, the user should be redirected to a non-AMP alternative checkout:

if (!window.PaymentRequest) ...