React Native library for Airwallex
npm install 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.
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.
``sh`
npm install airwallex-payment-react-native
`js
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
)
``
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with create-react-native-library