airwallex-payment-react-native

This airwallex-payment-react-native library is a lightweight React Native SDK that allows merchants to conveniently integrate the Airwallex checkout flow on their iOS/Android app. Payment methods supported:

• Cards: Visa, Mastercard, Amex, Dinners Club, JCB, Discover, Union Pay. If you want to integrate Airwallex API without our Native UI for card payments, then your app is required to be PCI-DSS compliant.
• E-Wallets: Alipay, AlipayHK, DANA, GCash, Kakao Pay, Touch ‘n Go, WeChat Pay, etc.
• Apple Pay
• Google Pay

Localizations supported: English, Chinese Simplified, Chinese Traditional, French, German, Japanese, Korean, Portuguese Portugal, Portuguese Brazil, Russian, Spanish, Thai.

How it works

Merchants can integrate airwallex-payment-react-native in the checkout page on their app. For every checkout, merchants should create a PaymentIntent entity through the Airwallex API to process payments with Airwallex.

Once the PaymentIntent is successfully created via API integration, the API will return a response with a unique ID and client secret for the intent. Merchants can then use these two keys along with other custom parameters to enable the payment UI to collect payment attempt details.

Installation

npm install airwallex-payment-react-native

Usage

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

// initialize SDK with configurations
initialize();

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'
  };

/* You can also use presentCardPaymentFlow, startGooglePay, startApplePay, payWithCardDetails 
or payWithConsent to launch each individual component. */
presentEntirePaymentFlow(session)
    .then((result) => {
        switch (result.status) {
            // handle different payment result status in your UI
            case 'success':
            case 'inProgress':
            case 'cancelled':
        }
    })
    .catch(
        (error) => // handle error cases
    )

Screenshots

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library