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
The diagram below depicts the information flow in a Hosted Payment Page integration.
Before you implement the integration, consider the following:
Contact your Airwallex Account Manager to enable payment acceptance using Hosted Payment Page for your merchant account.
Obtain your access token API by authenticating to Airwallex using your unique Client ID and API key. You will need the access token to make API calls.
airwallex-payment-elementspackage using Yarn or NPM
yarn add airwallex-payment-elements
npm install airwallex-payment-elements
Create a PaymentConsent if you want to save shopper’s payment details for future payments.
When the shopper begins the checkout process, you will need to create a PaymentIntent object to indicate your intent to collect payment from the shopper.
When the checkout page loads, on your server, call Create a PaymentIntent API API with an amount and currency. Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious shoppers from being able to alter the payment amount.
return_url in Create a PaymentIntent API if you want to offer alternative payment methods (Alipay, Dana, KakaoPay, etc) that redirect shoppers to a partner site. The shopper will be returned to the
return_url after the payment is complete, whether successful or otherwise.
client_secret are returned in the response — these parameters let you confirm the payment and update card details on the client, without allowing manipulation of sensitive information, like payment amount.
First, you will need to import the
airwallex-payment-elements SDK and then initialize the package. For details, see Initialize Airwallex JS.
Upon completing the payment, your shopper will be redirected to one of these URLs,
cancelUrl, provided in
redirectToCheckout( ) method, and the PaymentIntent id will be appended to the URL.
For any actions subsequent to the payment such as shipping goods or sending email receipts, you can retrieve the payment result using the following options:
Set up webhooks to receive notifications on whether the payment has succeeded. Airwallex sends payment_intent.succeeded event when a payment succeeds. Listen to these events rather than waiting on a callback from the client. On the client, the shopper could close the browser window or quit the app before the callback executes. For information on how to set up webhooks and listen to events, see Getting started with webhooks
On your server, call Retrieve a PaymentIntent API to check the PaymentIntent status.
Check Payment Activity screen on your Airwallex web app.
Explore a full, working code sample of an integration built using various web frameworks JS.
You can add the following features to your Hosted Payment Page integration.
You can configure the Hosted Payment Page to display localized text of the payment fields based on the locale set in
redirectToCheckout(). For supported locales, see the
locale property JS.
Some common scenarios include :
|Airwallex is not defined||Check if you have initialized Airwallex (Step 2) before using Airwallex functions. If you are using CDN, check if you have changed the bundle version from x.x.x to the latest version in the |
|Access denied, authentication failed||Check if you have replaced your intent |
|The PaymentIntent with ID int_xxxxxxxxx cannot be found||Check if the environment you initialized Airwallex in, for example, demo or prod, matches the environment you retrieved your intent |
All payment methods configured on your merchant account are supported. The list displayed to the shopper on the payment form is filtered based on the following fields:
currency passed in
redirectToCheckout(). Contains the list of payment methods you want to offer the shopper.
redirectToCheckout()for payment methods such as online_banking, bank_transfer, seven_eleven, skrill, sofort, trustly, paysafecash, paysafecard, satispay, paysera, paypal, bitpay
You can provide the
theme object in
redirectToCheckout() to customize the font styles of the Hosted Payment Page. Airwallex supports two font weights: regular (400) and bold (700). You can specify font options using
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. Once registered, you can pass
applePayRequestOptions JS in
redirectToCheckout to offer Apple Pay. Note that
countryCode is mandatory.
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. Once registered, you can pass
googlePayRequestOptions JS in
redirectToCheckout to offer Google Pay. Note that
countryCode is mandatory.