--- page_title: Enable Blended Quickpay product: Blended Quickpay page_source: https://juspay.io/in/docs/blended-quickpay/docs/how-to-integrate/enable-blended-quickpay llms_txt: https://juspay.io/in/docs/llms.txt product_llms_txt: https://juspay.io/in/docs/blended-quickpay/llms.txt --- # Enable Blended Quickpay feature ### 2.1 Juspay config changes * [Login](https://portal.juspay.in/marketplace?id=de72c170-22c8-4536-b3db-e1b6e8758eff&name=DOTP) to Juspay Dashboard and navigate to Marketplace tab to get the Blended Quickpay flow enabled on your Juspay payment page * Juspay will release the required configuration changes in testing environment (CUG) for you to initiate the end to end testing on your app. --- ## Integration type : Signature based Payment Page ### 2.2 Initiate Juspay SDK * Make sure to**Invoke the Juspay** `initiate` method on the application's home page. This ensures the initialization process completes in the background before the user reaches the checkout, thereby preventing any additional latency when loading the payment UI. * Reference doc: [https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/initiating-sdk](https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/initiating-sdk) ### **Payload Changes:** --- ## Integration type : Session API based Payment Page ### 2.2 Initiate Juspay SDK * Make sure to**Invoke the Juspay** `initiate` method on the application's home page. This ensures the initialization process completes in the background before the user reaches the checkout, thereby preventing any additional latency when loading the payment UI. * Reference doc: [https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/initiating-sdk](https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/initiating-sdk) ### **Payload Changes:** --- ## Integration type : React Native ### **Payload Changes:** ### 2.3 Blended Quickpay Payload changes To integrate Blended Quickpay, please make sure you are in or above the below mentioned version, * hyper-sdk-react 3.0.40 - [https://www.npmjs.com/package/hyper-sdk-react](https://www.npmjs.com/package/hyper-sdk-react) * hyper-sdk-android version - 2.1.25 * hyper-sdk-ios version - 2.2.1.4 For Blended quickpay integration, Merchant partner will be using Juspay’s `HyperFragmentView` element provided by hyper-sdk-react within which the blended quickpay will be rendered along with the amount passed in the Process payload. Make the changes in the Juspay SDK payload to pass the merchant fragment. * **paymentWidget :: {enable :: Boolean}** * **enable -** TRUE to enable the feature. If not present, the payment page will fall back to normal flow. * **"fragmentViewGroups" :** * HyperFragmentView must be attached to the UI where the PaymentWidget needs to be rendered. **What is HyperFragmentView?** It’s a native view created in hyper-sdk-react plugin and exposed to JavaScript. It can be rendered as any other as react-native view with mentioned props. #### HyperFragmentView Code Snippet: ```hyperfragmentview .... import HyperSdkReact, { HyperFragmentView } from 'hyper-sdk-react'; ... export function ProcessScreen(){ return ( {/* Make sure this view is rendered only once sdkPayload is generated. */} {isProcessPayloadGenerated? (} />): null} ) } ``` * **For Android:** { "paymentWidget": } - ViewGroup reference. ViewGroup has to be passed in the paymentWidget. * **For iOS:** { "paymentWidget": } - UIView reference of the fragment where UI should be rendered. UIView has to be passed in the paymentWidget. * **Sample Process Payload:** #### Process Payload Code Snippet: ```process payload { { "action": "paymentPage", "amount": "236", "clientAuthToken": "tkn_d603943481264649b1dbbfecb6aa0f2", "clientAuthTokenExpiry": "2026-06-16T18:36:13Z", "clientId": "instaastro", "currency": "INR", "currentActivityId": "2542c431-277b-421b-8c2e-9969c9abce2f", "customerEmail": "9991111111", "customerId": "cth_pPe4QcQ9rwG2wuC", "customerPhone": "1111111", "environment": "production", "features": { "paymentWidget": { "enable": true } }, "fragmentViewGroups": { "paymentWidget": "0af7162d-3d1a-400c-8461-157f7cff86c5" }, "merchantId": "merchantId", "orderId": "94969080", }, "requestId": "58bd914f-073f-4b63-b81a-f42b82ac0749", "service": "in.juspay.hyperpay" } ``` * **Notes:** * The HyperFragmentView should only be rendered upon the generation of the process payload. * Ensure that the namespace is set to "paymentWidget" and the payload contains the generated process payload for proper integration with the hyper-SDK. * **Props for HyperFragmentView** * height (number): The height of the view. (Optional) * width (number): The width of the view. (Optional) * namespace (string): This should be set to "paymentWidget". * payload (string): The process payload that needs to be sent to the hyper-SDK. ### 2.4 Updation of Order Amount (Optional) * Update Order events can be triggered by merchants at any point of time as per user interaction on their checkout. Possible cases could be, but not limited to, addition/removal of products in cart and addition/removal of Offers. **Payload changes:** * Allows the merchant to update the order amount after the Blended quickpay has been opened (_SDK process call is done_ ). * **UpdateOrder** needs to be called to **Juspay Backend** before making the updateOrder process call to Juspay SDK  -[](https://docs.juspay.in/api-reference/docs/express-checkout/update-order-api)[Doc for the same](https://docs.juspay.in/api-reference/docs/express-checkout/update-order-api) * Once UpdateOrder from from the backend API succeeds, then process call needs to be done to hyper-sdk with new-payload which contains the updated order amount and clientAuthToken. #### UpdateOrderAmount Sample Payload Code Snippet: ```updateorderamount sample payload { "service": "in.juspay.hyperpay", "requestId": "e17d4cd0-55z0-410f-84d6-038d69cx3819", "payload": { "action": "updateOrder", "clientId": "test", "environment": "sandbox", "merchantId": "test_mid", "customerId": "test_customer", "orderId": "1720608122434", "amount": "1.0", "clientAuthToken": "", } } ``` ### 2.5 Transaction completion and SDK Response Handling * User can pay from widget itself (or) select different payment instrument from payment page and pay with the selected instrument. Transaction leg will be handled by Juspay completely. Upon completion SDK Response is returned to Merchant via process_result. * When Sdk Response received post transaction, merchant has to take the user to payment status screen and **HyperFragmentView needs to be removed** . #### SDK Response Code Snippet: ```sdk response { "statusId":null, "status":"pending_vbv", "paymentInstrumentGroup":"CARD", "paymentInstrument":null, "otherInfo":{"status":null,"response":null}, "action":"paymentPage" } ``` * **Note** :HyperFragmentView should be used only for opening the payment widget and not for any other process calls. For any other process calls like updateOrder, please use HyperSDK object (process method) to do so. Because if you update the payload to HyperFragmentView after creation it once, then it will create another fragment and start drawing UI in the new one which will lead to unexpected result. * **Example:** UpdateOrder process call should happen via HyperSDK object and not via updating payload in HyperFragmentView. ### Step 1.1. iOS Specification * Whenever the merchant is removing the screen in which the fragment is rendered then the merchant has to terminate the IOS SDK for removing the fragment view and free up the memory. * If merchant want to render the fragment again in the same session after terminating the sdk then merchant can do initiate and follow the above steps to render the fragment. * **Why?** * Whenever merchant calls initiate to SDK then SDK holds a strong reference to merchant view controller which we will de-allocate after removing the UI drawn by SDK (which happens after the completion of payment or backpress done by user). * Since in fragment case, the back press in handled by the merchant itself, SDK doesn’t get know about the back press so it won’t be able to de-allocate the strong reference. So merchant has to call terminate as a signal of back press in the merchant screen. --- ## See Also - [Get Started](https://juspay.io/in/docs/blended-quickpay/docs/how-to-integrate/get-started) - [Testing & Validation](https://juspay.io/in/docs/blended-quickpay/docs/how-to-integrate/testing--validation)