{"id":28932297,"url":"https://github.com/juspay/hyperswitch-sdk-react-native","last_synced_at":"2026-01-12T05:30:18.967Z","repository":{"id":244033198,"uuid":"814108931","full_name":"juspay/hyperswitch-sdk-react-native","owner":"juspay","description":"hyperswitch-sdk-react-native","archived":false,"fork":false,"pushed_at":"2025-09-17T06:55:14.000Z","size":6511,"stargazers_count":5,"open_issues_count":3,"forks_count":6,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-09-26T07:52:34.298Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juspay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-12T11:03:38.000Z","updated_at":"2025-05-19T16:02:49.000Z","dependencies_parsed_at":"2024-07-11T14:12:17.927Z","dependency_job_id":"352936eb-16de-4000-8443-b2df2641e1e3","html_url":"https://github.com/juspay/hyperswitch-sdk-react-native","commit_stats":null,"previous_names":["aashu331998/hyperswitch-sdk-react-native","juspay/hyperswitch-sdk-react-native"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/juspay/hyperswitch-sdk-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyperswitch-sdk-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyperswitch-sdk-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyperswitch-sdk-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyperswitch-sdk-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juspay","download_url":"https://codeload.github.com/juspay/hyperswitch-sdk-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyperswitch-sdk-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-22T16:41:11.336Z","updated_at":"2026-01-12T05:30:18.952Z","avatar_url":"https://github.com/juspay.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hyperswitch React Native SDK\n\n![NPM Version](https://img.shields.io/npm/v/%40juspay-tech%2Fhyperswitch-sdk-react-native)\n![NPM License](https://img.shields.io/npm/l/%40juspay-tech%2Fhyperswitch-sdk-react-native)\n\nThe Hyperswitch React Native SDK allows you to build delightful payment experiences in your native Android and iOS apps using React Native. We provide powerful and customizable UI screens and elements that can be used out-of-the-box to collect your users' payment details.\n\n## Getting started\n\nGet started with our [📚 integration guides](https://docs.hyperswitch.io/hyperswitch-cloud/integration-guide) and [example project](https://github.com/aashu331998/hyperswitch-sdk-react-native/tree/main/example), or [📘 browse the SDK reference](https://docs.hyperswitch.io/learn-more/sdk-reference).\n\n## Features\n\n**Simplified Security**: We make it simple for you to collect sensitive data such as credit card numbers and remain [PCI compliant](https://docs.hyperswitch.io/hyperswitch-open-source/going-live/pci-compliance#pci-compliance-why-and-what). This means the sensitive data is sent directly to Hyperswitch instead of passing through your server.\n\n**Wallets**: We provide a seamless integration with Apple Pay and Google Pay.\n\n**Payment methods**: Accepting more [payment methods](https://Hyperswitch.com/docs/payments/payment-methods/overview) helps your business expand its global reach and improve checkout conversion.\n\n**SCA-Ready**: The SDK automatically performs [3D Secure authentication](https://docs.hyperswitch.io/features/payment-flows-and-management/external-authentication-for-3ds#why-do-we-need-external-authentication) regulation in Europe.\n\n**Native UI**: We provide native screens and elements to securely collect payment details on Android and iOS.\n\n#### Recommended usage\n\nIf you're selling digital products or services within your app, (e.g. subscriptions, in-game currencies, game levels, access to premium content, or unlocking a full version), you must use the app store's in-app purchase APIs. See [Apple's](https://developer.apple.com/app-store/review/guidelines/#payments) and [Google's](https://support.google.com/googleplay/android-developer/answer/9858738?hl=en\u0026ref_topic=9857752) guidelines for more information. For all other scenarios you can use this SDK to process payments via Hyperswitch.\n\n## Installation\n\n```sh\nyarn add @juspay-tech/hyperswitch-sdk-react-native\n\nor\nnpm install @juspay-tech/hyperswitch-sdk-react-native\n\n```\n\n### Requirements\n\n#### Peer Dependencies\n\n- Please add the following peer dependencies to your app.\n\n```tsx\nyarn add react-native-code-push\nyarn add react-native-gesture-handler\nyarn add react-native-inappbrowser-reborn\nyarn add react-native-safe-area-context\nyarn add react-native-svg\nyarn add @sentry/react-native\nyarn add react-native-pager-view\nyarn add react-native-screens\nyarn add react-native-hyperswitch-kount\nyarn add react-native-klarna-inapp-sdk\n\n```\n\n**Note:** If you encounter any issues with `react-native-klarna-inapp-sdk`, please remove it from the dependencies.\n\n## iOS Only\n\nRun pod install in iOS folder\n\n```bash\n\npod install\n\n```\n\n## Android Only\n\nIn the Android Folder inside strings.xml file(android/app/src/main/res/values/strings.xml) add the below line\n\n```xml\n\u003cstring name=\"CodePushDeploymentKey\"\u003eHyperswitchRNDemo\u003c/string\u003e\n```\n\nIn the android/settings.gradle file, add the following line to link react-native-code-push:\n\n```gradle\ninclude(\":react-native-code-push\");\n\nproject(\":react-native-code-push\").projectDir = new File(\n  rootProject.projectDir,\n  \"../node_modules/react-native-code-push/android/app\"\n);\n```\n\nIn the android/settings.gradle file, add the following line to link `react-native-code-push:`\n\nIn the Android folder inside main (android/app/src/main/AndroidManifest.xml) add these below lines to the existing code.\n\n```\n\n\u003cmanifest xmlns:tools=\"http://schemas.android.com/tools\"\u003e\n  \u003capplication\n    tools:replace=\"android:allowBackup\"\u003e\n    \u003c!-- Other existing elements in the \u003capplication\u003e tag --\u003e\n  \u003c/application\u003e\n\u003c/manifest\u003e\n\n```\n\n## Usage example\n\nFor a complete example, [visit our docs](https://docs.hyperswitch.io/hyperswitch-cloud/integration-guide/react-native/react-native-with-node-backend).\n\n## Setup Server\n```\nconst express = require('express');\nconst app = express();\n// Replace if using a different env file or config\nconst env = require('dotenv').config({path: './.env'});\n\nconst hyper = require('@juspay-tech/hyperswitch-node')(getSecretKey());\n// Define a port to listen on\nconst PORT = process.env.PORT || 4242;\n\nfunction getSecretKey() {\n  return process.env.HYPERSWITCH_SECRET_KEY;\n}\n\nfunction getPublishableKey() {\n  return process.env.HYPERSWITCH_PUBLISHABLE_KEY;\n}\n\napp.get('/get-config', async (req, res) =\u003e {\n  try {\n    res.send({\n      publishableKey: getPublishableKey(),\n    });\n  } catch (err) {\n    return res.status(400).send({\n      error: {\n        message: err.message,\n      },\n    });\n  }\n});\n\napp.post('/create-payment', async (req, res) =\u003e {\n  try {\n    const paymentIntent = await hyper.paymentIntents.create({\n      amount: 2999,\n      currency: 'USD',\n    });\n\n    console.log('-- paymentIntent', paymentIntent);\n    // Send publishable key and PaymentIntent details to client\n    res.send({\n      clientSecret: paymentIntent.client_secret,\n    });\n  } catch (err) {\n    return res.status(400).send({\n      error: {\n        message: err.message,\n      },\n    });\n  }\n});\n\napp.listen(PORT, () =\u003e {\n  console.log(`Hyperswitch Server is running on http://localhost:${PORT}`);\n});\n\n```\n\n\n## 1.1 Add `HyperProvider` to your React Native app\n\nUse `HyperProvider` to ensure that you stay PCI compliant by sending payment details directly to Hyperswitch server.\n\n```tsx\nimport { HyperProvider } from '@juspay-tech/hyperswitch-sdk-react-native';\n```\n\n## 1.2 Use `HyperProvider`\n\nTo initialize Hyperswitch 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 Hyperswitch using the HyperProvider component.\n\n```tsx\nimport { HyperProvider } from '@juspay-tech/hyperswitch-sdk-react-native';\n\nfunction App() {\n  return (\n    \u003cHyperProvider publishableKey=\"YOUR_PUBLISHABLE_KEY\"\u003e\n      // Your app code here\n    \u003c/HyperProvider\u003e\n  );\n}\n```\n\n## 2. Complete the checkout on the client\n\n## 2.1 import useHyper to your checkout page\n\nIn the checkout of your app, import `useHyper()` hook\n\n```tsx\nimport { useHyper } from '@juspay-tech/hyperswitch-sdk-react-native';\n```\n\n## 2.2 Fetch the PaymentIntent client Secret\n\nMake 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.\n\n```tsx\nconst fetchPaymentParams = async () =\u003e {\n  const response = await fetch(`${API_URL}/create-payment`, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    body: JSON.stringify({ items: [{ id: 'xl-tshirt' }], country: 'US' }),\n  });\n  const val = await response.json();\n  return val;\n};\n```\n\n## 2.3 Collect Payment details\n\nCall initPaymentSession from the useHyper hook to customise paymentsheet, billing or shipping addresses and initialize paymentsheet\n\n```tsx\nconst { initPaymentSession, presentPaymentSheet } = useHyper();\nconst [paymentSession,setPaymentSession]=React.useState(null);\nconst initializePaymentSheet = async () =\u003e {\nconst { clientSecret } = await fetchPaymentParams();\n\nconst customAppearance = {\n      colors: {\n          light: {\n          primary: \"#00FF00\",\n          },\n      },\n    };\nconst params={\n    merchantDisplayName: \"Example, Inc.\",\n    clientSecret: clientSecret,\n    appearance: customAppearance,\n}\nconst paymentSession = await initPaymentSession(params);\nsetPaymentSession(_=\u003epaymentSession)\n};\n\nuseEffect(() =\u003e {\ninitializePaymentSheet();\n}, []);\n```\n\n## 2.4 Handle Payment Response\n\nTo 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 status.\n\n```tsx\n  const openPaymentSheet = async () =\u003e {\n    console.log(\"Payment Session Params --\u003e \", paymentSession);\n    const status = await presentPaymentSheet(paymentSession);\n    console.log('presentPaymentSheet response: ', status);\n    const {error, paymentOption} = status;\n    if (error) {\n      switch (error.code) {\n        case 'cancelled':\n          console.log('cancelled', `PaymentSheet was closed`);\n          break;\n        case 'failed':\n          console.log('failed', `Payment failed`);\n          break;\n        default:\n          console.log('status not captured', 'Please check the integration');\n          break;\n      }\n\n      console.log(`Error code: ${error.code}`, error.message);\n    } else if (paymentOption) {\n      switch (paymentOption.label) {\n        case 'succeeded':\n          console.log('succeeded', `Your order is succeeded`);\n          break;\n        case 'requires_capture':\n          console.log('requires_capture', `Your order is requires_capture`);\n          break;\n        default:\n          console.log('status not captured', 'Please check the integration');\n          break;\n      }\n    } else {\n      console.log('Something went wrong', 'Please check the integration');\n    }\n  };\n\n\nreturn (\n  \u003cScreen\u003e\n    \u003cButton variant=\"primary\" title=\"Checkout\" onPress={openPaymentSheet} /\u003e\n  \u003c/Screen\u003e\n);\n```\n\nCongratulations! Now that you have integrated the payment sheet.\n\n## Example\nTo test the example app located in the ./example/ directory of your repository, you can follow these steps:\n\n### 1. Navigate to the Project Directory\nOpen a terminal and change to the ./example/ directory:\n\n\n```bash\ncd ./example/\n```\n\n### 2. Install Dependencies\nEnsure you have all necessary dependencies installed. This usually involves running:\n\n```bash\nnpm install\n```\nor if you’re using Yarn:\n\n```bash\nyarn install\n```\n\n4. Run the Application\nTo test the app, you can start it on an emulator or a physical device.\n\n```bash\nnpm start\n```\nor if you’re using Yarn:\n```bash\nyarn start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuspay%2Fhyperswitch-sdk-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuspay%2Fhyperswitch-sdk-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuspay%2Fhyperswitch-sdk-react-native/lists"}