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

• 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

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" />;
};