Guest user checkout
This page describes how to embed a Split Card Element on your payment page to accept payments.
How it works
The diagram below depicts the information flow in a Split Card Elements integration.
Before you begin
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.
Step 1: Set up the server to create a PaymentIntent
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.
Step 2: Initialize Airwallex on your checkout page
First, you will need to import Airwallex.js and then initialize the package. For details, see Initialize Airwallex JS.
Step 3: Add the Split Card Elements to your checkout page
To embed the Split Card Elements into your checkout page, you will need to create an empty container, create the Elements and then mount the Elements to the container.
Define the payment form
First, create an empty container div with a unique id in your payment form and a Submit button to trigger the payment request. Ensure that the payment form only contains one Element with this unique id. Airwallex inserts an iframe into this div that securely collects card information.
Create the Split Card Elements
When the payment form has loaded, call createElement(type, options) by specifying the Element type as cardNumber, expiry, and cvc respectively to create card number, expiry date, and CVC Elements. Ensure that the payment form only contains one Element with these ids.
Mount the Split Card Elements
Call mount() with the id of the div to mount the Element to the DOM. The Elements should only be mounted once in a single payment flow.
Optionally, you can provide the PaymentIntent id and client_secret in createElement() JS or create a PaymentIntent after the shopper clicks the Submit button and pass the details in confirm() JS.
Split Card props
You can also pass options in createElement() to overwrite styles and other functions as shown in the following table. All properties are optional. For details, see Card Number JS, Card Expiry JS, and Card CVC JS.
Step 4: Confirm the PaymentIntent
When the shopper clicks the Submit button, call confirm() JS by passing the id and client_secret returned in Create a PaymentIntent, to complete the payment.
cardNumber.confirm(options);
You can also pass other options in confirm() depending on your payment flow. For details, see confirm() JS.
Handle the submit event
Add an event handler to the Submit button and listen to the form’s submit event to know when to confirm the payment.
Test your integration
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.
Example integrations
Explore a full, working code sample of an integration built using various web frameworks .
Troubleshooting
Some common error scenarios include :
| Error | Next steps |
|---|---|
| Airwallex is not defined | Check if you have initialized Airwallex (Step 2) before using Airwallex functions. If you are using CDN, check if you have changed the bundle version from x.x.x to the latest version in the package.json file. For example, https://checkout.airwallex.com/assets/elements.bundle.min.js is invalid |
| Access denied, authentication failed | Check if you have replaced your intent id and client_secret in createElement() and optionally confirm(). |
| The PaymentIntent with ID int_xxxxxxxxx cannot be found | Check if the environment you initialized Airwallex in, for example, demo or prod, matches the environment you retrieved your intent id and client_secret from. In other words, if you ran init in the demo environment, you must also create your PaymentIntent in the demo environment. |