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
- Wechat , a Wechat pay QR code
- Redirect , a checkout button that redirects customers to a specified payment method
- 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
client secretto checkout.
See how to create a payment intent with the Airwallex API for an example of intent details.
- On your checkout, integrate with airwallex-payment-elements to create a card element using the Airwallex
createElementfunction and a checkout button bound to the Airwallex
confirmPaymentIntentfunction. 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
- 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!