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 the ios 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 or test.
• 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 sheet

  • url (required) - The payment URL to load
  • customStyles (optional) - The custom styles to apply to the payment sheet
  • onPaymentSuccess (optional) - The function to call when the payment is successful
  • onPaymentFailed (optional) - The function to call when the payment is failed
  • onPaymentCancelled (optional) - The function to call when the payment is cancelled
  • userId (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 sheet

  • brandId (required) - The SuperPayments Brand ID from Super Payments Portal
  • publishableApiKey (required) - The public Publishable Api Key from Super Payments Portal
  • onClose (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 in package.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 run CT_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.