Guest user checkout

Registered user checkout

QR Code 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

The QR Code Element allows you to embed a QR code checkout option on your payment page. The Element contains a QR code that matches the specified PaymentIntent and a Refresh button to regenerate the QR code. The shopper can scan the QR code using their e-wallet app to make a payment. Examples of supported e-wallets include: WeChat Pay, Alipay, KakaoPay, etc.

![QR Code Element](//images.ctfassets.net/c3n7jozh84hr/6WWgHnPlrq79IttldnIiK4/a58e4230d2b5a8c72ae47867dc345475/QR_Code.png?w=500)

This page describes how to embed a QR Code 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 QR Code Element to your checkout page

Step 4: Handle the response

Test your integration

Example integrations

Supported features

Troubleshooting

This implementation applies to [Redirect Element](/payments__embedded-elements__redirect-element) and [QR Code Element](/payments__embedded-elements__qr-code-element).

Redirect Element and QR Code Element integrations allow 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 method for future payments.  You can use the PaymentConsent to initiate scheduled (recurring) or unscheduled (one-time) payments without the shopper involved. 

Supported payment methods include:

* __Redirect__: Alipay, AlipayHK, Gcash, Dana, KakaoPay, Touch ‘n Go
* __QR Code__: AlipayHK, KakaoPay


Save payment details for the first time

Merchant-initiated subsequent payments

QR Code 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.

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__qr-code-element__guest-user-checkout).

If you want to save shopper's payment details for future payments, see [Registered user checkout](/payments__embedded-elements__qr-code-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

Full Featured Card Element

Redirect 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. 

QR Code 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