Guest user checkout

The diagram below depicts the information flow in a Full Featured Card Element integration.

Before you implement the integration, consider the following:

• Ensure your Airwallex account is activated for online payments.

• Obtain your access token API by authenticating to Airwallex using your unique Client ID and API key. You will need the access token to make API calls.

• Explore the airwallex-payment-elements JavaScript client library reference to familiarize yourself with the Embedded Elements methods, parameters, and properties.

• Install the package

  • Using Yarn or NPM
    • yarn add airwallex-payment-elements
    • npm install airwallex-payment-elements
  • Using CDN
    • <script src="https://checkout.airwallex.com/assets/elements.bundle.min.js"></script>

When the shopper begins the checkout process, you will need to create a PaymentIntent object to indicate your intent to collect payment from the shopper.

When the checkout page loads, on your server, call Create a PaymentIntent API with an amount and currency. Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious shoppers from being able to alter the payment amount.

Provide return_url in Create a PaymentIntent API to indicate where Airwallex should redirect the shopper after completing the payment, whether successful or otherwise.

The PaymentIntent’s id and client_secret are returned in the response — these parameters let you confirm the payment and update card details on the client, without allowing manipulation of sensitive information, like payment amount.

First, you will need to import the legacy airwallex-payment-elements SDK and then initialize the package. For details, see Initialize Airwallex .

To embed the Full Featured Card Element into your checkout page, you will need to create an empty container, create the Element and then mount the Element to the container.

Define the payment form

First, create an empty container div with a unique id in your payment form. Ensure that the payment form only contains one Element with this unique id. Airwallex inserts an iframe into this div on mounting the Element.

Create the Full Featured Card Element

When the payment form has loaded, call createElement(type, options) by specifying the Element type as fullFeaturedCard to create the Element. Ensure that the payment form only contains one Element with fullFeaturedCard id.

Mount the Full Featured Card Element

Call mount() with the id of the div to mount the Element to the DOM. This creates a multi-line input container that collects the card number, expiry date, CVC, name on card, and the checkout button. The Element should only be mounted once in a single payment flow.

Add onReady event listener to ensure the Element is mounted. Use this event to prepare and load the checkout page.

Add success and error event listeners to handle error and success events received from Airwallex.

If no error occurred, display a message that the payment was successful. If payment fails with an error, display the appropriate message to your shopper so they can take action and try again.

Use test card numbers and the test and go-live checklist to test your integration for various success and error scenarios in the demo environment and then go live in the production environment.

Explore a full, working code sample of an integration built using various web frameworks .

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

Some common error scenarios include :