fix: refactored exposed apis#35
Conversation
There was a problem hiding this comment.
Pull request overview
Refactors the public React Native Hyperswitch SDK surface to a new initialization + context model (HyperInit + HyperElements) and introduces a widget-oriented hook (useWidget), while updating the example app accordingly and removing the prior useHyper / HyperProvider exports.
Changes:
- Added new core APIs:
HyperInit(returns a hyper instance promise) andHyperElements(context provider). - Updated
PaymentWidgetto pullclientSecretfromHyperElementscontext; removedclientSecret/sdkAuthorisationfromPaymentSheetConfiguration.options. - Added
useWidgethook and new exported TS types; updated example app to useHyperInit+HyperElements.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/@juspay-tech/react-native-hyperswitch/src/views/PaymentWidget.res | Reads clientSecret from HyperElements context and passes it to the native widget. |
| packages/@juspay-tech/react-native-hyperswitch/src/types/PaymentSheetConfiguration.res | Removes clientSecret / sdkAuthorisation from payment sheet options. |
| packages/@juspay-tech/react-native-hyperswitch/src/types/NativeModuleTypes.res | Updates comment; keeps native widget prop types. |
| packages/@juspay-tech/react-native-hyperswitch/src/types/HyperTypes.res | Introduces new exported types for hyper instance, context data, and widget controller. |
| packages/@juspay-tech/react-native-hyperswitch/src/modules/NativeHyperswitchSdk.res | Changes native module types and adds new method signatures. |
| packages/@juspay-tech/react-native-hyperswitch/src/index.tsx | Re-exports new API surface; removes old exports. |
| packages/@juspay-tech/react-native-hyperswitch/src/hooks/useWidget.res | Adds new useWidget hook + legacy wrapper. |
| packages/@juspay-tech/react-native-hyperswitch/src/hooks/useHyper.res | Comments out legacy hook implementation (effectively removed). |
| packages/@juspay-tech/react-native-hyperswitch/src/core/HyperElements.res | Adds context provider responsible for initialization + holding clientSecret/sdkAuthorisation. |
| packages/@juspay-tech/react-native-hyperswitch/src/core/Hyper.res | Adds Hyper.init producing a hyperInstance and storing global config. |
| packages/@juspay-tech/react-native-hyperswitch/src/context/HyperProvider.res | Comments out legacy provider implementation (effectively removed). |
| example/src/PaymentScreen.tsx | Migrates example to HyperElements + widget flow. |
| example/src/App.tsx | Migrates example initialization to HyperInit. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| let isReady = contextData.isInitialized && contextData.error->Option.isNone | ||
|
|
||
| let initPaymentSession = React.useCallback0((params: initPaymentSessionParams) => { | ||
| nativeHyperswitchSdk.initPaymentSession(~paymentIntentClientSecret=params.paymentIntentClientSecret->Option.getOr(""))->Promise.then(result => { |
There was a problem hiding this comment.
initPaymentSessionParams includes sdkAuthorisation, but useWidgetLegacy.initPaymentSession ignores it and nativeHyperswitchSdk.initPaymentSession only receives paymentIntentClientSecret. This is misleading for API consumers: either remove sdkAuthorisation from the params type / legacy hook, or change the flow so the SDK authorisation is actually applied (e.g., via HyperElements/native init).
| nativeHyperswitchSdk.initPaymentSession(~paymentIntentClientSecret=params.paymentIntentClientSecret->Option.getOr(""))->Promise.then(result => { | |
| nativeHyperswitchSdk.initPaymentSession( | |
| ~paymentIntentClientSecret=params.paymentIntentClientSecret->Option.getOr(""), | |
| ~sdkAuthorisation=params.sdkAuthorisation->Option.getOr(""), | |
| )->Promise.then(result => { |
There was a problem hiding this comment.
will change in upcoming PRs
There was a problem hiding this comment.
@manideepk90 working on updateIntent feature might need this
| import { View, Text } from 'react-native'; | ||
| import { HyperProvider } from '@juspay-tech/react-native-hyperswitch'; | ||
| import { | ||
| HyperInit, |
There was a problem hiding this comment.
TO check if web is making this a default export
There was a problem hiding this comment.
loadHyper is a named import in hyperswitch-web, so keeping parity here, keeping as a named import.
| } | ||
| const hyperPromise = | ||
| publishableKey && profileId ? | ||
| HyperInit(publishableKey, profileId) |
There was a problem hiding this comment.
rename to Hyperswitch
| // Options type for HyperElements | ||
| @genType | ||
| type hyperElementsOptions = { | ||
| clientSecret: option<string>, |
There was a problem hiding this comment.
remove clientSecret flow completely
There was a problem hiding this comment.
This will need client-core changes
| ~customLogUrl: option<string>, | ||
| ~customParams: option<Js.Json.t>, | ||
| ) => { | ||
| await NativeHyperswitchSdk.nativeHyperswitchSdk.initialise( |
There was a problem hiding this comment.
move this call to HyperInit
FIXED
CHANGED:
Deprecated
useHyperandHyperProviderIMPLEMENTATION
HyperInitstores the global variables in a global context.HyperElementresolves thehyperPromiseand internally initailizes the nativeModule withpk_keyand other configs (internally initializing the PaymentSession object on native layer).PaymentWidgetpresents the widget using the clientSecret.