Guest user checkout

Registered user checkout

Full Featured Card Element

A quick introduction to the essential dev tools for building with Airwallex

Developer Essentials

Explore the flexibility and power of Airwallex APIs

Quickly and securely integrate with Airwallex products using Airwallex SDKs

SDKs

Learn how to receive push notifications via webhooks

Webhooks

Use Airwallex's demo environment to simulate transactions before going live

Demo environment

This page describes how to embed a Full Featured Card Element on your payment page to accept payments.

How it works

Before you begin

Step 1: Set up the server to create a PaymentIntent

Step 2:  Initialize legacy Airwallex element on your checkout page

Step 3: Add the Full Featured Card Element to your checkout page

Step 4: Handle the response

Test your integration

Example integrations

Supported features

Troubleshooting

This implementation applies to [Drop-in Element](/payments__drop-in-element) and [Full Featured Card Element](/payments__embedded-elements__full-featured-card-element).

Drop-in Element allows you to save payment details for future payments.  To save payment details, Airwallex allows you to create a PaymentConsent, which represents the consent between you and the shopper to use the shopper’s saved payment details for future payments.

PaymentConsents may be used to trigger different payment scenarios:

* Customer-initiated subsequent payments: This is useful for recurring shoppers who can make payments by selecting the saved payment method. For saved cards, the shopper should enter their security code (CVC) for verification to complete the payment.

* Merchant-initiated subsequent payments: You as a merchant can initiate scheduled (recurring) or unscheduled (one-time) payments without the shopper involved.


Create a PaymentConsent

Save payment details without a payment

Save payment details during payment 

Customer-initiated subsequent payments

Merchant-initiated subsequent payments

Full Featured Card Element has been deprecated in the latest `@airwallex/components-sdk` v1.14.2. Please migrate to the [Drop-in Element](/payments__drop-in-element) to access this functionality.

The Full Featured Card Element is a multi-input field container (card number, expiry, security code, name on card, and a checkout button) that allows you to securely collect card details and submit these details to Airwallex to process the payment.

![Full Feature Card Element](//images.ctfassets.net/c3n7jozh84hr/5pFxVFaKfN3SvrqiDpULXc/817cba3dccd34827826358967efbd791/Full_Feature_Card.png?w=500)

This page describes how to embed a Full Featured Card Element on your payment page to accept payments. 


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](/payments__embedded-elements__full-featured-card-element__guest-user-checkout).

If you want to save shopper's payment details for future payments, see [Registered user checkout](/payments__embedded-elements__full-featured-card-element__registered-user-checkout).

Checkout flow

* `airwallex-payment-elements` [NPM package](https://www.npmjs.com/package/airwallex-payment-elements) 

* `airwallex-payment-elements` library [reference](https://github.com/airwallex/airwallex-payment-demo/tree/master/docs#airwallex-payment-elements---documentation)

* [Sample SDKs](https://github.com/airwallex/airwallex-payment-demo/tree/master/integrations) in various frontend and backend languages

* [Test cards](/online-payments__test-card-numbers) and [sandbox](https://codesandbox.io/s/airwallex-payment-demo-static-html-c2z63) to test your integration

    * [Static HTML](https://codesandbox.io/s/airwallex-payment-demo-static-html-c2z63)

    * [React-Typescript](https://codesandbox.io/s/airwallex-payment-demo-react-typescript-buuhk)

    * [Vue](https://codesandbox.io/s/airwallex-payment-demo-vue-ffhrw)

    * [Angular](https://codesandbox.io/s/airwallex-payment-demo-angular-zgx32)

    * [React](https://codesandbox.io/s/airwallex-payment-demo-react-2m63j)

Development resources

docsLogo

Platform Dashboard (Beta)

Handling Disputes

Enable Apple Pay (Express Checkout)

Enable Google Pay (Express Checkout)

Enable MOTO Payments

Install Airwallex Card Payments app

Enable express checkout

Enable Apple Pay via web application

Enable Apple Pay using API

Hosted Payment Page

Apple Pay Element

Drop-in Element

Native API

Mobile SDK

Use your own certificate

Apple Pay

Google Pay Element

Enable Google Pay™

Google Pay™

Card Element

Split Card Element

Legacy Embedded Elements

Embedded Elements

Redirect Element

QR Code Element

WeChat Pay Element

Partners overview

Overview

Developer Tools

Demo environment overview

Mobile SDKs

Customization options

Airwallex.js

Quickstart with Postman

Manage API keys

Handle KYC RFI

Handle Transaction RFI

Handle Payment Enablement RFI

RFI (Request for Information)

Implement your marketplace solution

Payments for marketplaces

Desktop / Mobile Website Browser

Save bank details for future payments

Micro-deposit verification

SEPA Direct Debit - BETA

Retrieve physical card delivery details

Handling Disputes & FAQs

Desktop/Mobile Website Browser

Pay by Bank app (PbBa)

US: 1099-K

US tax form filing obligations

1099-NEC form state requirements

 Account

Billing

Charges

Connected Account Transfers

Conversions

Deposits

Direct debit payouts

Global Accounts

Issuing

Linked Accounts

Online Payments

Platform

 Transfers

Payload examples

Account capability

Account status

Funds Split

Online payments

PSP Agnostic

Transfers

Event types

View and Manage Transactions

Embedded Tax Form component

Bacs Direct Debit - BETA

Bancontact

BLIK

Estonian Banks

iDEAL

Latvian Banks

Lithuanian Banks

Maxima

MyBank

Multibanco

Narvesen

Paysafecard

Paysafecash

Paysera

PayU

Perlas Terminals

Przelewy24 | P24

Satispay

Sofort.

Trustly

TWINT - BETA

EU & UK

Desktop/Mobile Website Browser - TWINT

US tax reporting

Desktop/Mobile Website Browser - Klarna

Store Detail Requirement 

Payment Method List

Configure remote authorization

iOS SDK

Android SDK

Install the Airwallex Google Pay Payments App

Getting Started

Install Airwallex Online Payments App

Install Airwallex Klarna Payments App

Install Airwallex Afterpay Payments App

Install the Airwallex Apple Pay Payments App

Shopline

Supported currencies

 Micro-deposit verification

Transfer webhooks (older versions)

Desktop/Mobile Website Browser - Afterpay / Clearpay

Afterpay / Clearpay

Pakistan

Bangladesh

Indonesia

Market & infrastructure coverage

Settlement report

Transaction & fee types

Payment activity export

Payments rounding logic

Reporting

Enable Native Credit/Debit Cards

Hungary

Zambia

Wallis and Futuna

Virgin Islands (British)

Viet Nam

Vanuatu

Uzbekistan

Uruguay

United States

United Kingdom

United Arab Emirates

Powerful and flexible APIs to programmatically manage your money

Platform APIs

APIs and components to build your own global financial products.

Embedded Finance Use Cases

Accept one-time and recurring payments, with like-for-like settlement for multiple currencies

PaymentsActive

PaymentsNormal

Accept payments from your customers around the world with cards and 160+ alternative payment methods. 

Full Featured Card Element

.css-1xcsryl>.e1x8zjqq1{opacity:0;-webkit-transition:opacity 250ms ease-in-out;transition:opacity 250ms ease-in-out;}.css-1xcsryl:hover>.e1x8zjqq1{opacity:1;}Checkout flow.css-158icaa{margin-left:4px;}

Development resources

Checkout flow