Super React Native SDK
The Super React Native SDK allows you to use Super Payments in your native Android and iOS apps using React Native.
We do not support Expo projects yet.
Installation
yarn add @superpayments/super-react-native
or
npm install @superpayments/super-react-native
Dependencies
This library needs these dependencies to be installed in your project before you can use it:
yarn add @gorhom/bottom-sheet@^5 react-native-reanimated react-native-gesture-handler
or
npm install @gorhom/bottom-sheet@^5 react-native-reanimated react-native-gesture-handler
Link dependencies
From react-native: 0.60
autolinking will take care of the link step.
Android
- No need to run anything
iOS
- Run
pod install
from theios
directory to install the native dependencies
Requirements
Android
- Android 6.0 and above
iOS
- Requires Xcode 14.1 or later
- Requires to add
WebKit.framework
to the project- Open Xcode and select the project file
- Select the target
- Select the
General
tab - Select the
Frameworks, Libraries, and Embedded Content
section - Click the
+
button - Select
WebKit.framework
- Click
Add
Components and props
SuperPaymentsProvider
environment
(optional) - This will handle what type of offers we are going to show. Accepted values:production
(default),staging
ortest
.sheetProps
(optional)maxHeightPercentage
(optional) - The maximum height of the payment sheet as a percentage of the screen height (default: 90%)displayHandle
(optional) - Whether to display the handle of the payment sheet (default: true)displayCloseButton
(optional) - Whether to display an X button to close the payment sheet (default: false)
useSuperPayments
-
presentPaymentSheet
(required) - The function to present the payment sheeturl
(required) - The payment URL to loadcustomStyles
(optional) - The custom styles to apply to the payment sheetonPaymentSuccess
(optional) - The function to call when the payment is successfulonPaymentFailed
(optional) - The function to call when the payment is failedonPaymentCancelled
(optional) - The function to call when the payment is cancelleduserId
(optional) - The SDK consumer internal userId that will help us to understand who did the payment without exposing sensitive information
-
presentOffersSheet
(required) - The function to present the payment sheetbrandId
(required) - The SuperPayments Brand ID from Super Payments PortalpublishableApiKey
(required) - The public Publishable Api Key from Super Payments PortalonClose
(optional) - The function to call when a user decides to close the Sheet
Usage example
import { SuperPaymentsProvider } from '@superpayments/super-react-native';
// App.tsx
const App = () => {
return (
<SuperPaymentsProvider sheetProps={{
maxHeightPercentage: '80%',
displayHandle: false,
displayCloseButton: true,
}}>
<CustomComponent />
</SuperPaymentsProvider>
);
};
// PaymentScreen.tsx
import { useSuperPayments } from '@superpayments/super-react-native';
const PaymentScreen = () => {
const { presentPaymentSheet } = useSuperPayments();
const handlePress = () => {
presentPaymentSheet({
url: paymentUrl // url from the API integration
customStyles: {
payButton: {
backgroundColor: '#ff8f00',
fontColor: '#000000',
},
},
// Payment Sheet will close automatically
onPaymentSuccess: () => {
// Payment Success
},
// Payment Sheet will close automatically
onPaymentFailed: () => {
// Payment Failed
},
});
};
return <Button onPress={handlePress} title="Pay" />;
};
Setup for development
- Change
"includesGeneratedCode": false
to"includesGeneratedCode": true
inpackage.json
- Run
yarn install
from the root directory - Run
yarn prepare
from the root directory - To install pods you need to go to
example/ios
and runCT_NEW_ARCH_ENABLED=0 pod install
Once these steps are you should be able to run the app from the command line, xcode or Android Studio.