Airwallex logo

Embedded Fields Integration

The Embedded fields integration is a set of prebuilt UI components, like inputs and buttons, that merchants can directly integrate into their checkout page. This integration enables merchants to accept payments by partially delegating the responsibility of payment processing to Airwallex while still maintaining control of the overall look and feel of their checkout page. This integration requires a limited PCI-DSS certification. The main distinctive features include:

  • Automatic formatting card information (card number, expiry, cvc) while entered
  • Customizable placeholders to fit your UX design
  • Usage of responsive design to fit the width of your customer’s screen or mobile device
  • Customizable styling to match the look and feel of your checkout flow
  • Limited PCI-DSS scope suitable for partners with a PCI-DSS SAQ

There are currently 5 embedded fields integrations, click on each element for a specific guide on their integration using airwallex-payment-elements :

  • Card , a single row input container with card number, expiry date, and cvc input
  • Full Featured Card , a multi-input field container with card number, expiration date, security code, name on card, and a checkout button
  • Split Card , individual card input fields including card number, expiry date, and cvc
  • QR code , a QR code displayed for user to scan and pay
  • Redirect , a checkout button that redirects customers to a specified payment method

The following steps will give you a high-level overview of implementing a card element. Refer to our Card Element guide for the complete details of the integration, and explore the links above for other element integrations. This integration uses our lightweight Javascript SDK, airwallex-payment-elements .

  1. Create a Payment Intent through the Airwallex API - see full details here . To execute a payment checkout, we must have a Payment Intent that captures the details of your checkout, including the currency and amount you wish to charge your customer. We will need the intent id and client secret to checkout.

See how to create a payment intent with the Airwallex API for an example of intent details.

  1. On your checkout, integrate with airwallex-payment-elements to create a card element using the Airwallex createElement function and a checkout button bound to the Airwallex confirmPaymentIntent function. The card element will collect sensitive payment details from the customer and the checkout button will trigger the actual payment that confirms and fulfills the payment intent. You must provide the intent_id and client_secret in the confirmPaymentIntent function.

See an example of how the card element can be integrated in Static HTML or refer to the Card Element Guide for complete integration details.

  1. Once the element is successfully mounted, the card element will handle the payment process. Upon completion of the checkout, you will receive a promise which will inform you of whether the transaction was successful or ran into an error. You can then process this response and proceed to the next steps of your checkout flow.

Ready to integrate? See our copy-paste ready demos for 5 different web frameworks!