airwallex-payment-react-native - v0.5.0

airwallex-payment-react-native

Lightweight React Native SDK for embedding the Airwallex checkout flow in iOS and Android apps. It ships a pre-built payment sheet plus lower-level APIs if you want to drive card, Apple Pay, or Google Pay yourself.

See the Airwallex Mobile SDKs docs for product context, PCI requirements, and the rest of the mobile stack.

Requirements

React Native 0.79.3+
iOS 13.0+
Android API 21+

Supported payment methods

Cards: Visa, Mastercard, Amex, Diners Club, JCB, Discover, UnionPay. Collecting card details in your own UI (via payWithCardDetails) requires your app to be PCI-DSS compliant.
Wallets: Alipay, AlipayHK, DANA, GCash, Kakao Pay, Touch ’n Go, WeChat Pay, and other redirect methods enabled on your account.
Apple Pay (iOS)
Google Pay (Android)

Locales: English, Chinese Simplified, Chinese Traditional, French, German, Japanese, Korean, Portuguese (Portugal), Portuguese (Brazil), Russian, Spanish, Thai. Pass lang on the session (for example 'zh-Hans' or 'pt-BR') to override the SDK default.

How it works

On your server, create a PaymentIntent with the Airwallex API.
The API returns an intent id and client_secret.
In the app, call initialize once at startup, then present a payment flow with a PaymentSession built from those values.

Never put API keys in the client. Only the PaymentIntent id and client secret belong in the SDK session.

Installation

npm install airwallex-payment-react-native
# or
yarn add airwallex-payment-react-native

Then install iOS pods:

cd ios && pod install

Usage

Call initialize once before any payment method. Use 'demo' or 'staging' while integrating; default is 'production'.

import {
  initialize,
  presentEntirePaymentFlow,
} from 'airwallex-payment-react-native';
import type { PaymentSession } from 'airwallex-payment-react-native';

initialize('production');

const session: PaymentSession = {
  type: 'OneOff',
  customerId: 'cus_xxx',
  paymentIntentId: 'int_xxx',
  currency: 'AUD',
  countryCode: 'AU',
  amount: 1,
  isBillingRequired: false,
  paymentMethods: ['card'],
  clientSecret: 'replace-with-your-client-secret',
};

presentEntirePaymentFlow(session)
  .then((result) => {
    switch (result.status) {
      case 'success':
        // Payment succeeded. `result.paymentConsentId` is set if a consent was created.
        break;
      case 'inProgress':
        // Submitted but not final — poll the PaymentIntent or wait for a webhook.
        break;
      case 'cancelled':
        // Shopper dismissed the sheet.
        break;
    }
  })
  .catch((error) => {
    // SDK or payment error
    console.error(error);
  });

presentEntirePaymentFlow shows the full payment sheet (cards, wallets, Apple Pay / Google Pay when configured). Other entry points:

Function	Use when
`presentCardPaymentFlow(session)`	Card-only sheet, skip method selection
`startApplePay(session)`	Apple Pay only (iOS; set `applePayOptions`)
`startGooglePay(session)`	Google Pay only (Android; set `googlePayOptions`)
`payWithCardDetails(session, card, saveCard)`	Your own card UI (PCI-DSS required)
`payWithConsent(session, consent)`	Charge a previously saved payment consent

Session type can be 'OneOff', 'Recurring' (save a method without charging), or 'RecurringWithIntent' (charge now and save). Optionally pass a configuration as the second argument to presentEntirePaymentFlow:

presentEntirePaymentFlow(session, {
  layout: 'tab', // or 'accordion'
  checkoutButton: { title: 'Pay HKD 50.00' }, // optional, defaults to "Pay" / "Confirm"
});