--- page_source: https://juspay.io/in/docs/payment-method-integrations/hypercheckout/ec-payment-widget/ec-payment-widget page_title: EC Payment Widget --- # EC Paymet Widget ### Step 1.1. Introduction The Juspay Payment Widget provides a seamless blended payment experience by allowing users to interact with both product and payment UI simultaneously. This guide outlines the integration steps for merchants using Juspay's SDK-based approach. ## **Key Features** * Merchants can display the entire widget by consuming SDK events. * Juspay provides intelligence to optimize UI interactions and transaction nudges. * In case the customer chooses to change the payment instrument, the transaction will be completed from the payment page. ### Step 1 Retrieve Payment Instrument for the Widget Call Juspay SDK initiate first and post that trigger the below SDK call during rendering the checkout screen with the **action** getInstrument. | Parameter | Type | Description | |---|---|---| | requestId | String | Unique identifier for the request. | | service | String | API service name (in.juspay.hyperpay) | | payload | Object | Request-specific payload. | | orderDetails | String (JSON) | Order details as a stringified JSON object. | | action | String | API action (getInstrument). | | clientId | String | Juspay Client id | | merchantId | String | Juspay MID | | environment | String | production or sandbox. | | customerId | String | Customer's identifier/hash. | | orderId | String | Order ID related to the request. | | amount | String | Transaction amount. | | customerMobile | String | Customer's mobile number. | | customerEmail | String | Customer's email address. | | signature | String | Encrypted signature for orderDetails. | | merchantKeyId | String | Merchant key identifier. | > **Note** > If the SDK event fails, merchants should not display any instrument and instead show a button to redirect users to the payment page. ### Step 2 Update Amount or Apply Offer Code If the amount/offers is changed on the widget call getInstrument again with an updated amount or offer code. ### Step 3 Transaction Attempt by User When the user clicks ‘Proceed to Pay’, call  the txnAttempt event with below payload details | Parameter | Type | Description | |---|---|---| | action | String | API action (txnAttempt). | | paymentReference | String | A unique payment reference id that was sent in getInstrument response. | | cardSecurityCode | String | Card CVV (if required for transaction as per getInstrument Response). | | orderDetails | String | Final order details in a stringified JSON format. | | signature | String | Encrypted signature. | > **Note** > If the orderDetails payload is being changed, it is mandatory to generate a new signature as well that corresponds to the updated payload. > **Note** > **** If the saved card shown on the widget required CVV, the same needs to be accepted and passed in the txnAttempt call. Also please make sure CVV input should not reach your servers and served from SDK only to meet PCI compliance. ### Step 4 Open Complete Payment Page Merchants can trigger the paymentPage action to open the full payment page as the usual flow. ### Step 1.1. Backpress Handling If a user navigates to the Payment page and then presses the back button, the back press event should be detected, and the payment widget should be reloaded with the previously displayed details, either cached or preserved. If the latest instrument needs to be shown, call getInstrument again with a loader to fetch the updated instrument. #### Sample Response Code Snippet: ```sample response { "ended": { "orderId": null, "returnUrl": null, "payload": { "otherInfo": null, "action": "paymentPage", "status": "backpressed", "statusId": null, "paymentInstrumentGroup": null, "paymentInstrument": null }, "epgTxnId": null, "amount": null, "requestId": "680af2e1-6e7c-4bcd-8702-3ac9a3235038", "merchantId": null, "event": "process_result", "paymentMethodType": null, "errorMessage": "User Aborted", "paymentGatewayResponse": null, "bankErrorMessage": null, "txnDetail": null, "error": true, "errorCode": "JP_002", "upi": null, "bankErrorCode": null, "card": null, "paymentMethod": null, "gatewayId": null, "service": "in.juspay.hyperpay" } } ``` > **Note** > * The SDK should not be terminated after this event. > * To handle the hardware back press, call **onBackPressed()** on the HyperServices instance in your Checkout Activity’s onBackPressed function. If it returns true, Juspay SDK consumes the event; if false, handle it manually. Delegate back press control to HyperServices on the Payment Page and regain it when the payment widget loads. ## Sample Code Snippets: ### Sample Request: #### getInstrument Request Code Snippet: ```getinstrument request { "requestId": "37158830-68f4-4147-bad1-9ec785b70ef9", "service": "in.juspay.hyperpay", "payload": { "orderDetails": "{...}", "action": "getInstrument", "clientId": "clientID", "merchantId": "merchantID", "environment": "production", "customerId": "9742144874", "orderId": "hyperorder87933", "amount": "900.00", "signature": "", "merchantKeyId": "2980" } } ``` #### txnAttempt Request Code Snippet: ```txnattempt request { "requestId": "0d101f5f-66fc-4d4e-b54a-da98a8c43842", "service": "in.juspay.hyperpay", "payload": { "merchantKeyId": "8321", "orderDetails": "{\"order_id\":\"hyperorder1748375379601\",\"first_name\":\"Test\",\"last_name\":\"Customer\",\"mobile_number\":\"9742144874\",\"email_address\":\"test@gmail.com\",\"merchant_id\":\"picasso\",\"amount\":\"10000\",\"customer_id\":\"9742144874\",\"timestamp\":\"1748376349436\",\"currency\":\"INR\",\"metadata.amount_category\":\"{\\\"nonfood\\\":\\\"0\\\",\\\"food\\\":\\\"10000\\\"}\"}", "signature": "sdottqb1AXq8tZWwFCDqM4xVNauPcZMQBIwIQ24DiNgwZHWYp6F2N9joeiEGT+MAiRb26Mx9IlUF\nrr7z9zyqAo3hi7XptBpNdp/LkPpnxI0gxeZubXrxGXpUdqyTsFjqU6fr4HaLpNKrGlmyovt6eX3V\nmOqBq/Rc/Ou/xNI0u9QcAZ8DWxGXEi3jtRlTexzs53iwg/1IJ+RKMTFT2eUFRpwrIS9cRbyReMwJ\nKItQ8V7oRKM2HpcLEAH0Cq6n7ckYz9DWbnlUCDAYyJdrNa7FMvWTKiTkA8MHc/l8oaHjwrC32+r7\nEV7n+a5bysWLhQyF3QuoYbTkR5pVmi5dBCTmng==\n", "action": "txnAttempt", "paymentReference": "SdkGeneratedID", "clientId": "geddit", "merchantId": "picasso", "environment": "sandbox", "customerId": "9742144874", "cardSecurityCode":"", "orderId": "hyperorder1748375379601", "amount": "10000", "customerMobile": "9742144874", "customerEmail": "test007@gmail.com" } } ``` ### Sample Response: #### getInstrument Response: ```plaintext { "service": "in.juspay.hyperpay", "requestId": "37158830-68f4-4147-bad1-9ec785b70ef9", "instrumentDetails": [{ "paymentReference": "SdkGeneartedID", "paymentMethodType": "WALLET", "paymentMethod": "SIMPL", "paymentCardType": null, "paymentCardIssuer": null, "paymentCardBrand": null, "isCvvRequired": false, "instrumentPriorityMethod": "lastused", "instrumentAvailable": true, "expiry": "1697695681000", "balance": "1500.2", "amountBreakup": { "surchargeAmount": "10.2", "finalAmount": "50.3", "discountedAmount": "100", "currency": "INR" }, "additionalDisplayDetails": { "outageMessage": "Simpl SR is low", "iconUrl": "https://assets.juspay.in/simpl.png", "displayText": "SIMPL Wallet", "offerText": "5% instant discount will be applied", "surchargeText": "Convenience fees of 10 Rs will be applied" } }], "action": "getInstrument", "event": "process_result" } ``` #### txnAttempt Response: ```plaintext { "upi": null, "txnDetail": null, "service": "in.juspay.hyperpay", "returnUrl": null, "requestId": "1202ffa5-06f7-40a9-8a9a-a015140de576", "paymentMethodType": null, "paymentMethod": null, "paymentGatewayResponse": null, "payload": { "statusId": null, "status": "charged", "paymentInstrumentGroup": "NB", "paymentInstrument": "NB_HDFC", "otherInfo": { "status": null, "response": null }, "action": "txnAttempt" }, "orderId": null, "merchantId": null, "gatewayId": null, "errorMessage": "", "errorCode": "", "error": false, "amount": null, "event": "process_result" } ```