Search...
APIJSLog inGet started
Airwallex logo
Home
Platform APIs
Connected Accounts
Accounts
Payments
Transactional FX
Payouts
Issuing
Embedded Finance Use Cases
Global Treasury
Banking as a Service
Payments for Platforms
Developer Tools
Trust Center
Business Account Help Center
API Reference
Back to home
OverviewChoose your payments solutionGet started with payments
Supported currencies
Online payments
Online payments overviewPayment Method Onboarding RequirementGet started with online paymentsHosted Payment Page
Guest user checkoutRegistered user checkout
Drop-in Element
Embedded Elements
Mobile SDK
Plugins
Native API
Automatic Currency Conversion
Payment Links
Invoice integrations
Manage payments
Payment methods
Test and go live
Troubleshooting
Tax filing

Hosted Payment Page

The Hosted Payment Page integration option redirects your shoppers to a secure, pre-built payment page hosted by Airwallex. It lets you accept multiple payment methods with a single integration. 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

If you want to offer a one-off or single payment experience where the shopper is present and active on your shop site, see Guest user checkout.

If you want to save shopper's payment details for future payments, see Registered user checkout.

Supported features

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

Style and appearance customization

You can customize the look and feel of Hosted Payment Page using the following objects: appearance JS and layout JS.

theme object has been deprecated in @airwallex/components-sdk version 1.19.1, use the appearance object instead.

appearance

You can customize the appearance of your Element to match the design of your website using the following customization options:

  • mode: The appearance mode for the Element. Accepts dark or light modes where each mode provides a different color variable preset and color generation logic. Defaults to light.

  • variables: Set variables to customize the appearance of the Element. Supports three color keys that accept RGB or HEX color formats.

    • colorBackground: Sets the primary text color. This option automatically generates a comprehensive color set, including secondary text, inverse text, disabled text, placeholder text, and more. Defaults to #14171a (light mode) and #F5F6F7 (dark mode).
    • colorBrand: Sets the main accent color used for Elements such as buttons, text links, focus borders, interactive backgrounds, highlights, etc. This color defines your brand's visual identity in the Element. Defaults to #612fff (light mode) and #ABA8FF (dark mode).
    • colorText: Sets the primary background color. This option alautomatically generates a complete set of background colors, including primary, secondary, field, and disabled backgrounds. Defaults to #ffffff (light mode) and #14171A (dark mode).
JavaScript

layout

The layout object supports two options:

  • alwaysShowMethodLabel: By default (false), the payment method icon is hidden when only one payment method is available. Set to true to always display the payment method icon.
  • type: Specify the layout for the payment elements. Defaults to accordion and tab layout on desktop and mobile interfaces respectively.
JavaScript
Accordion layout on Desktop Accordion layout - DesktopAccordion layout on MobileAccordion layout - Mobile
Tab layout on Desktop Tab layout - DesktopTab layout on Mobile Tab layout - Mobile

Localization

You can configure Hosted Payment Page to display localized text for payment fields based on the locale specified in redirectToCheckout(). If no locale is specified, the browser's locale will be used, if it is supported by Airwallex.js. For a list of supported locales, see locale property JS.

If the browser's locale is not supported, the payment page will default to en.

JavaScript

3D Secure authentication

Airwallex automatically handles 3D Secure authentication offering either frictionless or challenge flow depending on the card issuer’s requirements.

Device fingerprinting

Device fingerprinting uniquely tracks and identifies devices used for transacting on your shopping site, increasing your protection from fraud. Airwallex.js automatically handles device fingerprinting, so no additional integration is needed.

Payments for platforms

You can accept payments as a platform via Hosted Payment Page. Example platforms include marketplaces, SaaS platforms, on-demand service providers. For more information on payments for platforms with Airwallex as an acquirer, see Airwallex payment gateway.

If you want the shopper to see the available payment methods activated by the connected account, specify the Connected Account ID in the platformConnectedAccount field in redirectToCheckout().

To use Connected Account information to process the payment, e.g., statement descriptor displayed on the shopper's credit card or bank statement, provide connected_account_id in Create a Payment Intent API.

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:

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.

JavaScript

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.

JavaScript

Development resources

Was this page helpful?
On this page
  • Checkout flow
  • Supported features
  • FAQ
  • Development resources
Was this page helpful?