The Drop-in Element is a UI component that lets you accept multiple payment methods with a single integration. Whether you’re just collecting card payments or using multiple payment methods, the Drop-in Element provides an easy solution to build a customised payments experience. Accepting more payment methods can help your business expand its global reach and improve checkout conversion.
Key features include:
Automatically adjusts input fields to collect information based on the payment method and country.
Reduces friction for card payments with input validation, styling and error handling.
Adds new payment methods to your payment form without requiring code changes in your integration.
To view the checkout experience offered by the Drop-in Element, go to the Airwallex demo book store , add items to your shopping cart and click Checkout.
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.
If you want to save shopper's payment details for future payments, see Registered user checkout.
How do I customize the Embedded Element?
You can provide the
fonts[ ] option in
init( ) or
loadAirwallex( ) when you initialize Airwallex to customize the font styles of payment Elements. Airwallex supports two font weights: regular (400) and bold (700). You can specify font options using
You can also customize styles for the
fullFeaturedCard Element using
style. With Split Card, you can also customize
What payment methods are supported in a Drop-in Element integration?
By default, all payment methods activated on your Airwallex merchant account are displayed to the shopper. However, you can restrict the payment methods shown using:
components[ ]passed in
createElement(). Contains the list of payment methods you want to offer the shopper.
createElement(): Check the supported processing currencies and countries for each payment method including integration information in the Payment Methods section.
Can I offer Apple Pay via Drop-in integration?
Yes, Apple Pay is supported via Drop-in integration. Ensure that your merchant account is enabled for Apple Pay and you have added your domain information on the Airwallex web app > Payments > Settings. For more information, see Enable Apple Pay. Once registered, you can pass
applePayRequestOptions JS in
createElement to offer Apple Pay. Note that
countryCode is mandatory.
Can I offer Google Pay via Drop-in Element integration?
Yes, Google Pay is supported via Drop-in integration. Ensure that your merchant account is enabled for Google Pay and you have added your domain information on the Airwallex web app > Payments > Settings. For more information, see Enable Google Pay. Once registered, you can pass
googlePayRequestOptions JS in
createElement to offer Google Pay. Note that
countryCode is mandatory.