Airwallex logo

W3C Payment Request API

The W3C Payment Request API enables you to provide a native payment and checkout experience in those browsers supporting this technology. All large browsers in the market support today this technology. Compared to other checkout technologies, the Buyers will experience a superior checkout and will be able to leverage the card details that may have been stored on their online accounts with the browser provider.

Technically, you will need to define an html div with an ID paymentRequestButton then create and mount the payment request button element. This element will display a button on your checkout page and the buyer will use it to use the saved payment method from buyer's browser settings and finish the payment.

<!doctype html>
<html>
   <!-- Step #1: Load Checkout Universal Module Definition (UMD) bundle js-->
   <script src="https://checkout.airwallex.com/assets/bundle.0.0.xx.min.js"></script>
 </head>
 <body>
   <h1>Payment request button</h1>
   <div id='paymentRequestButton'></div>
   <script>
     // Step #2: Initialize the Airwallex global context for event communication
     Airwallex.init({
       env: 'demo', // Setup which env('staging' | 'demo' | 'prod') you would like to integrate with
       origin: window.location.origin, // Setup your event target to receive the browser events message
     });
     // Step #3: Create 'paymentRequestButton' element
     const paymentRequestButton = Airwallex.createElement('paymentRequestButton', {
       intent: { // Required, paymentRequestButton use intent Id and client_secret to prepare checkout
         id: 'replace-with-your-intent-id',
         client_secret: 'replace-with-your-client-secret'
       }
     });
     // Step #4: Mount 'paymentRequestButton' element
     paymentRequestButton.mount('paymentRequestButton');
     window.addEventListener('onSuccess', (event) => {
       /*
         ... Handle event
       */
       alert(JSON.stringify(event.detail));
     })
   </script>
   <hr>
 </body>
</html>

As for the Payment request API integration, you must listen to the events of the component to appropriately react to those during your checkout.