HyperSDK payment page opens but payment methods are not rendered on Android (React Native, SDK version mismatch?)

[Hibbanur-Rahman]

I am facing an issue while integrating Juspay HyperCheckout (HyperSDK) in a React Native mobile application. The payment order/session is created successfully on the backend, and the HyperSDK payment page opens correctly on the frontend. However, no payment methods (UPI, Card, NetBanking, Wallet, etc.) are rendered on the payment screen, and no error is emitted by the SDK.

📦 Environment & Dependency Versions

React Native App
-- React Native: 0.82.1
-- React: 19.1.1

Platform: Android
--Min SDK: 24
--Target SDK: 36
--Compile SDK: 36
--Build Tools: 36.0.0
--NDK: 27.1.12297006
--Kotlin: 2.1.20
--Node.js: >= 20

Juspay / HyperSDK
-- hyper-sdk-react (npm): ^3.0.6
-- Native HyperSDK version: 2.1.13
-- Client ID: hdfcmaster
-- Merchant ID: SG4147
-- Environment: Sandbox

Relevant Dependencies
"hyper-sdk-react": "^3.0.6",
"react-native": "0.82.1",
"react": "19.1.1"

Expected Behavior
-- After invoking the HyperSDK payment page:
-- Available payment methods (UPI, Cards, NetBanking, Wallets) should be displayed
-- User should be able to complete the payment
-- process_result event should be emitted after completion or failure

Actual Behavior
-- HyperSDK initializes successfully
-- Payment page opens
-- Loader is hidden
-- SDK lifecycle events (microapp_versions) are received
-- No payment methods are shown on the UI
-- No error or failure event is triggered
-- The payment screen appears blank except for the container UI.

React Native Payment Initiation Logic:-
const handleInitiatePayment = async () => {
try {
setIsPaymentProcessing(true);
const amountToPay = getTotalPayableNow();

const payload = {
  amount: amountToPay,
  device: "mobile_app",
};

const response = await TransactionService.InitiatePayment(payload);

if (response?.data?.success && response?.data?.data?.sdk_payload) {
  const sdkPayload = response.data.data.sdk_payload;

  if (!sdkPayload.requestId || !sdkPayload.service || !sdkPayload.payload) {
    setIsPaymentProcessing(false);
    return;
  }

  backendPayloadRef.current = sdkPayload;
  processPayment();
}

} catch (error) {
setIsPaymentProcessing(false);
}
};

Processing Payment with HyperSDK
const processPayment = () => {
const sdkPayload = backendPayloadRef.current;

const processPayload = {
requestId: sdkPayload.requestId,
service: sdkPayload.service,
payload: {
...sdkPayload.payload,
},
};

if (processPayload.payload.service) {
delete processPayload.payload.service;
}

if (Platform.OS === "android") {
HyperSdkReact.processWithActivity(JSON.stringify(processPayload));
} else {
HyperSdkReact.process(JSON.stringify(processPayload));
}
};

SDK Initialization
useEffect(() => {
HyperSdkReact.createHyperServices();

const initiatePayload = {
requestId: "init_" + Date.now(),
service: "in.juspay.hyperpay",
payload: {
action: "initiate",
merchantId: "SG4147",
clientId: "hdfcmaster",
environment: "sandbox",
},
};

HyperSdkReact.initiate(JSON.stringify(initiatePayload));

const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact);
eventEmitter.addListener(HyperSdkReact.HyperEvent, (resp: string) => {
const data = JSON.parse(resp);
console.log("HyperSDK Event:", data.event, data);
});
}, []);

Final Process Payload Sent to HyperSDK
{
"requestId": "7fd6bc445d6c45b38ed7e9e12c80c025",
"service": "in.juspay.hyperpay",
"payload": {
"clientId": "hdfcmaster",
"customerId": "USR_aab88c277ac544eda3f1293adb647554",
"displayBusinessAs": "VERTEV MOBILITY PRIVATE LIMITED",
"orderId": "order_1768201908935",
"returnUrl": "https://vertev.in/payment/callback",
"currency": "INR",
"customerPhone": "+919973152523",
"environment": "sandbox",
"merchantId": "SG4147",
"amount": "4400.0",
"clientAuthToken": "tkn_8686e4631b5c4b689e257a67a459e1d1",
"clientAuthTokenExpiry": "2026-01-12T07:26:47Z",
"action": "paymentPage",
"collectAvsInfo": false,
"paymentMethods": ["UPI", "CARD", "NB", "WALLET"],
"channel": "mobile",
"sdk": true
}
}

SDK Logs (After UI Opens)
HyperSDK Event: hide_loader
{
"event": "hide_loader",
"merchant_id": "SG4147",
"order_id": "order_1768200367224"
}

HyperSDK Event: microapp_versions
{
"event": "microapp_versions",
"payload": {
"sdkVersion": "2.1.13",
"microappVersions": {
"in.juspay.hyperpay": { "app": "4.139.8" },
"in.juspay.upiintent": { "app": "7.5.3" },
"in.juspay.ec": { "app": "7.5.3" }
}
}
}

⚠️ Potential Issue Observed
There appears to be a version mismatch between the React Native wrapper and the native HyperSDK:

The payment page opens successfully, SDK lifecycle events are received, but payment methods are not rendered and no error is emitted.

This raises the question of:
-- Whether hyper-sdk-react v3.x is fully compatible with native HyperSDK v2.1.13
-- Or if a specific native SDK version is required for this wrapper version

Questions for Maintainers
-- Is hyper-sdk-react@3.0.6 compatible with native HyperSDK v2.1.13?
-- Is there a recommended native HyperSDK version for React Native 0.82.x?
-- Are there known issues with SDK ≥ 2.1.x on Android SDK 36?
-- Should paymentMethods be avoided entirely for mobile SDK routing?
-- Is there a way to enable debug routing logs for HyperSDK on Android?

Additional Notes
-- Web payment link works correctly for the same order
-- SDK initializes successfully
-- No explicit errors are returned by HyperSDK