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 .
Go to the Airwallex demo store and click the settings icon on the right-hand side of the page
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.
Click Confirm on each field to submit your configuration.
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  | Split Card > individual card input fields including card number, expiry, and security code  |
Full Featured Card > a multi-input field container with card number, expiry, security code, name on card, and a checkout button  | Drop-in > a container of payment methods for shoppers to choose from  |
Redirect > a checkout button that redirects shoppers to a specified payment method  | ApplePay > ApplePay button displayed for the shopper to pay using Touch ID or Face ID |
QR code > a QR code displayed for the shopper to scan and pay using e-wallets (Alipay, Dana, KakaoPay, etc) | WeChat > a WeChat Pay QR code displayed for the shopper to scan and pay using WeChat app |
Compare features
| Features | Card | Split Card | Full Featured Card | Drop-in | QR Code | Redirect | Apple Pay | |
|---|---|---|---|---|---|---|---|---|
| UI customization | Customize full appearance | Customize full appearance | Customize full appearance | Low customization | Cannot customize the Refresh button | Cannot customize the Checkout Now button | Cannot customize the Refresh button | Can customize button type and button color |
| Mobile support | ⛔ | ⛔ | ⛔ | ✅ (WebView only) | ⛔ | ⛔ | ⛔ | Will be available soon |
| Supported payment methods | Credit/Debit card | Credit/Debit card | Credit/Debit card | All payment methods configured on your merchant account | E-wallets (Alipay, Dana, KakaoPay, etc) | E-wallets (Alipay, Dana, KakaoPay, etc) | WeChat Pay | Apple Pay |
| PaymentIntent confirmation | Manual | Manual | Automatic | Automatic | Automatic | Automatic | Automatic | Automatic |
| Handles 3D Secure authentication | ✅ | ✅ | ✅ | ✅ (for card payments) | ⛔ | ⛔ | ⛔ | ✅ (no redirect to issuer instead uses biometric authentication) |
| Save payment details for future payments | ✅ | ✅ | ✅ | ✅ | AlipayHK, 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.
Development resources
airwallex-payment-elementsNPM packageairwallex-payment-elementslibrary reference JSSample SDKs JS in various frontend and backend languages
Test cards and sandbox to test your integration