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 SDK, run one of the following commands in your project’s directory:

npm install @westpac-developer/sdk

yarn add @westpac-developer/sdk

Install dependencies

Install the required peer dependencies:

npm install @rnw-community/react-native-payments @react-navigation/native @react-navigation/stack \
        @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler \
        @google/react-native-make-payment react-native-svg react-native-network-info \
        react-native-device-info react-native-localize react-native-payment-icons \
        @react-native-clipboard/clipboard lucide-react-native

yarn add @rnw-community/react-native-payments @react-navigation/native @react-navigation/stack \
        @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler \
        @google/react-native-make-payment react-native-svg react-native-network-info \
        react-native-device-info react-native-localize 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

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.