Airwallex logo

Drop-in Integration

The Drop-in element integration enables merchants to embed a container of payment checkout options directly on their website. Through this element, merchants can 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 following steps will give you a high-level overview of implementing a Drop-in Element. Refer to our Drop-in Element guide for the complete details of the integration. This integration uses our lightweight Javascript SDK, airwallex-payment-elements .

  1. 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 intent_id and client_secret to checkout.

See how to create a payment intent with the Airwallex API for an example of intent details.

  1. Integrate with airwallex-payment-elements to create a drop-in element on your page using the Airwallex createElement function. The Drop-in element will render the available payment methods and enable customers to select the one most applicable to them.

See the Drop-in Element Guide for complete integration details.

  1. Once the element is successfully mounted, the drop-in element will handle the payment process. Upon completion of the checkout, you will receive event notifications, whether successful or erroneous. You can configure event listeners on your webpage to listen to the event notifications.

See an example of how listeners are integrated in Static HTML. See more details about interacting with elements in the Airwallex Payment Elements Docs .

Ready to integrate? See our copy-paste ready demos for 5 different web frameworks!