Split Card Element
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
If you want to offer a one-off or single payment experience where the shopper is present and active on your shop site, see Guest user checkout.
If you want to save shopper's payment details for future payments, see Registered user checkout.
Supported features
You can use the following features in your Split Card Element integration.
Style and appearance customization
You can use the style
JS option to customize the individual card Elements.
style
Provide base styling for the iframe using CSS properties. You can also customize the width and height of a pop-up overlay, e.g., payment with 3-D Secure authentication.
Localization
You can configure the Element to display localized text of the payment fields based on the locale
set in init()
. See supported locales JS.
Save card details for future payments
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.
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 adiv
afterbody
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.
FAQ
What card schemes can I accept using Card Element?
You can accept credit and debit cards from Mastercard, Visa, and UnionPay using Card/Split Card/Full Featured 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 a Card Element?
You can render a Cardholder Name input field on your checkout page alongside the Card/Split Card Elements. The cardholder name is not mandatory to confirm and complete a payment.