# 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

Shell

```shell
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:

Shell

```shell
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

tsx

```tsx
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.