Split Card Element

Copy for LLMView as Markdown

The Split Card Element allows you to embed individual input fields (Card Number JS, Card Expiry Date JS, and Card CVC JS) on your checkout page to securely collect card details and submit these details to Airwallex to make a payment. In comparison to Card Element JS, it provides greater control over the look and feel of the checkout page.

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 Split card element integration.

Style and appearance customization

Pass style JS on each field in createElement('cardNumber', …) JS, createElement('expiry', …) JS, and createElement('cvc', …) JS to match your checkout. For examples and supported values, see Customize style and appearance and open the Card element / Split card element tab.

Localization

You can configure the 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 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.

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 Card Element / Split Card 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.

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 card schemes can I accept using Split card elements?

You can accept credit and debit cards from Mastercard, Visa, and UnionPay using Spit card element integration. For UnionPay, make sure you provide the UnionPay logo alongside Mastercard and Visa.

How do I display the cardholder name field for Split card elements?

You can render a Cardholder Name input field on your checkout page alongside the Split card elements. The cardholder name is not mandatory to confirm and complete a payment.

Was this page helpful?