Embed a pre-built checkout element

Copy for LLMView as Markdown

Drop-in element is a pre-built checkout element that lets you accept multiple payment methods with a single integration. Whether you’re just collecting card payments or using local payment methods, the Drop-in element provides an easy solution to build a customized 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

Choose whether to charge the shopper in a single session on your site or save their payment details for future charges.

Accept a payment

One-off payment when the shopper is present and active on your site.

Save and reuse payment details

Save shopper payment details and charge them again for future payments.

Supported features

You can use the following features in your Drop-in element integration.

Style and appearance customization

Pass appearance and layout in createElement('dropIn', …) JS to match your checkout. For examples and supported values, see Customize style and appearance and open the Drop-in Element tab.

Localization

You can configure the Drop-in element to display localized text for payment fields based on the locale specified in init(). If no locale is specified, the browser's locale will be used, if it is supported by Airwallex.js. For a list of supported locales, see locales JS.

If the browser's locale is not supported, the Drop-in element will default to en.

3D Secure authentication

Airwallex automatically handles 3D Secure authentication offering either frictionless or challenge flow depending on the card issuer’s requirements. You can optionally pass the following fields in createElement() to support 3DS:

authFormContainer JS: A container for the authentication form. If a challenge flow is required to authenticate the shopper, an iframe will be rendered in this container to display the authentication page provided by the issuing bank. If not provided, Airwallex will create a div after body tag and use it as the container.
withBilling JS: If applicable set this to true to collect billing information from the shopper, which increases the likelihood of frictionless checkout.

Device fingerprinting

Device fingerprinting uniquely tracks and identifies devices used for transacting on your shopping site, increasing your protection from fraud. Airwallex.js automatically handles device fingerprinting, so no additional integration is needed.

Payments for platforms

You can accept payments as a platform via Drop-in element. Example platforms include marketplaces, SaaS platforms, on-demand service providers. For more information on payments for platforms with Airwallex as an acquirer, see Airwallex payment gateway.

If you want the shopper to see the available payment methods activated by the connected account, specify the Connected Account ID in the platformConnectedAccount field in createElement().

To use Connected Account information to process the payment, e.g., statement descriptor displayed on the shopper's credit card or bank statement, provide connected_account_id in Create a Payment Intent API.

Fraud protection

You can provide specific data fields in Create a PaymentIntent API and Confirm a Payment Intent API endpoints to significantly improve Airwallex's fraud protection performance, ultimately boosting conversion rates and minimizing fraud risk. For more information, see Payment data for enhanced fraud protection.

FAQ

What payment methods are supported in a Drop-in element integration?

By default, all payment methods activated on your Airwallex merchant account are available to the shopper. To retrieve the list of payment methods supported for your account, call Get available payment method types API.

The payment methods displayed on the payment page will be filtered based on the following fields:

For details on which currencies and countries are supported for each payment method, including integration information, refer to the Payment Methods section.

By default, the order of payment methods on the payment page will be based on the order configured in Get available payment method types API, with applepay, googlepay and paypal displayed at the top if they're supported.

If you want to further restrict the payment methods offered to your shoppers, you can pass the methods[] JS field in createElement(). The payment methods will appear in the order specified in this field.

Can I offer Apple Pay via Drop-in element 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.

JavaScript

1const dropInElement = createElement('dropIn', {
2  intent_id: intent.id,
3  client_secret: intent.client_secret,
4  applePayRequestOptions: {
5    countryCode: 'US',
6    buttonType: 'buy',
7    buttonColor: 'white-with-line',
8  },
9  currency: 'USD',
10});

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.

JavaScript

1const dropInElement = createElement('dropIn', {
2  intent_id: intent.id,
3  client_secret: intent.client_secret,
4  googlePayRequestOptions: {
5    countryCode: 'US',
6    merchantInfo: {
7      merchantName: 'Example Merchant',
8      merchantId: '0123456789',
9    },
10    buttonType: 'buy', // Indicate the type of button you want displayed on your payments form. Like 'buy'
11  }
12});

Was this page helpful?