EC Paymet Widget
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.
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.
|
If the SDK event fails, merchants should not display any instrument and instead show a button to redirect users to the payment page.
If the amount/offers is changed on the widget call getInstrument again with an updated amount or offer code.
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.
|
If the orderDetails payload is being changed, it is mandatory to generate a new signature as well that corresponds to the updated payload.
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.
Merchants can trigger the paymentPage action to open the full payment page as the usual flow.
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.
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.
Have questions?
- Need help? Contact support
- LLM? Read llms.txt