React Native SDK

Build payments in your native Android and iOS apps using React Native. Collect your customers' payment account details using the pre-built Payment Sheet UI, or build your own Custom UI and access QuickStream gateway components directly.

Getting started

Step 1: API credentials

Make sure that you have received your Publishable and Secret REST API keys for our QuickStream REST API.

Step 2: Server-side

1. Create an endpoint for your back-end to receive a singleUseTokenId from the SDK. This is generated by the SDK from the Single-use Token API using your Publishable API key.
2. Set up your back-end implementation to take a payment using a singleUseTokenId via the Transactions API.

Step 3: Client-side

Refer to the React Native SDK Reference.

Install the SDK

To install the React Native Core package, run one of the following commands in your project's directory:

npm install @westpac-developer/react-native-core

yarn add @westpac-developer/react-native-core

Install the React Native SDK package only if you want to use the Payment Sheet UI. Run one of the following commands in your project's directory:

npm install @westpac-developer/react-native-sdk

yarn add @westpac-developer/react-native-sdk

Install dependencies

Install the required peer dependencies:

npm install react react-native

yarn add react react-native

Install the following dependencies if you want to use the Payment Sheet UI.

npm install @react-navigation/native @react-navigation/stack @gorhom/bottom-sheet \
        react-native-reanimated react-native-gesture-handler react-native-svg \
        react-native-payment-icons @react-native-clipboard/clipboard lucide-react-native

yarn add @react-navigation/native @react-navigation/stack @gorhom/bottom-sheet \
        react-native-reanimated react-native-gesture-handler react-native-svg \
        react-native-payment-icons @react-native-clipboard/clipboard lucide-react-native

Link iOS modules

Link native modules for iOS. There are no modules to link for Android.

cd ios && pod install

Android setup

Android modules are auto-linked. Rebuild your Android app after installation.

cd android && ./gradlew clean

Add TypeScript Support

Follow the official guide for Adding TypeScript to an Existing Project.

Integrations

Choose from the Payment Sheet or Custom UI integrations, and refer to the SDK Reference for more.