{"id":28932319,"url":"https://github.com/juspay/hyper-sdk-expo-plugin","last_synced_at":"2026-07-02T04:32:17.304Z","repository":{"id":257543453,"uuid":"858280109","full_name":"juspay/hyper-sdk-expo-plugin","owner":"juspay","description":"Repository for Expo support on HyperSDK React","archived":false,"fork":false,"pushed_at":"2025-12-10T11:24:48.000Z","size":226,"stargazers_count":0,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-12-10T15:41:06.844Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juspay.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-16T16:15:31.000Z","updated_at":"2025-12-10T11:24:52.000Z","dependencies_parsed_at":"2024-09-17T09:57:16.413Z","dependency_job_id":"957a9e5f-2fab-4e6e-98a7-a8ab7c8c7d56","html_url":"https://github.com/juspay/hyper-sdk-expo-plugin","commit_stats":null,"previous_names":["juspay/hyper-sdk-expo-plugin"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/juspay/hyper-sdk-expo-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyper-sdk-expo-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyper-sdk-expo-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyper-sdk-expo-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyper-sdk-expo-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juspay","download_url":"https://codeload.github.com/juspay/hyper-sdk-expo-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juspay%2Fhyper-sdk-expo-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35033489,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-02T02:00:06.368Z","response_time":173,"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:19.834Z","updated_at":"2026-07-02T04:32:17.231Z","avatar_url":"https://github.com/juspay.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hyper-sdk-expo-plugin\n\nAn Expo config plugin for automating Android \u0026 iOS integration changes for [`hyper-sdk-react`](https://www.npmjs.com/package/hyper-sdk-react) with apps using Expo.\n\n## Installation\n\n```bash\nnpm install hyper-sdk-expo-plugin\nOR\nyarn add hyper-sdk-expo-plugin\n```\n**Note**: Please install `hyper-sdk-react` before doing this.\n```bash\nnpm install hyper-sdk-react\n```\n\n## Uses\n\n### Step-1: Inputs\nExpo config plugin takes some parameters which are needed to setup hyper-sdk-react.\n\nAdd following parameters in app.json\n```JSON\n{\n  \"expo\": {\n    // Others\n    \"extra\": {\n      // ...\n      \"clientId\": \"\u003cclientId shared by Juspay team\u003e\", // Mandatory\n      \"hyperSDKVersion\": \"2.1.33\", // Optional: Override for base SDK version present in plugin (the newer version among both would be considered)\n      \"juspayMavenUrls\": [\n        \"https://maven.juspay.in/jp-build-packages/hyper-sdk/\"\n      ] // Optional\n    },\n    \"plugins\": [\n      // Other plugins\n      \"hyper-sdk-expo-plugin\"\n    ]\n    // ...\n  }\n}\n```\n\n### Step-2:\nThe expo config plugin is configured to execute while running `npx expo prebuild` OR `npx expo prebuild --clean`\n\n**Note**: You must run `npx expo prebuild --clean` after making any change in plugin parameters defined in app.json.\n\n### Step-3:\n- For IOS, go inside iOS folder and run `pod install` to install pods.\n\nUse APIs exposed by `hyper-sdk-react` [here](https://www.npmjs.com/package/hyper-sdk-expo-plugin#exposed-apis)\n\n## hyper-sdk-react\n\n### Exposed APIs\n\n```ts\ntype HyperSdkReactType = {\n  HyperEvent: string;\n  preFetch(data: string): void;\n  createHyperServices(): void;\n  initiate(data: string): void;\n  process(data: string): void;\n  processWithActivity(data: string): void;\n  terminate(): void;\n  onBackPressed(): boolean;\n  isNull(): boolean;\n  isInitialised(): Promise\u003cboolean\u003e;\n  updateBaseViewController(): void;\n};\n\nconst { HyperSdkReact } = NativeModules;\n\nexport default HyperSdkReact as HyperSdkReactType;\n```\n\n### Import HyperSDK\n\n```ts\nimport HyperSdkReact from 'hyper-sdk-react';\n```\n\n### Step-0: PreFetch\n\nTo keep the SDK up to date with the latest changes, it is highly recommended to call `preFetch` as early as possible. It takes a `stringified JSON` as its argument.\n\n```ts\nHyperSdkReact.preFetch(JSON.stringify(preFetchPayload));\n```\n\n### Step-1: Create HyperServices Object\n\nThis method creates an instance of `HyperServices` class in the React Bridge Module on which all the `HyperSDK` APIs / methods are triggered. It internally uses the current activity as an argument.\n\n**Note**: This method is mandatory and is required to call any other subsequent methods from `HyperSDK`.\n\n```ts\nHyperSdkReact.createHyperServices();\n```\n\n### Step-2: Initiate\n\nThis method should be called on the render of the host screen. This will boot up the SDK and start the Hyper engine. It takes a `stringified JSON` as its argument which will contain the base parameters for the entire session and remains static throughout one SDK instance lifetime.\n\nInitiate is an asynchronous call and its result (whether success or failure) is provided in the `Hyper Event listener`, later discussed in [step-4](#step-4-listen-to-events-from-hypersdk).\n\n**Note**: It is highly recommended to initiate SDK from the order summary page (at least 5 seconds before opening your payment page) for seamless user experience.\n\n```ts\nHyperSdkReact.initiate(JSON.stringify(initiatePayload));\n```\n\n### Step-3: Process\n\nThis API should be triggered for all operations required from `HyperSDK`. The operation may be related to:\n\n- Displaying payment options on your payment page\n- Performing a transaction\n- User's payment profile management\n\nThe result of the process call is provided in the `Hyper Event listener`, later discussed in [step-4](#step-4-listen-to-events-from-hypersdk).\n\n```ts\nHyperSdkReact.process(JSON.stringify(processPayload));\n```\n\nIf any of the react-native library is impacting the UI/UX, please use `processWithActivity` instead, which starts a new Activity for opening the Payment Page, isolated of react native.\n\n```ts\nHyperSdkReact.processWithActivity(JSON.stringify(processPayload));\n```\n\n### Step-4: Listen to events from HyperSDK\n\n`Hyper SDK` Native Module will be emitting all the relevant events to JS via `RCTDeviceEventEmitter` and JavaScript modules can then register to receive events by invoking `addListener` on the `NativeEventEmitter` class in the `componentDidMount()` method with the event name `'HyperEvent'` (You can use the `HyperSdkReact.HyperEvent` as well). The listener will return a `stringified JSON` response (`resp`).\n\nThe following events should be handled here:\n\n- `show_loader`: To show a loader for the processing state.\n- `hide_loader`: To hide the previously shown loader.\n- `initiate_result`: Result of initiate done in [step-2](#step-2-initiate).\n- `process_result`: Result of the process operation done in [step-3](#step-3-process).\n\n**Note**: The listener can be removed when the React component unmounts in `componentWillUnmount()` method.\n\n```ts\n componentDidMount() {\n   ...\n   const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact);\n   this.eventListener = eventEmitter.addListener(HyperSdkReact.HyperEvent, (resp) =\u003e {\n     var data = JSON.parse(resp);\n     var event: string = data.event || '';\n     switch (event) {\n       case 'show_loader':\n         // show some loader here\n         break;\n\n       case 'hide_loader':\n         // hide the loader\n         break;\n\n       case 'initiate_result':\n         var payload = data.payload || {};\n         console.log('initiate_result: ', payload);\n         // merchant code\n         ...\n         break;\n\n       case 'process_result':\n         var payload = data.payload || {};\n         console.log('process_result: ', payload);\n         // merchant code\n         ...\n         break;\n\n       default:\n         console.log('Unknown Event', data);\n     }\n     ...\n   });\n   ...\n }\n\n componentWillUnmount() {\n   ...\n   this.eventListener.remove();\n   ...\n }\n```\n\n### Step-5: Android Hardware Back-Press Handling\n\n`Hyper SDK` internally uses an android fragment for opening the bank page and will need the control to hardware back press when the bank page is active. This can be done by invoking `addEventListener` on the `BackHandler` provided by React-Native.\n\nIf the blocking asynchronous call `HyperSdkReact.onBackPressed()` returns true, `Hyper SDK` will handle the back press, else merchant can handle it.\n\n**Note**: `HyperSdkReact.isNull()` (refer [here](#helper-is-null)) can also be called before calling `onBackPressed()` to ensure that the HyperServices object is not null.\n\n```ts\n componentDidMount() {\n   ...\n   BackHandler.addEventListener('hardwareBackPress', () =\u003e {\n     return !HyperSdkReact.isNull() \u0026\u0026 HyperSdkReact.onBackPressed();\n   });\n   ...\n }\n\n componentWillUnmount() {\n   ...\n   BackHandler.removeEventListener('hardwareBackPress', () =\u003e null);\n   ...\n }\n```\n\n### Step-6: Android Permissions Handling\n\nHyper SDK needs to listen to the response of permissions asked to the user for handling auto SMS reading (wherever applicable). To do so, the merchant's activity should delegate the response to Hyper SDK once it is received from the user. This can be done by adding the following snippet in merchant's react activity (`MainActivity`):\n\n```java\n  @Override\n  public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {\n      if (HyperSdkReactModule.getPermissionRequestCodes().contains(requestCode)) {\n          HyperSdkReactModule.onRequestPermissionsResult(requestCode, permissions, grantResults);\n      } else {\n          super.onRequestPermissionsResult(requestCode, permissions, grantResults);\n      }\n  }\n```\n\n### Step-7: Terminate\n\nThis method shall be triggered when `HyperSDK` is no longer required.\n\n```ts\nHyperSdkReact.terminate();\n```\n\n### Helper: Is Null\n\nThis is a helper method and can be used to check whether the `HyperServices` object is `null` at any particular moment. It is a blocking synchronous method and returns a `boolean` value.\n\n```ts\nvar isNull: boolean = HyperSdkReact.isNull();\nconsole.log('is HyperSDK null: ', isNull);\n```\n\n### Optional: Is Initialised\n\nThis is a helper / optional method to check whether SDK has been initialised after [step-2](#step-2-initiate). It returns a `JS Promise` with a `boolean` value.\n\n```ts\nHyperSdkReact.isInitialised().then((init: boolean) =\u003e {\n  console.log('isInitialised:', init);\n});\n```\n\n### Optional: Update Base ViewController - Only for iOS\n\nThis is an optional method to update the base view controller in case if any new view controller is presented over top view controller after the SDK initiation. This method should be called before making `HyperSdkReact.process()` call.\n\n```ts\nHyperSdkReact.updateBaseViewController();\n```\n\n### Optional: Support for adding merchant views\n\nThis sections helps to attach custom views inside designated sections in the payment page. You will need to register the component to be attached under one of the following names, based on where the component is attached.\n\n1. JuspayHeaderAttached\n1. JuspayHeader\n1. JuspayFooter\n1. JuspayFooterAttached\n\nYou can follow the below syntax to attach the component.\n```ts\nHyperSdkReact.notifyAboutRegisterComponent(HyperSdkReact.JuspayHeaderAttached)\nAppRegistry.registerComponent(HyperSdkReact.JuspayHeaderAttached, () =\u003e CustomComponent);\n```\n\nPlease note component must be registered before calling process call of the sdk.\n\nNote: In iOS we are not able to infer the height of the component being rendered.\nTherefore the component must fire `HyperSdkReact.updateMerchantViewHeight(\u003csection_name\u003e, \u003cheight\u003e);`\n\nFor example\n```ts\nHyperSdkReact.updateMerchantViewHeight(HyperSdkReact.JuspayHeader, 200);\n```\n\nIf your view dynamically computes height. Height can be obtained by adding the following property to the root of component registered\n```ts\n  onLayout={(event) =\u003e {\n        const { height } = event.nativeEvent.layout;\n        HyperSdkReact.updateMerchantViewHeight(HyperSdkReact.JuspayHeader, height);\n      }}\n\n```\n\n## License\n\n**hyper-sdk-expo-plugin** is distributed under [Apache 2.0](https://github.com/juspay/hyper-sdk-expo-plugin/blob/main/LICENSE.md) license.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuspay%2Fhyper-sdk-expo-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuspay%2Fhyper-sdk-expo-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuspay%2Fhyper-sdk-expo-plugin/lists"}