Search...
Log inGet started
Airwallex logo
Home
Core API
Payments
Transactional FX
Payouts
Issuing
Back to home
OverviewChoose your payments solutionGet started with payments
Online payments
Online payments overviewGet started with online paymentsHosted Payment Page
Drop-in Element
Embedded Elements
Card Element
Split Card Element
Full Featured Card Element
Redirect Element
QR Code Element
Mobile SDK
Plugins
Native API
Automatic Currency Conversion
Invoice integrations

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 ElementQR code > a QR code displayed for the shopper to scan and pay using e-wallets (Alipay, Dana, KakaoPay, etc)QR Code Element

Compare features

FeaturesCardSplit CardFull Featured CardDrop-inQR CodeRedirect
UI customizationCustomize full appearanceCustomize full appearanceCustomize full appearanceLow customizationCannot customize the Refresh buttonCannot customize the Checkout Now button
Mobile support✅ (WebView only)
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)
PaymentIntent confirmationManualManualAutomaticAutomaticAutomaticAutomatic
Handles 3D Secure authentication✅ (for card payments)
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--

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 tutorials for each Embedded Element. For saving shopper's payment details for future payments, see registered user checkout tutorials.

Embedded ElementGuest user checkoutRegistered user checkout
Card ElementGuest user checkoutRegistered user checkout
Split Card ElementGuest user checkoutRegistered user checkout
Full Featured Card ElementGuest user checkoutRegistered user checkout
Redirect ElementGuest user checkoutRegistered user checkout
QR Code ElementGuest user checkoutRegistered user checkout

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 when using Embedded Elements. See Checkout flow to explore the registered checkout integration steps for each Embedded Element.

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
  • Checkout flow
  • FAQ
  • Development resources