Airwallex logo

Hosted Payment Page Integration

The Hosted Payment Page integration enables Merchants to redirect customers to an Airwallex-hosted checkout page. Merchants can accept payments by delegating the full handling of payment processing and display of payment options to Airwallex, supporting merchants without a full PCI-DSS certification (those who can only fulfill a PCI-DSS SAQ).

The following steps will give you a high-level overview of implementing a Hosted Payment Page checkout. Refer to our Hosted Payment Page guide for the complete details of the integration. This integration uses our lightweight Javascript SDK, airwallex-payment-elements .

  1. Create a Payment Intent through the Airwallex API - see full details here . To execute a payment checkout, we must have a Payment Intent that captures the details of the checkout, including the currency and amount you wish to charge your customer. We will need the intent_id and client_secret to checkout.

See how to create a payment intent with the Airwallex API for an example of intent details.

  1. Integrate with airwallex-payment-elements to redirect your customer to an Airwallex payment page with the Airwallex redirectToCheckout function. Place in the intent_id and client_secret retrieved in the previous step to redirect your customer to their payment page.

You can customize the look and feel of the Hosted Payment Page by providing fonts, and also redirect customers back to your site after the payment by providing the successUrl, failUrl, and cancelUrl options.

When this function is triggered, Airwallex will take care of redirecting your customer, helping your customer select the most appropriate payment method, collecting their payment details, and eventually triggering the authentication. You need to do nothing, besides providing the intent details, to collect payments from your customers.

See the HPP integration guide for more details on customizations.

  1. Upon payment completion, your customer will be redirected to the successUrl or failUrl provided in the previous step (or default Airwallex success or fail or cancel pages if you don’t provide the respective urls). The final status of your payment will be sent to the endpoint you configured.

Your customer will be redirected to your return success or fail or cancel url, which will be appended with the payment intent id.

https://your-website-host/your-success-path?id=int_xxxxx

Ready to integrate? See our copy-paste ready demos for 5 different web frameworks!