Drop-in Element
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.
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.
If you want to save shopper's payment details for future payments, see Registered user checkout.
FAQ
How do I customize the Drop-in 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 src, family and weight attributes.
You can also customize styles for the dropIn Element using style.
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 increateElement(). Contains the list of payment methods you want to offer the shopper.currencyandcountry_codepassed increateElement(): 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.