Hosted Payment Page

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

appearance

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

• mode: The appearance mode for the page. 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 page. 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 the page 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 automatically generates a complete set of background colors, including primary, secondary, field, and disabled backgrounds. Defaults to #ffffff (light mode) and #14171A (dark mode).

1redirectToCheckout({
2  intent_id: 'replace-with-your-intent-id',
3  client_secret: 'replace-with-your-client-secret',
4  currency: 'USD',
5  country_code: 'US',
6  appearance: {
7    mode: 'dark',
8    variables: {
9      colorBrand: '#612FFF',
10      colorBackground: '#14171A',
11      colorText: '#FFFFFF',
12    }
13   }
14});

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.

1redirectToCheckout({
2  intent_id: 'replace-with-your-intent-id',
3  client_secret: 'replace-with-your-client-secret',
4  currency: 'USD',
5  country_code: 'US',
6  layout: {
7    type: "accordion"
8  }
9});

Accordion layout on Desktop	Accordion layout on Mobile
Tab layout on Desktop	Tab layout on Mobile

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.

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

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

To collect billing address for cards, use the requiredBillingContactFields JS field in redirectToCheckout() to control which billing fields to collect on the payment page, for example, name, address, phone, email. Hosted Payment Page sends this data with the card payment for AVS/3DS and risk checks.

For wallets (Apple Pay / Google Pay), shoppers store their cards and billing address in their wallet.

• For Apple Pay: When the shopper approves the payment sheet, Apple Pay returns card and billing details to Airwallex. You can control what is collected using requiredBillingContactFields JS field.
• For Google Pay: You can request billing address using billingAddressRequired JS and billingAddressParameters JS fields. Google Pay returns these details once the shopper authenticates.

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.

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.

You can provide specific data fields in Create a PaymentIntent API and Confirm a Payment Intent API endpoints to significantly improve Airwallex's fraud protection performance, ultimately boosting conversion rates and minimizing fraud risk. For more information, see Enhance fraud protection with comprehensive payment data.