Drop-in Element

You can also pass options in createElement() to overwrite styles and other functions as shown in the following table. The client_secret and currency fields are mandatory. For details, see dropIn props JS.

For any actions subsequent to the payment such as shipping goods or sending email receipts, you can retrieve the payment result using the following options:

• Set up webhooks to receive notifications on whether the payment has succeeded. Airwallex sends payment_intent.succeeded event when a payment succeeds. Listen to these events rather than waiting on a callback from the client. On the client, the shopper could close the browser window or quit the app before the callback executes. For information on how to set up webhooks and listen to events, see Getting started with webhooks

• On your server, call Retrieve a PaymentIntent API to check the PaymentIntent status.

• Check Payment Activity screen on your Airwallex web app.

You can configure the Element to display localized text of the payment fields based on the locale set in init() or loadAirwallex( ). Supported locales are:

• en (US English)
• zh (Simplified Chinese)
• ja (Japanese)
• ko (Korean)
• ar (Arabic)
• fr (French)

Airwallex allows you to create a PaymentConsent with the shopper to initiate future payments using shopper’s saved card details. For more information, see Save payment details for future payments .

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: 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: If applicable set this to true to collect billing information from the shopper, which increases the likelihood of frictionless checkout.

Some common scenarios include:

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.

fonts: [
         {
           src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
           family: 'AxLLCircular',
           weight: '400',
         },
         {
           src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXSub-BoldSubset.woff2',
           family: 'AxLLCircular',
           weight: '700',
         },
       ],

You can also customize styles for the cardNumber/card/fullFeaturedCard Element using style. With Split Card, you can also customize cvc and expiry Elements.

  <style>
    #dropIn {
      width: 540px;
      /* Example: to hide element before it is loaded */
      display: none;
    }
  </style>

All payment methods configured on your merchant account are supported. The list displayed to the shopper on the payment form is filtered based on the following fields:

• currency passed in createElement()

• components[ ] passed in createElement(). Contains the list of payment methods you want to offer the shopper.

• (Optional) country_code passed in createElement( ) for payment methods such as online_banking, bank_transfer, seven_eleven, skrill, sofort, trustly, paysafecash, paysafecard, satispay, paysera, paypal, bitpay

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.

const dropInElement = createElement("dropIn", {
	intent_id: intent.id,
	client_secret: intent.client_secret,
	applePayRequestOptions: {
		countryCode: 'US',
		buttonType: 'buy', // Indicate the type of button you want displayed on your payments form. Like 'buy'
		buttonColor: 'white-with-line', // Indicate the color of the button. Default value is 'black' 
	},
	currency: 'USD',
});

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.

const dropInElement = createElement("dropIn", {
     intent_id: intent.id,
     client_secret: intent.client_secret,
     googlePayRequestOptions: {
       countryCode: 'US',
       merchantInfo: {
         merchantName: "Example Merchant",
         merchantId: "0123456789",
       },
       buttonType: 'buy', // Indicate the type of button you want displayed on your payments form. Like 'buy'
     },
});