> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pesaswap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native with Node Backend

Integrate Pesaswap SDK to your React Native App using Pesaswap-node

<Info>Use this guide to integrate Pesaswap SDK to your React Native app. You can use the following Demo App as a reference with your Pesaswap credentials to test the setup.</Info>

### Demo App

**Before following these steps, please configure your payment methods.**

## Requirements

* Android 5.0 (API level 21) and above
* Android Gradle Plugin 7.3.1
* Gradle 7.5.1+
* AndroidX
* iOS 12.4 and above
* CocoaPods
* npm

## 1. Setup the Server

Follow the Server Setup section.

## 2. Build Checkout Page on the Client

### 2.1 Install the Pesaswap-sdk-react-native Libraries

Install the packages and import them into your code:

```bash theme={"system"}
$ yarn add @Pesaswap-/Pesaswap-sdk-react-native
```

or

```bash theme={"system"}
$ npm install @Pesaswap-/Pesaswap-sdk-react-native
```

### 2.2 Peer Dependencies

Install the following dependencies:

```bash theme={"system"}
yarn add react-native-code-push
yarn add react-native-gesture-handler
yarn add react-native-inappbrowser-reborn
yarn add react-native-safe-area-context
yarn add react-native-svg
yarn add @sentry/react-native
yarn add react-native-pager-view
yarn add react-native-screens
yarn add react-native-Pesaswap-kount
yarn add react-native-klarna-inapp-sdk
```

**Note:** If you encounter any issues with `react-native-klarna-inapp-sdk`, please remove it from the dependencies.

### 2.3 iOS Only

Run pod install in the iOS folder:

```bash theme={"system"}
pod install
```

### 2.4 Android Only

In the Android folder inside the `strings.xml` file (`android/app/src/main/res/values/strings.xml`), add the below line:

```xml theme={"system"}
<string name="CodePushDeploymentKey">PesaswapRNDemo</string>
```

In the `android/settings.gradle` file, add the following line to link react-native-code-push:

```gradle theme={"system"}
include(":react-native-code-push");

project(":react-native-code-push").projectDir = new File(
  rootProject.projectDir,
  "../node_modules/react-native-code-push/android/app"
);
```

In the Android folder inside main (`android/app/src/main/AndroidManifest.xml`), add these lines to the existing code:

```xml theme={"system"}
<manifest xmlns:tools="http://schemas.android.com/tools">
  <application
    tools:replace="android:allowBackup">
    <!-- Other existing elements in the <application> tag -->
  </application>
</manifest>
```

### 2.5 Add HyperProvider to Your React Native App

Use `HyperProvider` to ensure that you stay PCI compliant by sending payment details directly to the Pesaswap server.

```javascript theme={"system"}
import { HyperProvider } from "@Pesaswap-/Pesaswap-sdk-react-native";
```

### 2.6 Use HyperProvider

To initialize Pesaswap in your React Native app, wrap your payment screen with the `HyperProvider` component. Only the API publishable key in `publishableKey` is required. The following example shows how to initialize Pesaswap using the `HyperProvider` component:

```javascript theme={"system"}
import { HyperProvider } from '@Pesaswap-/Pesaswap-sdk-react-native';

function App() {
  return (
    <HyperProvider publishableKey="YOUR_PUBLISHABLE_KEY">
      {/* Your app code here */}
    </HyperProvider>
  );
}
```

## 3. Complete the Checkout on the Client

### 3.1 Import useHyper to Your Checkout Page

In the checkout of your app, import the `useHyper()` hook:

```javascript theme={"system"}
import { useHyper } from '@Pesaswap-/Pesaswap-sdk-react-native';
```

### 3.2 Fetch the PaymentIntent Client Secret

Make a network request to the backend endpoint you created in the previous step. The `clientSecret` returned by your endpoint is used to complete the payment:

```javascript theme={"system"}
const fetchPaymentParams = async () => {
  const response = await fetch(`${API_URL}/create-payment`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ items: [{ id: "xl-tshirt" }], country: "US" }),
  });
  const val = await response.json();
  return val;
};
```

### 3.3 Collect Payment Details

Call `initPaymentSession` from the `useHyper` hook to customize the payment sheet, billing or shipping addresses, and initialize the payment sheet:

```javascript theme={"system"}
const { initPaymentSession, presentPaymentSheet } = useHyper();
const [paymentSession, setPaymentSession] = React.useState(null);

const initializePaymentSheet = async () => {
  const { clientSecret } = await fetchPaymentParams();

  const customAppearance = {
    colors: {
      light: {
        primary: "#00FF00",
      },
    },
  };

  const params = {
    merchantDisplayName: "Example, Inc.",
    clientSecret: clientSecret,
    appearance: customAppearance,
  };

  const paymentSession = await initPaymentSession(params);
  setPaymentSession(() => paymentSession);
};

useEffect(() => {
  initializePaymentSheet();
}, []);
```

### 3.4 Handle Payment Response

To display the Payment Sheet, integrate a "Pay Now" button within the checkout page, which, when clicked, invokes the `presentPaymentSheet()` function. This function will return an asynchronous payment response with various payment statuses:

```javascript theme={"system"}
const openPaymentSheet = async () => {
  console.log("Payment Session Params --> ", paymentSession);
  const status = await presentPaymentSheet(paymentSession);
  console.log('presentPaymentSheet response: ', status);
  
  const { error, paymentOption } = status;
  
  if (error) {
    switch (error.code) {
      case 'cancelled':
        console.log('cancelled', 'PaymentSheet was closed');
        break;
      case 'failed':
        console.log('failed', 'Payment failed');
        break;
      default:
        console.log('status not captured', 'Please check the integration');
        break;
    }
    console.log(`Error code: ${error.code}`, error.message);
  } else if (paymentOption) {
    switch (paymentOption.label) {
      case 'succeeded':
        console.log('succeeded', 'Your order has succeeded');
        break;
      case 'requires_capture':
        console.log('requires_capture', 'Your order requires capture');
        break;
      default:
        console.log('status not captured', 'Please check the integration');
        break;
    }
  } else {
    console.log('Something went wrong', 'Please check the integration');
  }
};

return (
  <Screen>
    <Button variant="primary" title="Checkout" onPress={openPaymentSheet} />
  </Screen>
);
```

<Warning>Please retrieve the payment status from the Pesaswap backend to get the terminal status of the payment. Do not rely solely on the status returned by the SDK, as it may not always reflect the final state of the transaction.</Warning>

## Congratulations!

Now that you have integrated the Pesaswap SDK into your React Native app, you can customize the payment sheet to match your app's design and branding.