feat: added initPaymentSession and usePaymentSession

[sakksham7]

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

---

Description
Adds Payment Session support to @juspay-tech/react-hyper-js, exposing the SDK's initPaymentSession and updateIntent capabilities to React consumers via two approaches:
React Wrapper (react-hyper-js/)

• initPaymentSession(hyperPromise, options) — A standalone async function for fully headless (no UI) usage. Accepts a hyper promise and a JSON.t options object (containing clientSecret/sdkAuthorization), passes it through to the SDK's hyper.initPaymentSession(options), and returns a payment session object with getCustomerSavedPaymentMethods() and updateIntent() methods.
• usePaymentSession() hook — Returns the payment session from React context for use inside the component tree.
• HyperElements enhancement — Now also calls switchInstance.initPaymentSession(options) internally and wraps children with , making the session available via usePaymentSession() without any additional provider components.
• New context — Added paymentSessionContextType, defaultPaymentSessionContext, paymentSessionContext, and PaymentSessionContextProvider to Context.res.
  Demo App (Hyperswitch-React-Demo-App/)
• server.js — Added POST /update-payment endpoint that calls the Hyperswitch API to update a payment and returns { sdkAuthorization, clientSecret }.
• webpack.dev.js — Added proxy rule for /update-payment to forward from dev server (9060) to Express server (5252).
• CheckoutForm.js — Demonstrates usePaymentSession() hook with an "Update Amount (usePaymentSession)" button that calls paymentSession.updateIntent() with a merchant callback.
• Payment.js — Demonstrates standalone initPaymentSession() with an "Update Amount (initPaymentSession)" button rendered outside the tree, proving pure headless usage works independently.

---

How did you test it?

• Manual testing via demo app: Ran the demo app (npm run start on port 9060) and verified both update-amount buttons work end-to-end:
  • "Update Amount (usePaymentSession)" inside CheckoutForm — calls /update-payment, returns sdkAuthorization, passes it to updateIntent(), displays success message.
  • "Update Amount (initPaymentSession)" outside HyperElements in Payment.js — same flow using the standalone session, confirming headless usage works without React context.
• Console log verification: Confirmed [initPaymentSession standalone] and [usePaymentSession] logs show correct session creation, getCustomerSavedPaymentMethods() responses, and updateIntent() results.
• Build verification: npm run re:build (ReScript) and npm run build (webpack) both pass cleanly with no errors or warnings.
• No unit tests added (React wrapper follows existing pattern of no unit tests in the repo).

---

Usage Notes
No breaking changes. All additions are purely additive.
New APIs

1. initPaymentSession(hyperPromise, options) — Standalone async function.
   import { initPaymentSession } from "@juspay-tech/react-hyper-js";
   const session = await initPaymentSession(hyperPromise, { clientSecret });
   const savedPMs = await session.getCustomerSavedPaymentMethods();
   const result = await session.updateIntent(async () => {
   // Call your server to update payment, return new sdkAuthorization
   return newSdkAuthorization;
   });

2. usePaymentSession() — React hook (must be used inside ).
   import { usePaymentSession } from "@juspay-tech/react-hyper-js";
   const paymentSession = usePaymentSession();
   await paymentSession.updateIntent(async () => {
   return newSdkAuthorization;
   });

• The options parameter is passed directly to the SDK — the wrapper does not encode/decode fields. The SDK internally handles sdkAuthorization/clientSecret extraction.
• now automatically initializes a payment session and provides it via context — no additional wrapper components needed.
• Backward compatible: existing consumers using useHyper(), useWidgets(), , etc. are unaffected.

---

Version Update

• I have bumped the package version in package.json following semantic versioning:
  • x.x.x for major changes (breaking).
  • x.x.x for minor changes (new feature, no breaking changes).
  • x.x.x for patch changes (bug fixes, minor improvements).

---

Checklist

• I ran npm run re:build and verified the build artifacts.
• I reviewed the code for style, readability, and consistency.
• I verified the changes are backward compatible (if applicable).
• I tested this change in a real or simulated consuming project.
• I updated documentation, README, or usage examples if necessary.

---

Screenshots or Logs
Console output on page load:
[initPaymentSession standalone] Payment session created: {getCustomerSavedPaymentMethods: ƒ, updateIntent: ƒ}
[initPaymentSession standalone] Saved PMs: {...}
Console output on "Update Amount (initPaymentSession)" click:
[initPaymentSession standalone] updateIntent response: {sdkAuthorization: "...", clientSecret: "..."}
[initPaymentSession standalone] updateIntent result: {...}
Console output on "Update Amount (usePaymentSession)" click:
[usePaymentSession] updateIntent response: {sdkAuthorization: "...", clientSecret: "..."}
[usePaymentSession] updateIntent result: {...}
Files Changed
File Change
src/OrcaJs.res Added initPaymentSessionType and initPaymentSession to switchInstance
src/Context.res Added payment session context type, default, context, and provider
src/components/HyperElements.res Calls initPaymentSession and provides PaymentSessionContextProvider
src/Index.res Added usePaymentSession hook and initPaymentSession standalone function
src/Index.resi Added type signatures for new exports
Demo: server.js Added POST /update-payment endpoint
Demo: webpack.dev.js Added proxy rule for /update-payment
Demo: src/Payment.js Standalone initPaymentSession test with update button
Demo: src/CheckoutForm.js usePaymentSession hook test with update button
Demo: src/App.css Added .update-amount-btn styles