# React Native SDK integration

A guide to integrating the Peach Orchestration mobile SDK into a React Native app using the `@juspay-tech/hyperswitch-sdk-react-native` package. Minimum: React Native 0.70+.

## What this page covers
- Ten sections: Prerequisites, Installation, Configuration, Basic integration, Payment methods, Saved cards, Error handling, Customisation, Testing, Troubleshooting
- Prerequisites and getting Dashboard credentials (publishable key `pk_snd_xxx`/`pk_prd_xxx`)
- Installing the package and running `pod install` for iOS (Android needs minSdkVersion 21)
- Wrapping the app in `HyperProvider` and driving the payment sheet via the `useHyper` hook
- Payment methods (including Google Pay config), saved cards, error handling and testing

## Key steps / API

Install: `npm install @juspay-tech/hyperswitch-sdk-react-native` (then `cd ios && pod install`).

```typescript
import { HyperProvider, useHyper } from '@juspay-tech/hyperswitch-sdk-react-native';

// 1. Wrap your app
<HyperProvider
  publishableKey="pk_test_your_publishable_key"
  customBackendUrl="https://app.sandbox-next.peachpayments.com/api"
>
  {/* app */}
</HyperProvider>

// 2. In a screen, use the hook
const { initPaymentSession, presentPaymentSheet } = useHyper();

// clientSecret comes from your server
const session = await initPaymentSession({
  clientSecret,
  merchantDisplayName: 'Your Store',
});

// 3. Present the sheet — result has { type_, code, message, status }
const result = await presentPaymentSheet(session);
```

Other real API surface referenced in the source:
- `HyperProvider` props: `publishableKey`, `customBackendUrl`
- `useHyper()` exposes `initPaymentSession` and `presentPaymentSheet`
- `initPaymentSession({ clientSecret, merchantDisplayName, configuration })` — `configuration` can include `googlePay` (`merchantCountryCode`, `currencyCode`) and `allowsDelayedPaymentMethods`
- `presentPaymentSheet(session)` resolves to a result object (`{ type_, code, message, status }`); `status === 'cancelled'` means the user dismissed

Sandbox API base is `https://app.sandbox-next.peachpayments.com/api`; production is `https://app.next.peachpayments.com/api`. Ensure `initPaymentSession` completes before `presentPaymentSheet`.

## Related
- [iOS SDK](/sdk-mobile-ios.md): the native iOS layer this wraps
- [Android SDK](/sdk-mobile-android.md): the native Android layer this wraps
- [Web SDK](/sdk-web.md): browser integration
- [API Playground](/playground.md): create a payment intent and get a `client_secret`
- [Testing](/docs/testing.md): test cards and sandbox guidance

---

Interactive version: https://playground.peachpayments.com/sdk-mobile/react-native