> For the complete documentation index, see [llms.txt](https://docs.hyperswitch.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hyperswitch.io/integration-guide/payment-experience/pay-then-vault/mobile/cross-platform/react-native/react-native-with-rest-api-integration.md).
# React Native with REST API Integration
{% hint style="info" %}
Use this guide to integrate the Juspay Hyperswitch React Native SDK to your React Native app. You can use the following Demo App as a reference with your Hyperswitch credentials to test the setup.
{% endhint %}
#### Find the Demo App
Find the demo app [here](https://github.com/juspay/react-native-hyperswitch)
Before proceeding with these steps, please ensure that your payment methods are configured here.
#### Requirements
* Android 7.0 (API level 24) and above
* [Android Gradle Plugin](https://developer.android.com/studio/releases/gradle-plugin) 7.3.1
* [Gradle](https://gradle.org/releases/) 7.5.1+
* [AndroidX](https://developer.android.com/jetpack/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 `@juspay-tech/react-native-hyperswitch` library**
Install the packages and import it into your code
```bash
yarn add @juspay-tech/react-native-hyperswitch
or
npm install @juspay-tech/react-native-hyperswitch
```
**2.2 Peer Dependencies**
Install the following dependencies
```js
yarn add react-native-inappbrowser-reborn
yarn add react-native-svg
yarn add @sentry/react-native
```
**2.3 iOS Only**
Run `pod install` in iOS folder
```js
pod install
```
**2.4 Use `HyperProvider`**
To initialize Juspay Hyperswitch in your React Native app, wrap your payment screen with the **HyperProvider** component. The only required configuration is the **API publishable key**, which should be provided through the `publishableKey` prop.
```js
import { HyperProvider } from '@juspay-tech/react-native-hyperswitch';
function App() {
return (
// Your app code here
);
}
```
#### 3. Complete the checkout on the client
**3.1 import useHyper to your checkout page**
In your checkout screen, import and use the **`useHyper()`** hook to access Juspay Hyperswitch payment methods and functionality.
```js
import { useHyper } from '@juspay-tech/react-native-hyperswitch';
```
**3.2 Fetch the PaymentIntent client Secret**
Send a network request to the backend endpoint created in the previous step to retrieve the **clientSecret**. The **clientSecret** returned by this endpoint is required to complete the payment.
```js
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 initialize the Payment Sheet and configure options such as **appearance, billing details, or shipping address** before presenting the payment flow.
```js
const { initPaymentSession, presentPaymentSheet } = useHyper();
const [ paymentSession, setPaymentSession ]=React.useState(null);
const initializePaymentSheet = async () => {
const { clientSecret, sdkAuthorization } = await fetchPaymentParams();
const customAppearance = {
colors: {
light: {
primary: "#00FF00",
},
},
};
const params={
merchantDisplayName: "Example, Inc.",
clientSecret: clientSecret,
sdkAuthorization: sdkAuthorization,
appearance: customAppearance
}
const result = await initPaymentSession(params);
if (result.error) {
console.error('Payment session initialization failed:', result.error);
} else {
setPaymentSession(_ => paymentSession)
}
};
useEffect(() => {
initializePaymentSheet();
}, []);
```
**3.4 Handle Payment Response**
To display the **Payment Sheet**, add a **"Pay Now"** button to your checkout page. When the button is pressed, call the **`presentPaymentSheet()`** function.
This function returns an **asynchronous response** containing the payment result, including the payment status.
```js
const openPaymentSheet = async () => {
const result = await presentPaymentSheet(paymentSession);
if (result.error) {
console.log(`Error code: ${error.code}`, error.message);
} else if (result.status) {
switch (result.status) {
case 'succeeded':
console.log('succeeded', `Your order is succeeded`);
break;
case 'requires_capture':
console.log('requires_capture', `Your order is requires_capture`);
break;
case 'cancelled':
console.log('cancelled', `Payment is cancelled`);
case 'failed':
console.log('failed', `Payment is failed');
default:
console.log('status not captured', 'Please check the integration');
break;
}
} else {
console.log('Something went wrong', 'Please check the integration');
}
};
return (
);
```
{% hint style="danger" %}
Retrieve the **payment status from the Juspay Hyperswitch backend** to determine the final (terminal) status of the transaction. Do not rely solely on the status returned by the SDK, as it may not always represent the definitive outcome of the payment.
{% endhint %}
Congratulations! Now that you have integrated the payment sheet
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.hyperswitch.io/integration-guide/payment-experience/pay-then-vault/mobile/cross-platform/react-native/react-native-with-rest-api-integration.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.