When capturing a Stored Credential for the first time

When initiating a subsequent transaction using a Stored Credential

Embedded Fields Integration

![api-recurring 1](//images.ctfassets.net/c3n7jozh84hr/3sfxEmC6sy2ow3AxZYtx2R/9b21dde2a0a0e97bd23803859663075b/api-recurring_1.png)

When initiating a subsequent transaction using a stored credential

Error Cases

API Integration

Website QR

Mobile App 

Mobile Browser (H5)

WeChat Official Account

WeChat Mini Program 

Customs Declaration 

Gain access to shoppers on WeChat

Functionalities and value-added features supported

Countries and currencies supported

Choose the integration method that best suits your needs

Accept omni-channel payments from your shoppers with WeChat Pay

WeChat Pay

The Airwallex Customs Declaration functionality enables Merchants who sell goods to mainland China via bonded warehouses to send payment information to China Customs conveniently and safely as regulated. 

Currently, this service supports custom declarations for WeChat Pay transactions that are completed within a year. 

Note

To help you better understand what role Airwallex plays in your declaration process and what functionality our customs declaration API delivers, the Customs Declaration Model below illustrates the major parties in your overall declaration procedures. 
![Illustration - Customs Declaration](//images.ctfassets.net/c3n7jozh84hr/7CpqCUNchbrk2N1OIIbKBG/6f04ee36f9e3bccd43141cb06c495d93/Illustration_-_Customs_Declaration.png)

 1. The customer completes the purchase.

 2. You, as the merchant, shall send custom details and receives payment data via Airwallex Customs Declaration API (see guideline below).

 3. Same as your common practices of completing declaration, it is your responsibility to inform the logistics to send shipment details for declaration, with payment data attached. Also, you need to send order details for declaration, with payment data attached.

 4. After the customs receives all the required information, they will cross-check the detailed information of the order sent by you,  payment methods and logistics. If details matched, customs will agree the merchant to dispatch goods.


Guideline for using Customs Declaration APIs

Error handling

Customs codes 

Accept WeChat Pay on your mobile website by redirecting shoppers to WeChat App. See checkout experience as below. 
![WeChat H5 payment flow](//images.ctfassets.net/c3n7jozh84hr/6U0rYyoPXBrKYUIHwvUBWE/b4f4881bd9f458a0d9fe492d3530bbf7/f7b20b08-85d2-4900-94a2-1a084946259b.png)

1. The shopper chooses to pay with WeChat Pay and the shopper will be redirected to WeChat Pay App
2. The shopper completes payment in WeChat Pay App
3. Payment succeeds and the shopper is redirected back to the mobile browser page you designated

To use WeChat H5 payment, extra offline review process is required, please contact your account manager for detailed information

Step 1. Initialize a payment Intent

Step 2. Redirect to WeChat App to complete payment

Reach Visa and Mastercard cardholders across the world

Functionalities and value-added features supported 

Choose the integration method that best suit your needs

Cards

API Versioning

Native API

Notifications and Webhooks

Error Codes

At Airwallex we have challenged ourselves to create a transaction model that suits your needs and focuses on what you, our Merchant, cares about.

The main concepts:

 - A __Payment Intent__ represents the aim of your Customer to complete its checkout (and of course pay for your services). In it, you find represented Payment transactions, Refunds and if things go bad also Chargebacks.

 - A __Payment Attempt__ represents an actual trial to perform a financial transaction. It can be a payment transaction, it can be a refund or even a chargeback. When the customer performs several payment trials before completing the purchase you will have one Payment Attempt for each of the attempts, this way you know what happened and can optimize your checkout. The Payment Attempt tracks each and every individual stage through which the transaction goes.

 - A __Financial Transaction__ represents actual and real money. For each Payment Attempt that reaches completion, our platform will generate one or several Financial Transactions. They represent not only the principal amount of your transaction but also the fees associated with it (including gateway fees, interchange fees, markup, etc.), you will have once financial transaction for each of the financial components that are part of a Payment Attempt. Ultimately, only financial transactions will make it to your Airwallex Balance in form or real money.

 - Since there will be many Financial Transactions, a __Batch__ groups all the financial transactions that are paid to you (or you have to pay to Airwallex). A Batch will be adjusted for your eventual rolling reserve and will appear as one line in your Airwallex Balance.

![Illustration - several batches with several different currencies](//images.ctfassets.net/c3n7jozh84hr/3UC3XsIxlDwHZMEQoIbQRw/d62bfea16614c1419a5729d6fe4376eb/PA_-_illustration-several_batches_with_several_different_currencies_and_that_those_go_to_different_multi_currency_wallets.png)


Airwallex Online Payments Model

This table below includes the response codes that you might receive when processing transactions. Those response codes are returned by the issuers and reflect the outcome of the authorization process.

Issuer's response codes

AVS Codes

CVC2/CVV2 Codes

This section helps you understand the meaning of the result codes used in the acquiring world. 

- __Issuer response codes__: There are many possible reasons for the outcome of a transaction. In this [page](/online-payments__acquiring-codes__issuer's-response-codes), we will explain the responses returned by issuers and help you understand the result of authorization process.
- __AVS codes__: Address Verification Service (AVS) is a service that helps you verify if a billing address matches the address of a credit card holder, in order to authenticate the ownership of a card used by your customer. In this [page](/online-payments__acquiring-codes__avs-codes), we will explain the responses you might receive when AVS is performed, and corresponding descriptions on our Webapp.
- __CVC2/CVV2 codes__: Card Verifiction Code 2 (CVC2, also refered to as CVV2), is a three- or four- digit code printed on a card. Issuers check against this information to verify whether one transaction is fraudulent or not. In this [page](/online-payments__acquiring-codes__cvc2cvv2-codes), we will explain the responses you might receive when CVC2/CVV2 is checked, and the corresponding descriptions on our Webapp.

Response Codes

Accept GCash on your mobile website by redirecting shoppers to GCash Cashier. See checkout experience as below

1. The shopper chooses to pay with GCash and proceed payment with mobile browser
2. The shopper login to GCash account in browser and completes the payment
3. Payment succeeds and the shopper is redirected back to the page you designated


Step 2. Redirect to GCash Cashier to complete payment

Mobile Website Browser

Note: you can follow the example of [WeChat In-App Pay](https://pay.weixin.qq.com/wiki/doc/api/wxpay/pay/In-AppPay/chapter6_2.shtml).

__Step 1.__ After the Merchant has successfully applied for an App in the WeChat Open Platform, the Platform will provide a unique APPID to the Merchant. When creating a project in Xcode, the developer should enter the APPID value in the “URL Schemes” field.

__Step 2.__ Before calling the API, you should register your APPID with WeChat.
```java
[WXApi registerApp:@"Wechat app id" enableMTA:YES];
```

__Step 3.__ The merchant's server calls the Unified Order API to create an advanced transaction. After obtaining `prepay_id` and signing relevant parameters, the advanced transaction data is transferred to the app to start a payment.
```java
(void)paymentWithWechatPaySDK:(AWWeChatPaySDKResponse *)response
    {
        PayReq *request = [[PayReq alloc] init];
        request.partnerId = response.partnerId;
        request.prepayId = response.prepayId;
        request.package = response.package;
        request.nonceStr = response.nonceStr;
        request.timeStamp = response.timeStamp.doubleValue;
        request.sign = response.sign;

        [WXApi sendReq:request];
    }
```
__Step 4.__ After completing payment, WeChat will redirect itself back to the merchant's app and do a callback using `onResp()`, then it can retrieve the payment intent status after the merchant server is notified, so please keep listening to the notification.
```java
(void)onResp:(BaseResp *)resp
    {
        if ([resp isKindOfClass:[PayResp class]]) {
            PayResp *response = (PayResp *)resp;
            switch (response.errCode) {
                case WXSuccess:
                    [SVProgressHUD showSuccessWithStatus:@"Succeed to pay"];
                    break;
                default:
                    [SVProgressHUD showErrorWithStatus:@"Failed to pay"];
                    break;
            }
        }
    }
```

Set up payment method

To run the example project, you should follow these steps.

 - __Step 1__: Clone the repository to your local machine
 - __Step 2__: Open Android Studio and import the project by selecting the build.gradle file from the cloned repository
 - __Step 3__: Goto [Account settings > API keys](https://www.airwallex.com/app/settings/api) to get `Client ID` and `API key`, then fill in the `strings.xml`
 - __Step 4__: Register app on WeChat Pay, then fill `App ID` and `App Signature` in the `strings.xml`
 - __Step 5__: Run the `sample` project


Examples

WeChat Pay & Credit Card Pay

Airwallex API

Payment Native UI

Features

We provide native screens to collect payment and shipping details. You can use these individually, or take all of the prebuilt UI in one flow by following the Integration guide.

```java
   // Create `AirwallexStarter` object
    val airwallexStarter = AirwallexStarter(activity)

    // Override `onActivityResult`, then call `handlePaymentResult`
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        airwallexStarter.handlePaymentResult(requestCode, resultCode, data)
    }

    // Call `airwallexStarter.onDestroy()` on `onDestroy`
    override fun onDestroy() {
        airwallexStarter.onDestroy()
        super.onDestroy()
    }
```
 - Show Shipping UI

![androidsdk_shipping](//images.ctfassets.net/c3n7jozh84hr/7iY3nF99PgRzH2SiPnJOSa/4e1adf05d33a35d85b13871a891264ee/image-20200409-140925.png?w=400)

```java
airwallexStarter.presentShippingFlow(shipping,
        object : AirwallexStarter.PaymentShippingListener {
            override fun onSuccess(shipping: Shipping) {
                Log.d(TAG, "Save the shipping success")
            }

            override fun onCancelled() {
                Log.d(TAG, "User cancel edit shipping")
            }
        })
```

 - Show Payment Method List UI

![androidsdk_paymentmethod](//images.ctfassets.net/c3n7jozh84hr/29Xtd9tOGKLEHcOYQUd5E6/9683be554f1b14b69fbcd0ae102c6326/image-20200409-140839.png?w=400)

```java
airwallexStarter.presentSelectPaymentMethodFlow(paymentIntent,
        object : AirwallexStarter.PaymentMethodListener {
            override fun onSuccess(paymentMethod: PaymentMethod, cvc: String?) {
                Log.d(TAG, "Select PaymentMethod success")
            }

            override fun onCancelled() {
                Log.d(TAG, "User cancel select PaymentMethod")
            }
        })
```

 - Show new card UI

![androidsdk_newcard](//images.ctfassets.net/c3n7jozh84hr/7ma9I6VaBgpVuW2wAofgu3/df7891e4ab21d03b330d6d509b4dc462/image-20200409-140803.png?w=400)

```java
airwallexStarter.presentAddPaymentMethodFlow(paymentIntent,
        object : AirwallexStarter.PaymentMethodListener {
            override fun onSuccess(paymentMethod: PaymentMethod, cvc: String?) {
                Log.d(TAG, "Create PaymentMethod success")
            }

            override fun onCancelled() {
                Log.d(TAG, "User cancel create PaymentMethod")
            }
        })
```
 - Show payment detail UI

![adnroidsdk_detailpm](//images.ctfassets.net/c3n7jozh84hr/60T7FJTbWScE4jcmMD9NGZ/72414fa08cca106f1e68763cb4a466fd/image-20200409-140716.png?w=400)

```java
airwallexStarter.presentPaymentDetailFlow(paymentIntent, paymentMethod,
        object : AirwallexStarter.PaymentIntentListener {
           override fun onSuccess(paymentIntent: PaymentIntent) {
               Log.d(TAG, "Confirm payment intent success")
            }

           override fun onFailed(error: AirwallexError) {
               Log.d(TAG, "Confirm payment intent failed")
           }

           override fun onCancelled() {
               Log.d(TAG, "User cancel confirm payment intent")
           }
        })
```
 - Show payment flow

```java
airwallexStarter.presentPaymentFlow(paymentIntent,
        object : AirwallexStarter.PaymentIntentListener {
            override fun onSuccess(paymentIntent: PaymentIntent) {
                Log.d(TAG, "Confirm payment intent success")
            }

            override fun onFailed(error: AirwallexError) {
                Log.d(TAG, "Confirm payment intent failed")
            }

            override fun onCancelled() {
                Log.d(TAG, "User cancel confirm payment intent")
            }
        })
```


Native UI

Getting started with the Android SDK, please follow below steps:


Step 1: Install the SDK

Step 2: Configuration the SDK (optional)

Step 3: Confirm Payment Intent

Step 4: Retrieve Payment Intent to confirm the charge has succeeded

Integration

Requirements

Contributing

Overview

To run the example project, you should follow these steps

Preparing

Clone source code

Install dependencies and open project

Build Configurations

Run the app on your iOS device

__WeChat Pay__: We provide a seamless integration with WeChat Pay.

__Airwallex API__: We provide low-level APIs that correspond to objects and methods in the Airwallex API. You can build your own entirely custom UI on top of this layer, while still taking advantage of utilities like AWCardValidator to validate your user’s input.

__Native UI__: We provide native screens to collect payment and shipping details. For example, __AWCardViewController__ is a UIViewController that collects, validates card details and finishes saving.
You can use these individually, or take all of the prebuilt UI in one flow by following the Integration guide.

 - AWCardViewController

![newcard_form](//images.ctfassets.net/c3n7jozh84hr/4T9VYL4dsynCGW7ACeB5xf/9fe6686b9fa5551e12c3158f981a0856/oTHJeLGAjG0kZp6RoHBX4GvjXHV3juwdEx2T-SEYgLO6GNS_PjH8Nu2WjdOMCWt-nFE5T-XjA1ry6o_sMRMTAyb-Of5fcUHNHA0OW2fCkvOOMgW7wRnJzdIbtxI39t4A?w=400)

 - AWPaymentMethodListViewController

![paymentmethods](//images.ctfassets.net/c3n7jozh84hr/7ltXm0kw1mIWnYFjgcKVDV/a1c5199fc6bfef1211cabbd07fb373bc/VUick_HCuM7SyroRXkafXDUx5sKo2zwhgyzxb9d8FMFUVZtnoqvEzmQ_JsE3dRF4VBc3utUhCtvUjv__Yvz_hm8SSmXJIJtBJmoJYBPI8_5Z0fAyzQy7h65INw3wk5C3?w=400)

 - AWShippingViewController

![shippingdetails](//images.ctfassets.net/c3n7jozh84hr/10n7iVrMje5S8HOmBXUc4a/f4927a50c2510941fbf14ee453dcb1fc/zi-B7lqSUuHx7Zh2WMgjavqvaCOZ0qjFYgu9jpJ1SxrVy5rMUfyCJ0eab8hWhH9Pn2dBdHM9K-_pyo8kKut6s-N6ivxavXLBFw-YpRHqGOoGLM2vOFsBDZ3F-OqO4Bow?w=400)

 - AWShippingViewController

![cvcform](//images.ctfassets.net/c3n7jozh84hr/1ojpYDC6bUB3EhW1TCgfxB/8b9a0862e4b6a59b930d7dc7cc8a0c30/N10cBusxcQjuX6nAdWManmchjy4FYs79O5sH_8ebG2vK3WoXRiOFe58qH7OP38TgsGAaPq4VUYU48iaY2F7HJq6sWTDoALJ9cIKvwqM3YfeR9WMwgrJL6mWn5I-jJOJV?w=400)


- Customize the usage of shipping info

Use `AWUIContext` to get an instance of `AWShippingViewController` and show it contained in a `UINavigationController.`
```java
AWShippingViewController *controller = [AWUIContext shippingViewController];
controller.delegate = "The target to handle AWShippingViewControllerDelegate protocol";
controller.shipping = "The shipping address merchant provides";
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:controller];
[self presentViewController:navigationController animated:YES completion:nil];
```
 - Handle the shipping result

```java
/**
 A delegate which handles selected shipping.
 */
@protocol AWShippingViewControllerDelegate <NSObject>

/**
 This method is called when a shipping has been saved.

 @param controller The shipping view controller.
 @param shipping The selected shipping.
 */
- (void)shippingViewController:(AWShippingViewController *)controller didEditShipping:(AWPlaceDetails *)shipping;

@end
```
 - Customize the usage of card creation

Use `AWUIContext` to get an instance of `AWCardViewController` and show it contained in a `UINavigationController`.
```java
AWCardViewController *controller = [AWUIContext newCardViewController];
controller.delegate = "The target to handle AWCardViewControllerDelegate protocol";
controller.customerId = "The customer id merchant provides";
controller.sameAsShipping = YES;
controller.shipping = "The shipping address merchant provides";
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:controller];
[self presentViewController:navigationController animated:YES completion:nil];
```
 - Handle new card result
```java
/**
 A delegate which handles card creation.
 */
@protocol AWCardViewControllerDelegate <NSObject>

/**
 This method is called when a card has been created and saved to backend.

 @param controller The new card view controller.
 @param paymentMethod The saved card.
 */
- (void)cardViewController:(AWCardViewController *)controller didCreatePaymentMethod:(AWPaymentMethod *)paymentMethod;

@end
```
 - Customize the usage of payment detail

Use `AWUIContext` to get an instance of `AWCardViewController` and show it contained in a `UINavigationController`.
```java
AWPaymentViewController *controller = [AWUIContext paymentDetailViewController];
controller.delegate = "The target to handle AWPaymentResultDelegate protocol";
controller.paymentIntent = "The payment intent merchant provides";
controller.paymentMethod = "The payment method merchant provides";
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:controller];
[self presentViewController:navigationController animated:YES completion:nil];
```
 - Customize the usage of confirming payment intent

Please set client secret before using `AWAPIClient` to send a request.
```java
[AWAPIClientConfiguration sharedConfiguration].clientSecret = "The client secret merchant provides";
```
```java
AWConfirmPaymentIntentRequest *request = [AWConfirmPaymentIntentRequest new];
request.intentId = "The payment intent id merchant provides";
request.paymentMethod = "The payment method merchant provides";
AWPaymentMethodOptions *options = [AWPaymentMethodOptions new];
options.autoCapture = YES;
options.threeDsOption = NO;
request.options = options;
request.requestId = NSUUID.UUID.UUIDString;
AWAPIClient *client = [[AWAPIClient alloc] initWithConfiguration:[AWAPIClientConfiguration sharedConfiguration]];
[client send:request handler:^(id<AWResponseProtocol>  _Nullable response, NSError * _Nullable error) {
  if (error) {
      return;
  }

  AWConfirmPaymentIntentResponse *result = (AWConfirmPaymentIntentResponse *)response;
  // Handle the payment result.
  }];
```


Customize Usage

Set up SDK

Basic Integration

You may refund a Payment Intent that your buyer has paid for before at any point after it has been successfully captured. This enables you to return the funds to your buyer

Have you received an RFI (or Request for Information) for a specific transaction or your Buyer has issued complaints about your product? You can use a Refund to avoid costly chargebacks.
Have you already received a chargeback for a specific intent? In this case note that the chargeback amount has been already deduced from your balance and returned to the Buyer by the Issuer Bank.

In order to perform a refund you have several options, either one partial refund, multiple partial refunds or one full refund are possible. You are not allowed to refund more funds that you initially collected from your buyer.

You need to follow the below process:

 3. Use the `POST /api/v1/pa/refunds/create` endpoint to make a refund. Provide the payment intent you are refunding, the reason and the amount (if not the full amount). You will receive a synchronous response to inform you the request has been taken into account.
```curl
curl -X POST \
  https://pci-api.airwallex.com/api/v1/pa/refunds/create \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer your_bearer_token' \
  -d '{
  "payment_attempt_id": "{{payment_attempt_id}}",
  "reason": "customer requested",
  "request_id": "{{$guid}}"
}'

```
```curl
{
    "id": "rfd_daLxZ7dkzlayAqhQqzsgNoEfPhs",
    "request_id": "fbb30283-eec7-45ca-8d98-cd18e1c70a03",
    "payment_intent_id": "int_762cmJuYzpBmfpF89zsgNoEfPhs",
    "payment_attempt_id": "att_k8Q6nMOXznIQyfUlizsgNoEfPhs",
    "amount": 49.12,
    "currency": "HKD",
    "reason": "Return good",
    "status": "RECEIVED",
    "created_at": "2020-06-28T10:14:14+0000",
    "updated_at": "2020-06-28T10:14:14+0000"
}
```
 4. After we have successfully processed your refund, we will send you a webhook notification to inform you about the refund result.


Refund

You will cancel a payment intent when you initially performed a one-off payment but you did not capture it (either automatically or explicitly). A cancellation enables you to release the funds you had initially blocked on the Buyer's payment instrument and can only be applied to payment methods that require a capture operation to succeed.


Have you cancelled a payment but your Buyer still informs you that he sees a hold in his bank account? Do not worry, this is normal. You should double check you payment intent is successfully cancelled and inform your Buyer. The issuer bank will release the funds in the coming days.

You need to follow the below process:

 1. Use the `POST/api/v1/pa/payment_intents/{id}/cancel` endpoint to cancel a payment intent. The full amount of the intent will be cancelled, a cancellation reason can be provided. You will receive a synchronous response to inform you the request has been taken into account.

```curl
curl -X POST \
  https://pci-api.airwallex.com/api/v1/pa/payment_intents/int_tkZsvKMHzf37yTFqlztZ5NYEAvD/cancel \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer your_bearer_token' \
  -d '{
  "request_id": "285ecfc8-4c53-4543-8b9b-87d75e8666b9"
}'
```

```curl
{
    "id": "int_tWFe5PBQz9msmRCegzuZoUJcE49",
    "request_id": "c2e5204e-4f1b-402f-b58a-249f2ef34ee1",
    "amount": 100.0,
    "currency": "HKD",
    "merchant_order_id": "f488663a-d610-4f22-83ba-64202d7d76cc",
    "status": "CANCELLED",
    "captured_amount": 0,
    "created_at": "2020-06-28T10:11:49+0000",
    "updated_at": "2020-06-28T10:12:01+0000",
    "cancelled_at": "2020-06-28T10:12:01+0000"
}
```
 2. After we have successfully processed your cancellation, we will send you a webhook notification to inform you about the cancellation result.


Cancellation

The capture step initiates the financial transfer from the funds you put on hold with the initial payment intent confirmation.This is a required step for Card payments (Credit or Debit Cards) or for any other payment method requiring a second step to capture funds. 

Not executing this step on time or note executing it at all means you will not receive any funds. If you do not want to worry about it you have the option to use the auto_capture parameter in your payment intent or to set it up by default in your account.

You need to follow the below process:

 1. Use the `POST/api/v1/pa/payment_intents/{id}/capture`, to request the capture of your payment. Upon successful completion the appropriate financial transactions will be generated and the payment intent will subsequently appear on your settlement report. You will receive a synchronous response to inform you the request has been taken into account.

```curl
curl -X POST \
  https://pci-api.airwallex.com/api/v1/pa/payment_intents/int_tkZsvKMHzf37yTFqlztZ5NYEAvD/capture \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer your_bearer_token' \
  -d '{
  "amount": 1, 
  "request_id": "285ecfc8-4c53-4543-8b9b-87d75e8666b9"
}'
```

```curl
{
    "id": "int_tkZsvKMHzf37yTFqlztZ5NYEAvD",
    "request_id": "285ecfc8-4c53-4543-8b9b-87d75e8666b9",
    "amount": 100.0,
    "currency": "HKD",
    "merchant_order_id": "d566b126-4e49-4233-93f4-b9ac809847db",
    "status": "SUCCEEDED",
    "captured_amount": 1.0,
    "latest_payment_attempt": {
        "id": "att_raOACk4zg17OZvmTzyFwKgOKWs",
        "amount": 100.0,
        "payment_method": {
            "id": "mtd_hq24SfHPX8Ft4d0T8tA3a905nYB",
            "type": "card",
            "card": {
                "expiry_month": "01",
                "expiry_year": "2023",
                "name": "Adam",
                "bin": "401200",
                "last4": "1003",
                "brand": "visa",
                "issuer_country_code": "RU",
                "card_type": "credit",
                "fingerprint": "Viy7U4n4UoLAcY9MVrdVqDFdXt0=",
                "cvc_check": "unknown",
                "avs_check": "unknown"
            },
            "status": "VERIFIED",
            "created_at": "2020-06-28T10:04:10+0000",
            "updated_at": "2020-06-28T10:04:10+0000"
        },
        "status": "CAPTURE_REQUIRED",
        "provider_original_response_code": "00",
        "authorization_code": "647902",
        "captured_amount": 1.0,
        "refunded_amount": 0,
        "created_at": "2020-06-28T10:04:10+0000",
        "updated_at": "2020-06-28T10:04:18+0000",
        "authentication_data": {
            "ds_data": {},
            "fraud_data": {
                "action": "ACCEPT",
                "score": "-1"
            },
            "avs_result": "U",
            "cvc_result": "U"
        }
    },
    "created_at": "2020-06-28T10:04:08+0000",
    "updated_at": "2020-06-28T10:04:14+0000"
}
```

We will also send you a notification in case the capture has failed or succeeded. Make sure to subscribe to it.

Capture

When you manage recurring transactions, Airwallex takes care of safely storing your buyer's payment credentials in our secure card vault on your behalf. For security reasons, you cannot retrieve the data in clear and you cannot store the data by yourself unless you have a PCI-DSS AOC.

Retrieve stored credentials

Update saved card details

Delete stored credentials

Management of payment credentials

3D Secure helps to protect you and your eCommerce business against potentially non legitimate buyers. In order to decide when or not use 3D Secure Airwallex leverages its own Risk module (that you can configure accordingly). Airwallex's Risk module provides you the ability to trigger 3DS only when it is required, leverage the specific section in this guide to configure it and use the below flow.

There are two versions of 3D Secure that are being run in parallel by Issuers, 3D Secure 1 and 3D Secure 2 (with its incremental variations). Our implementation abstracts you from this complexity and will automatically drive you through the right flow. 

Effectively the 3DS 1 implementation will always request the Challenge flow, the 3D Secure 2 implementation will request either the Frictionless flow or the Challenge flow.

3D Secure 2 is an enhanced version of 3D Secure, it provides a significantly better user experience and helps increasing conversion by reducing the redirection likelihood to the issuer and when that occurs provides technical measures to make it smoother.

Both flows, Frictionless and Challenge are required to complete a successful implementation.


Frictionless flow

Challenge flow

Payment with 3D secure

One-off or single payments help you to complete your checkout process when the Buyer is present and active in your web shop. In this scenario the Buyer will provide his card details as well as all the ancillary information required.

 1. Create a payment intent on your server with currency and amount you want to charge from your buyer using `POST/api/v1/pa/payment_intents/create`. You will receive the payment methods available as well as the next action to be performed.

Request:
```curl
curl https://pci-api.airwallex.com/api/v1/pa/payment_intents/create \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer your_bearer_token \
  -d '{
    "request_id": "ed11e38a-7234-11ea-aa94-7fd44ffd1b89",
    "amount": 100.0,
    "currency": "CNY",
    "merchant_order_id":"{{$guid}}"
  }'
```
Response:
```curl
{
    "id": "int_gECH4yeBzr50vOYFtzNyIsSW9e8",
    "request_id": "95527c7f-88d9-44c2-ba01-15886323c102",
    "amount": 100.0,
    "currency": "CNY",
    "merchant_order_id": "d45fe031-ac74-4347-b2db-00cb3528adca",
    "status": "REQUIRES_PAYMENT_METHOD",
    "captured_amount": 0,
    "created_at": "2020-06-21T05:23:25+0000",
    "updated_at": "2020-06-21T05:23:25+0000",
    "available_payment_method_types": [
        "card",
        "wechatpay"
    ],
    "client_secret": "your_client_secret"
}
```
 2. Use `POST/api/v1/pa/payment_intents/{id}/confirm`endpoint to submit the outstanding payment method details and request the authorization for a given payment.

Request:
```curl
curl -X POST \
  https://pci-api.airwallex.com/api/v1/pa/payment_intents/int_kaAB2ImTzoHeHG8TAzNtdr17x7C/confirm \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer your_bearer_token' \
  -d '{
  "request_id": "ed11e38a-7234-11ea-aa94-7fd44ffd1b81",
  "payment_method": {
        "type": "card",
        "card": {
          "number": "4012000300001003",
          "expiry_month": "01",
          "expiry_year": "2023",  
          "cvc": "123",
          "name": "Adam"
        }
    }
}'
```
Response:
```curl
{
    "id": "int_jawNeudBz9ej5QqZgzGLekx0hQx",
    "request_id": "cb79c939-890a-418f-ab92-feb48d829771",
    "amount": 100.0,
    "currency": "HKD",
    "status": "REQUIRES_CAPTURE",
    "captured_amount": 0,
    "latest_payment_attempt": {
        "id": "att_tZsIgRiVztQSbVGd6zGLekx0hQx",
        "amount": 100.0,
        "payment_method": {
            "id": "mtd_o2DDW9rQc44PguUMiLGgisjkofB",
            "type": "card",
            "card": {
                "expiry_month": "01",
                "expiry_year": "2023",
                "name": "Adam",
                "bin": "401200",
                "last4": "1003",
                "brand": "visa",
                "issuer_country_code": "RU",
                "card_type": "credit",
                "fingerprint": "J9DRkJWyWE+YkjNiE0ogMiAtSIA=",
                "cvc_check": "unknown",
                "avs_check": "unknown"
            },
            "status": "VERIFIED",
            "created_at": "2020-06-21T05:52:48+0000",
            "updated_at": "2020-06-21T05:52:48+0000"
        },
        "status": "AUTHORIZED",
        "provider_original_response_code": "00",
        "authorization_code": "434929",
        "captured_amount": 0,
        "refunded_amount": 0,
        "created_at": "2020-06-21T05:52:49+0000",
        "updated_at": "2020-06-21T05:52:52+0000",
        "authentication_data": {
            "ds_data": {},
            "fraud_data": {
                "action": "ACCEPT",
                "score": "-1"
            },
            "avs_result": "U",
            "cvc_result": "U"
        }
    },
    "created_at": "2020-06-21T05:52:06+0000",
    "updated_at": "2020-06-21T05:52:52+0000"
}
```
If you received the status AUTHORIZED or SUCCEEDED (only if you are auto capturing) your payment is completed and you can release the goods to your Buyer.


You must follow the Capture use case detailed later to complete your transaction. If you forget to capture you will not receive any funds

Payment

This section mainly introduces the main process of integrating Airwallex Android SDK. This guide assumes that you are an Android developer and familiar with Android Studio and Gradle.

Our demo application is available open source on [Github](https://github.com/airwallex/airwallex-payment-android) and it will help you to better understand how to include the Airwallex Android SDK in your Android project.

Get started with our integration guide and example project.


Android Airwallex SDK

The Airwallex iOS SDK is a framework for integrating easy, fast and secure payments inside your app with Airwallex. It provides simple functions to send sensitive credit card data directly to Airwallex, it also provides a powerful, customizable interface for collecting user payment details.

Get started with our integration guide and example project.


iOS Airwallex SDK

Airwallex uses conventional HTTP response codes to indicate the success or failure of an API request.


HTTP response codes

Error response structure

Error response examples for HTTP response code 400

Error codes for 401, 404

Error codes for 400

The notifications or Webhooks enable you to receive asynchronous notifications of the events that occur on the Airwallex payment acceptance platform

Subscription

Event types

Payload

Delivery headers

Respond to webhook events

Checking webhook signatures

Code example

Tips for using webhooks

Our native API integration allows you to handle 100% of the front-end and interactions between your front and backend. It is the most suitable if you are PCI-DSS compliant and want to leverage that capability to provide a customized check-out experience to your buyers.

Airwallex uses [versioning](https://www.airwallex.com/docs/api#/Versioning) to improve our API without affecting the existing users. In this chapter, the API examples as well as the notification event types are all presented in the latest version. For older versions, please refer to our [official API documentation](https://www.airwallex.com/docs/api).

__How do I choose the version?__

You may specify the version per API call by setting the __x-api-version__ header. However, in most cases you should rely on the configured version in your account. Overriding version by header is designed for testing and migrating to a new version. 

For webhook notification, you may only specify the expected event version during the webhook creation.


Mobile Integrations

The Embedded fields integration is a set of prebuilt UI components, like inputs and buttons, that merchants can directly integrate into their checkout page.  This integration enables merchants to accept payments by partially delegating the responsibility of payment processing to Airwallex while still maintaining control of the overall look and feel of their checkout page.  This integration requires a limited PCI-DSS certification.
The main distinctive features include:

- Automatic formatting card information (card number, expiry, cvc) while entered
- Customizable placeholders to fit your UX design
- Usage of responsive design to fit the width of your customer’s screen or mobile device
- Customizable styling to match the look and feel of your checkout flow
- Limited PCI-DSS scope suitable for partners with a PCI-DSS SAQ

There are currently 5 embedded fields integrations, click on each element for a specific guide on their integration using [airwallex-payment-elements](https://www.npmjs.com/package/airwallex-payment-elements):

- [Card](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/card.md), a single row input container with card number, expiry date, and cvc input
- [Full Featured Card](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/fullfeaturedcard.md), a multi-input field container with card number, expiration date, security code, name on card, and a checkout button
- [Split Card](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/splitcard.md), individual card input fields including card number, expiry date, and cvc
- [QR code](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/wechat.md), a QR code displayed for user to scan and pay
- [Redirect](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/redirect.md), a checkout button that redirects customers to a specified payment method

The following steps will give you a high-level overview of implementing a card element. Refer to our [Card Element guide](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/card.md) for the complete details of the integration, and explore the links above for other element integrations.  This integration uses our lightweight Javascript SDK, [airwallex-payment-elements](https://www.npmjs.com/package/airwallex-payment-elements).  

1. Create a Payment Intent through the Airwallex API - [see full details here](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro).  To execute a payment checkout, we must have a Payment Intent that captures the details of your checkout, including the currency and amount you wish to charge your customer.  We will need the `intent id` and `client secret` to checkout.

See how to [create a payment intent](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/_api_v1_pa_payment_intents_create/post) with the Airwallex API for an example of intent details.

2. On your checkout, integrate with airwallex-payment-elements to create a card element using the Airwallex `createElement` function and a checkout button bound to the Airwallex `confirmPaymentIntent` function.  The card element will collect sensitive payment details from the customer and the checkout button will trigger the actual payment that confirms and fulfills the payment intent.  You must provide the `intent_id` and `client_secret` in the `confirmPaymentIntent` function.

See [an example](https://github.com/airwallex/airwallex-payment-demo/blob/master/integrations/cdn/card.html#L56) of how the card element can be integrated in Static HTML or refer to the [Card Element Guide](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/card.md) for complete integration details.

3. Once the element is successfully mounted, the card element will handle the payment process.  Upon completion of the checkout, you will receive a promise which will inform you of whether the transaction was successful or ran into an error.  You can then process this response and proceed to the next steps of your checkout flow.

Ready to integrate?  See our [copy-paste ready demos](https://github.com/airwallex/airwallex-payment-demo) for 5 different web frameworks!

The Drop-in element integration enables merchants to embed a container of payment checkout options directly on their website.  Through this element, merchants can accept payments by partially delegating the responsibility of payment processing to Airwallex, while still maintaining control of the overall look and feel of their checkout page.  This integration requires a limited PCI-DSS certification.

The following steps will give you a high-level overview of implementing a Drop-in Element. Refer to our [Drop-in Element guide](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/dropin.md) for the complete details of the integration.  This integration uses our lightweight Javascript SDK, [airwallex-payment-elements](https://www.npmjs.com/package/airwallex-payment-elements).  

1. Create a Payment Intent through the Airwallex API - [see full details here](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro).  To execute a payment checkout, we must have a Payment Intent that captures the details of your checkout, including the currency and amount you wish to charge your customer.  We will need the `intent_id` and `client_secret` to checkout.

See how to [create a payment intent](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/_api_v1_pa_payment_intents_create/post) with the Airwallex API for an example of intent details.

2. Integrate with airwallex-payment-elements to create a drop-in element on your page using the Airwallex `createElement` function.  The Drop-in element will render the available payment methods and enable customers to select the one most applicable to them.  

See the [Drop-in Element Guide](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/dropin.md) for complete integration details.

3. Once the element is successfully mounted, the drop-in element will handle the payment process.  Upon completion of the checkout, you will receive event notifications, whether successful or erroneous.  You can configure event listeners on your webpage to listen to the event notifications.

See [an example](https://github.com/airwallex/airwallex-payment-demo/blob/master/integrations/cdn/dropin.html#L83) of how listeners are integrated in Static HTML.  See more details about interacting with elements in the [Airwallex Payment Elements Docs](https://github.com/airwallex/airwallex-payment-demo/tree/master/docs#interacting-with-elements).

Ready to integrate?  [See our copy-paste ready demos](https://github.com/airwallex/airwallex-payment-demo) for 5 different web frameworks!


Drop-in Integration

The Hosted Payment Page integration enables Merchants to redirect customers to an Airwallex-hosted checkout page.  Merchants can accept payments by delegating the full handling of payment processing and display of payment options to Airwallex, supporting merchants without a full PCI-DSS certification (those who can only fulfill a PCI-DSS SAQ).  

The following steps will give you a high-level overview of implementing a Hosted Payment Page checkout. Refer to our [Hosted Payment Page guide](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/hpp.md) for the complete details of the integration.  This integration uses our lightweight Javascript SDK, [airwallex-payment-elements](https://www.npmjs.com/package/airwallex-payment-elements).  

1. Create a Payment Intent through the Airwallex API - [see full details here](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro).  To execute a payment checkout, we must have a Payment Intent that captures the details of the checkout, including the currency and amount you wish to charge your customer.  We will need the `intent_id` and `client_secret` to checkout.

See how to [create a payment intent](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/_api_v1_pa_payment_intents_create/post) with the Airwallex API for an example of intent details.

2. Integrate with airwallex-payment-elements to redirect your customer to an Airwallex payment page with the Airwallex `redirectToCheckout` function.  Place in the `intent_id` and `client_secret` retrieved in the previous step to redirect your customer to their payment page.  

You can customize the look and feel of the Hosted Payment Page by providing fonts, and also redirect customers back to your site after the payment by providing the successUrl, failUrl, and cancelUrl options.

When this function is triggered, Airwallex will take care of redirecting your customer, helping your customer select the most appropriate payment method, collecting their payment details, and eventually triggering the authentication. You need to do nothing, besides providing the intent details, to collect payments from your customers.

See the [HPP integration guide](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/hpp.md) for more details on customizations.

3. Upon payment completion, your customer will be redirected to the successUrl or failUrl provided in the previous step (or default Airwallex success or fail or cancel pages if you don’t provide the respective urls).  The final status of your payment will be sent to the endpoint you configured.

Your customer will be redirected to your return success or fail or cancel url, which will be appended with the payment intent id.

```curl
https://your-website-host/your-success-path?id=int_xxxxx
```

Ready to integrate?  [See our copy-paste ready demos](https://github.com/airwallex/airwallex-payment-demo) for 5 different web frameworks!

Hosted Payment Page Integration

1. Go to: Plugins > Installed Plugins on your WordPress site. __Click Airwallex API Setting__ within the Plugin you need to configure.
![WooCommerce Config step 1](//images.ctfassets.net/c3n7jozh84hr/3nVHCDro7tIixup8Ct2Gzi/c1149960d75d09d216cfe026b2f8ab0b/Screen_Shot_2021-04-09_at_2.34.46_PM.png)
2. __Enter__ your __Client ID__, __API Key__ and __Webhook Secret Key__ obtained from your Airwallex account (please see where and how to obtain the credentials in the next section).
![Config step 2](//images.ctfassets.net/c3n7jozh84hr/4uAE1qwNZYi89Rt2rnMyM8/401379da7b89a57d6150ab0b81029a2c/Screen_Shot_2021-04-09_at_2.38.08_PM.png)
3. __Tick Yes__ checkbox, if you wish to __submit order details__, and __Save Changes__ to proceed.
4. Go to: __WooCommerce > Settings > Payments__ and you’ll see all the separate payment methods Airwallex support. 
![config step 4](//images.ctfassets.net/c3n7jozh84hr/1gSV1Cow6KDg6KYtRDgRNE/c67e31a354f83972eb0c2de2488f3bbc/Screen_Shot_2021-04-09_at_2.40.41_PM.png)
5. __When first activated__, the Airwallex payment method will be __Disabled__. __Tick__ the __Enable__ checkbox to enable your desired payment method.
6. __Enter__ a __Title__ (required) and __Description__ (optional) seen by the shopper during checkout.
- The __Title__ is shown at the payment method option on the Checkout Page and also within the Order showing how the shopper paid (e.g. “Credit Card” as shown in the screenshot below)
- The __Description__ is displayed within the payment method option on the Checkout Page (e.g. “Use your credit card to pay” as displayed in the screenshot below)
![Config step 6**](//images.ctfassets.net/c3n7jozh84hr/3P40p8b7eT1eQhf1mKI5L1/341f3a61ec22bce40c7a09c653166eda/Screen_Shot_2021-04-09_at_2.50.33_PM.png)
7. __Tick__ the __Enable sandbox__ checkbox, if you wish to test before going live. If unticked, you will begin accepting payments with Airwallex immediately.
8. __Select__ a __Checkout Form__ to configure how and where you would like the shopper to take payment actions for the chosen payment method 
  - __Embedded__ option will display embedded field(s) within the payment     method option on the Checkout Page, in which specific inputs will be         required from the shopper
  - __On separate page__ option will redirect the shopper to another page to   complete payment with the selected payment method
9. Enter __Statement Descriptor__ (required), a description that appears on a customer’s bank or credit card statement. The statement description must contain at least one letter and no more than 22 characters. In addition, these characters must be alpha-numeric and cannot contain `> < " '`.
10. Tick __Capture Immediately__ checkbox, if you wish to capture the charge immediately. Otherwise, the charge issues an authorization and will need to be captured later. Uncaptured charges expire in __7 days__.
11. __Select__ a __Capture Status__ of an order when the payment associated with the order is to be captured.
12. __Save changes__ to complete the configuration.
![config step 12](//images.ctfassets.net/c3n7jozh84hr/UHFFNbjIeB6KyQyK8tou6/a36d420a837fa89156a22e27b750dab2/Screen_Shot_2021-04-09_at_2.46.06_PM.png)
![config step 12-2](//images.ctfassets.net/c3n7jozh84hr/2AD1jwj9MAzT1gUwmjhdun/590e17a9a66cef18ff1ea1f28dd7a276/Screen_Shot_2021-04-09_at_2.47.09_PM.png)


Setup and configuration may vary for different payment methods. For example, steps 8 - 11 mentioned above are applicable to Credit Card NOT Wechat Pay. You will only need to complete steps 1 - 7 to immediately accept Wechat Pay payments.

API and Webhook

Capture Payments

Transaction Management

Configuration

The plugin can be downloaded from the official [WordPress marketplace](https://wordpress.org/plugins/airwallex-online-payments-gateway/) 

1. Go to Plugins > Add New on your WordPress site.
2. __ Enter WooCommerce Airwallex__ in the Search Plugins bar. The author is WooCommerce.
3. __Click Install Now__ and __Activate Plugin__.

For more information on how to install and manage plugins, please see [here](https://wordpress.org/support/article/managing-plugins/).

Installation

WooCommerce, one of the most popular e-commerce platforms, owned by [Automattic](https://automattic.com/) and based on on the Wordpress CMS. The WooCommerce Airwallex Plugin provide merchants the possiiblity to  accept payments on their stores, developed in Wordpress using the WooCommerce extension. 

To accept payments in your the store, every merchant can [create an AirWallex account](https://www.airwallex.com/signup?gclid=Cj0KCQiAhP2BBhDdARIsAJEzXlG2Rc11zEVjG92aIkGD47PldMdQWLdXTER16ycALXRr-VZZi848TxoaAgGBEALw_wcB) and add the Airwallex WooCommerce payment plugin to the existing or new store. 

The web-store on WordPress can be created quite easily and is out of the scope of this manual. We assume that Merchant already has a store created using WordPress with installed WooCommerce extension. 

If you have not yet owned a store, [start with WooCommerce](https://docs.woocommerce.com/document/start-with-woocommerce-in-5-steps/) here. 

With only one integration, you will be able provide a seamless checkout experience for your shopper with a range of popular payment options such as Visa, Mastercard, Wechat Pay, and more card payment methods to be enabled without the need of performing a new integration or an incremental update.

The checkout page, where the shopper will make payment, uses embedded fields to collect shopper payment inputs, providing shoppers better security in addition to the simplicity of the checkout flow.

For example, after clicking Proceed to Checkout, the shopper will be redirected to the Checkout Page, where the they will see Credit Card and Wechat Pay options available (as shown in the screenshot below). 

![woocommerce checkout](//images.ctfassets.net/c3n7jozh84hr/5PXVRtALsEQaUN6WVLi6Ph/38514cd6523dbdfa35f3e20c6b797880/woocommerce_checkout.png)

Credit Card

Description

Why use the Airwallex Plugin?

Benefits

WooCommerce Plugin

The tables below include the reason codes you might receive when a dispute occurs. Those reasons codes are returned by the issuers/card schemes and mapped to different dispute reason categories.

Credit not processed

Duplicate charge

Fraudulent

Product not received

Product unacceptable

Not recognized

Cancelled products

Misrepresentation

Counterfeit

Dispute reason codes

Respond to dispute with different reasons

When a dispute arrives, merchants can review and respond to the dispute case on Airwallex Webapp. The Airwallex dispute resolution tool enables you to monitor, receive the information, assess and when applicable defend the cases the Shoppers raise against you.


Response Queue

Dispute list

Dispute detailed view

Airwallex Dispute Status Flow

Airwallex Dispute Defence Window

Handle dispute on Airwallex Webapp

A dispute can go through different stages and has different indications to merchant’s business. It is crucial for merchants to understand dispute flow before taking any actions.

RFI (Requested For Information) Process

Dispute Process

Dispute flow of cards

A dispute, also called as a payment chargeback, occurs when a consumer challenges a transaction and asks to reverse it. It is a protection tool that allows consumers to get their money back for fraudulent charges or purchases that don’t live up to standards by submitting a dispute. Disputes usually happen in card payments but can also happen in other payment methods like digital wallets. It is the merchant’s responsibility to decide whether to accept or defend the disputes.

Disputes

The complete API documentation is located [here](https://developer.token.io/airwallex_rest_api_doc/content/e-rest/rest_intro.htm)

Confirmation of Availability Funds (CAF)

API Summary

Airwallex's REST API Integration Summary

Looking to make an international payment? Check out our guidelines on supported countries, their requirements and delivery times. [Find out more here](https://www.airwallex.com/guides/payout).

Payout Guide

Currently, this service supports custom declarations for WeChat Pay transactions that are completed within a year. 


Customs Declaration

Enable your customers with recurring payment

Integration Options

Recurring Payments

The Embedded fields integration is a set of prebuilt UI components, like inputs and buttons, that merchants can directly integrate into their checkout page.  This integration enables merchants to accept payments by partially delegating the responsibility of payment processing to Airwallex while still maintaining control of the overall look and feel of their checkout page.  This integration requires a limited PCI-DSS certification.
The main distinctive features include:

- Automatic formatting card information (card number, expiry, cvc) while entered
- Customizable placeholders to fit your UX design
- Usage of responsive design to fit the width of your customer’s screen or mobile device
- Customizable styling to match the look and feel of your checkout flow
- Limited PCI-DSS scope suitable for partners with a PCI-DSS SAQ

There are currently 5 embedded fields integrations, click on each element for a specific guide on their integration using [airwallex-payment-elements](https://www.npmjs.com/package/airwallex-payment-elements):

- [Card](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/card.md), a single row input container with card number, expiry date, and cvc input
- [Full Featured Card](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/fullfeaturedcard.md), a multi-input field container with card number, expiration date, security code, name on card, and a checkout button
- [Split Card](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/splitcard.md), individual card input fields including card number, expiry date, and cvc
- [QR code](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/qrcode.md), a QR code displayed for user to scan and pay
- [Redirect](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/redirect.md), a checkout button that redirects customers to a specified payment method

The following steps will give you a high-level overview of implementing a card element. Refer to our [Card Element guide](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/card.md) for the complete details of the integration, and explore the links above for other element integrations.  This integration uses our lightweight Javascript SDK, [airwallex-payment-elements](https://www.npmjs.com/package/airwallex-payment-elements).  

1. Create a Payment Intent through the Airwallex API - [see full details here](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro).  To execute a payment checkout, we must have a Payment Intent that captures the details of your checkout, including the currency and amount you wish to charge your customer.  We will need the `intent id` and `client secret` to checkout.

See how to [create a payment intent](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/_api_v1_pa_payment_intents_create/post) with the Airwallex API for an example of intent details.

2. On your checkout, integrate with airwallex-payment-elements to create a card element using the Airwallex `createElement` function and a checkout button bound to the Airwallex `confirmPaymentIntent` function.  The card element will collect sensitive payment details from the customer and the checkout button will trigger the actual payment that confirms and fulfills the payment intent.  You must provide the `intent_id` and `client_secret` in the `confirmPaymentIntent` function.

See [an example](https://github.com/airwallex/airwallex-payment-demo/blob/master/integrations/cdn/card.html#L56) of how the card element can be integrated in Static HTML or refer to the [Card Element Guide](https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/card.md) for complete integration details.

3. Once the element is successfully mounted, the card element will handle the payment process.  Upon completion of the checkout, you will receive a promise which will inform you of whether the transaction was successful or ran into an error.  You can then process this response and proceed to the next steps of your checkout flow.

Ready to integrate?  See our [copy-paste ready demos](https://github.com/airwallex/airwallex-payment-demo) for 5 different web frameworks!


Desktop Website Browser

Mobile Website Browser 

Gain access to shoppers on Alipay

Accept omni-channel payments from your shoppers with Alipay

Alipay

Accept Alipay on your mobile app on your shopper’s Android or iOS phone. You can choose to integrate Airwallex mobile SDK that supports multiple payment methods.  See checkout experience as below
![Alipay - Mobile App](//images.ctfassets.net/c3n7jozh84hr/1zO13z8l3Jo96gYe4J7ClW/98e81190ea079b0db05f3a2d6f8bf2a9/Frame_103.png)

1. The shopper chooses to pay with Alipay
2. The shopper reviews transactions and confirm to pay
3. The shopper is redirected to Alipay App and completes payment 
4. Payment succeeds and the shopper is redirected back to your App


Step 2. Redirect to Alipay App to complete payment

Accept Alipay on your mobile app on your shopper’s Android or iOS phone. You can choose to integrate Airwallex mobile SDK that supports multiple payment methods.  See checkout experience as below
![Alipay - Mobile Website Browser](//images.ctfassets.net/c3n7jozh84hr/4OPMRQB0kaSXMFp3V8pRmV/9d92c37cba9ca414708fd56260c0cbb2/Frame_102__1_.png)

1. The shopper chooses to pay with Alipay and proceed payment with mobile browser
2. The shopper login to Alipay account in browser and completes the payment
3. Payment succeeds and the shopper is redirected back to the page you designated


Step 2. Redirect to Alipay Cashier to complete payment

Mobile App

Gain access to shoppers on AlipayHK

Accept omni-channel payments from your shoppers with AlipayHK

AlipayHK

Accept Alipay HK on your mobile app on your shopper’s Android or iOS phone. You can choose to integrate Airwallex mobile SDK that supports multiple payment methods.  See checkout experience as below

1. The shopper chooses to pay with Alipay HK
2. The shopper reviews transactions and confirm to pay
3. The shopper is redirected to Alipay HK App and completes payment 
4. Payment succeeds and the shopper is redirected back to your App


Step 2. Redirect to Alipay HK App to complete payment

Accept Alipay HK on your mobile website by redirecting shoppers to Alipay HK Cashier. See checkout experience as below

1. The shopper chooses to pay with Alipay HK and proceed payment with mobile browser
2. The shopper login to Alipay HK account in browser and completes the payment
3. Payment succeeds and the shopper is redirected back to the page you designated


Airwallex Docs and API References

Airwallex Product Documentation

Online Payments

Treasury

Transactional FX

Payouts

Issuing

Scale

Open Banking

Airwallex API Reference