Use a pre-built payment page

Hosted Payment Page is a secure, pre-built payment page hosted by Airwallex that lets you accept multiple payment methods with a single integration. Shoppers are redirected to the page to complete the payment. You do not have to worry about collecting or storing shopper’s payment details as Airwallex fully handles the payment processing thereby significantly reducing your PCI-DSS compliance costs.

Key features include:

• Reduces friction for card payments with input validation, styling and error handling.
• Responsive design to fit seamlessly on any screen size
• Custom styling rules so you can match the look and feel of your site
• Reduced PCI-DSS compliance handling costs – a PCI-DSS SAQ A is sufficient

Checkout flow

Choose whether to charge the shopper in a single session on your site or save their payment details for future charges.

Supported features

You can use the following features in your Hosted Payment Page integration.

1redirectToCheckout({
2  locale: "zh"
3})

FAQ

What payment methods are supported in a Hosted Payment Page integration?

By default, all payment methods activated on your Airwallex merchant account are available to the shopper. To retrieve the list of payment methods supported for your account, call Get available payment method types API.

The payment methods displayed on the payment page will be filtered based on the following fields:

• currency JS
• country_code JS

For details on which currencies and countries are supported for each payment method, including integration information, refer to the Payment Methods section.

By default, the order of payment methods on the payment page will be based on the order configured in Get available payment method types API, with applepay, googlepay and paypal displayed at the top if they're supported.

If you want to further restrict the payment methods offered to your shoppers, you can pass the methods[] JS field in redirectToCheckout(). The payment methods will appear in the order specified in this field.

Can I offer Apple Pay via Hosted Payment Page?

Yes, Apple Pay is supported via Hosted Payment Page integration. Ensure that your merchant account is enabled for Apple Pay on the Airwallex web app > Payments > Settings. For more information, see Enable Apple Pay. See applePayRequestOptions JS for more customization options.

1import { redirectToCheckout } from '@airwallex/components-sdk';
2
3redirectToCheckout({
4 // ... other options
5 applePayRequestOptions: {
6   buttonType: 'buy', // Indicate the type of button you want displayed on your payments form. Like 'buy'
7   buttonColor: 'white-with-line', // Indicate the color of the button. Default value is 'black'
8   countryCode: 'HK',  // The merchant's two-letter ISO 3166 country code. Like 'HK'
9   totalPriceLabel: 'COMPANY, INC.', // Provide a business name for the label field.
10});

Can I offer Google Pay via Hosted Payment Page?

Yes, Google Pay is supported via Hosted Payment Page integration. Ensure that your merchant account is enabled for Google Pay on the Airwallex web app > Payments > Settings. For more information, see Enable Google Pay.

See googlePayRequestOptions JS for more customization options.

1const { redirectToCheckout } from "@airwallex/components-sdk";
2
3redirectToCheckout({
4 // ... other options
5 googlePayRequestOptions: {
6  countryCode: "US",
7  merchantInfo: {
8merchantName: "Example Merchant",
9  },
10  emailRequired: true,
11  billingAddressRequired: true,
12  buttonType: "book",
13  buttonColor: "black",
14  buttonSizeMode: "fill",
15
16});