Log inGet started
Airwallex logo
Home
Online Payments
Treasury
Transactional FX
Payouts
Issuing
Scale
Open Banking
Developer Tools
API Reference
Home
Online Payments
Overview
Starting with paymentsAirwallex platform overviewOnline payments modelPricing model
Integration options
Pay by LinkHosted Payment PageEmbedded ElementsDrop-in ElementMobile SDKNative APIPlugins

Embedded Elements

Embed UI components into your checkout page to collect payment details from shoppers.

The Embedded Elements integration option allows you to create your own checkout flow using prebuilt UI components. It’s available as a feature of airwallex-payment-elements JavaScript library that also offers other payment flows such as Hosted Payment Page. The airwallex-payment-elements SDK tokenizes and handles payment details entered by your shopper thereby reducing your PCI-DSS compliance costs.

Key features include:

  • Automatic input formatting as shoppers type their card details (card number, expiry, security code)

  • 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 experience

Airwallex provides various integration options to accept payments using Embedded Elements as shown below. Alternatively, you can explore the checkout experience offered by the different Embedded Elements on the Airwallex demo store .

  1. Go to the Airwallex demo store and click the settings icon on the right-hand side of the page

  2. Enter the amount, currency, and select an Embedded Element from the Integration Element drop-down list. For demo Client ID and API key contact your Airwallex Account Manager.

  3. Click Confirm on each field to submit your configuration.

  4. Click Checkout to view the checkout experience for the configured Embedded Element.

Card > a single-line multi-input field with card number, expiry, and security code  Card Element VisualSplit Card > individual card input fields including card number, expiry, and security code Split Card Visual
Full Featured Card > a multi-input field container with card number, expiry, security code, name on card, and a checkout button Full Feature Card ElementDrop-in > a container of payment methods for shoppers to choose from Drop-in Element
Redirect > a checkout button that redirects shoppers to a specified payment method Redirect ElementApplePay > ApplePay button displayed for the shopper to pay using Touch ID or Face IDApplePay Element
QR code > a QR code displayed for the shopper to scan and pay using e-wallets (Alipay, Dana, KakaoPay, etc)QR Code ElementWeChat > a WeChat Pay QR code displayed for the shopper to scan and pay using WeChat appWeChat Element

Compare features

FeaturesCardSplit CardFull Featured CardDrop-inQR CodeRedirectWeChatApple Pay
UI customizationCustomize full appearanceCustomize full appearanceCustomize full appearanceLow customizationCannot customize the Refresh buttonCannot customize the Checkout Now buttonCannot customize the Refresh buttonCan customize button type and button color
Mobile support✅ (WebView only)Will be available soon
Supported payment methodsCredit/Debit cardCredit/Debit cardCredit/Debit cardAll payment methods configured on your merchant accountE-wallets (Alipay, Dana, KakaoPay, etc)E-wallets (Alipay, Dana, KakaoPay, etc)WeChat PayApple Pay
PaymentIntent confirmationManualManualAutomaticAutomaticAutomaticAutomaticAutomaticAutomatic
Handles 3D Secure authentication✅ (for card payments)✅ (no redirect to issuer instead uses biometric authentication)
Save payment details without a paymentAlipayHK, KakaoPay (merchant-initiated transactions only)Alipay, AlipayHK, Gcash, Dana, KakaoPay, Touch ‘n Go (merchant-initiated transactions only)--
Save payment details during payment----

FAQ

What level of PCI-DSS compliance is required to implement Embedded Elements?

To accept payments via Embedded Elements integration, you will need PCI-DSS SAQ A certification. It’s a self-assessment questionnaire that requires renewal at regular intervals in line with the policy. For more information, visit the PCI council website or contact Airwallex support.

Can I create a PaymentConsent while using Embedded Elements?

Yes, you can create a PaymentConsent with the shopper to initiate future payments using shopper’s saved payment details, while using Embedded Elements. But the support depends on the Element type you are integrating with. See Compare features section for details.

What payment methods are supported via Embedded Elements?

This depends on the Element type you are integrating with. See Compare features section.

Can I integrate Embedded Elements into mobile apps?

You can integrate Embedded Elements into mobile apps via WebView only. For native integrations, check out the iOS and Android SDKs.

On this page
  • Checkout experience
  • Compare features
  • FAQ
  • Development resources