--- page_title: Process Payload for Product Summary product: Product Summary page_source: https://juspay.io/in/docs/product-summary/docs/product-summary/process-payload-for-product-summary llms_txt: https://juspay.io/in/docs/llms.txt product_llms_txt: https://juspay.io/in/docs/product-summary/llms.txt --- # Process Payload for Product Summary The Product Summary parameters have to passed while the loading the Juspay HyperCheckout payment page. The payload generator can be used to construct the payload based on your customised UI requirements ### 🔘 Button: [Generate Payload](https://studio.juspay.in/configurator/payload_generator.html?payloadGeneratorMode=ordersummary) The product_summary parameters should be JSON stringified and should be outside the orderDetails Payload.  ### Step 1.1a Product Summary Parameters Pass the below product summary related parameters in the **session API.** ### Payload - **Product_summary**: - Description: product_summary : Array ( Array PayloadItem)Here,PayloadItem = {“type”: TYPE, }**Description for each TYPE** - Value: - **Space**: - Description: This is used to create space between content (text, image etc.) on the same line. If an empty line is required, {“type” : ”space”} can be passed.If space is not passed between elements then it will be taken care by default Need to pass space only in case when we want to override our default space.Default space between elements is 5px.Examples: { "type": "space", "weight": 1.0 }{ "type": "space", "width": 1.0 } - Tags: String, Mandatory - **Text**: - Description: Possible values that can be added: text, color, textSize, fontType{regular, bold, semibold}, textSize.Example:{ "type": "text", "text": "Bangalore", "fontType": "bold", "color": "#b6a885", "textSize": 20 } - Tags: String, Mandatory - **Image**: - Description: Image that needs to be added. url and the size can be specified.Example: { “type”: “image”, “url”: “url of the image”} - Tags: String, Mandatory - **ToggleImage**: - Description: Toggle Image is used for the case where accordion view needs to toggled with preferred icons. Clicking on openIcon will open accordion and clicking on closeIcon will close accordion.Possible value can be openIcon, closeIcon - Tags: String, Mandatory - **Divider**: - Description: To add the divider, thickness of the divider need to be specified always.Color of the divider can also be added. - Tags: String, Mandatory - **Background**: - Description: To add the background. Color needs to be specified. - Tags: String, Mandatory - Tags: String, Mandatory ### Step 1.1. SDK Process Call Complete Paramaters ### Payload - **Action**: - Description: Pass `paymentPage` is to start the Hypercheckout screenPass `paymentManagement` to start the payment management interface for deleting saved cards and linking/unlinking wallets - Tags: String, Mandatory - **MerchantId**: - Description: Merchant ID provided by Juspay during onboarding - Tags: String, Mandatory - **ClientId**: - Description: Client ID provided by Juspay during onboarding - Tags: String, Mandatory - **OrderId**: - Description: Unique identifier for the order. Should be **Alphanumeric with character length less than 21.** _Order ID at Juspay end is_ _**not**_ _case sensitive. We do not differentiate between upper and lower case values_ - Tags: String, Mandatory - **Amount**: - Description: Amount that the customer has to pay. Will accept stringified double or integer values with upto two decimal places. For example, "100.15" and "100" are valid input but "100.1532" is not valid. Example:-1.00 - Tags: String, Mandatory - **CustomerId**: - Description: It is the ID with which merchant refers to a customer object. This id is used to access the stored payment methods, allow EMI transactions and setup subscriptions.In case of guest login it should be an empty string. Example:-customer-id-007 - Tags: String, Mandatory - **CustomerEmail**: - Description: Email address of the customer. If the backend gateway requires it, then you must send this value.**Constraints :** You are allowed to use alphanumeric characters and the following special characters:`!#$%&'*+-/=?^_.{|}~`@` `_`and `.` cannot appear at the beginning or end of the local part of the email address (before and after the `@`symbol). Example:-test@gmail.com - Tags: String, Mandatory - **CustomerMobile**: - Description: Mobile number or fixed line number of the customer. If the backend gateway requires it, then you must send this value. We recommend passing a 10-digit number without including the "+91" or any mobile country code at the beginning. Example:-9999999912 - Tags: String, Mandatory - **OrderDetails**: - Description: Stringify the orderDetails JSON payload - Tags: String, Mandatory - **Signature**: - Description: To provide enterprise-grade security, it is required to create a RSA-SHA256 signature of the orderDetails payload created above. The orderDetails JSON payload first needs to be converted into a string and then signed using the Private key stored on the merchant server. Click here to know [How to Generate the Signature](https://docs.juspay.in/payment-page-enterprise/android/resources/generating-the-signature) Example:- AZOn8jH8RPWSzrbZ0iiHSLjMdvnvDBkyKslgx4yDadtiQ49kqf8vFh7GMEC/aSARgfovwUOBoPPRTksV6IXNlwIBwuSLWeH7/dIBC+FdtgOR1UNhRGKM17xNg/A6iLufR880Pa31QT3JAWJtRPeQ3aGczsgsFc8NzbSNCQmV2w7ziSSUAwdpU8JWthkFc2oW23QTcMHXnk/EHXf9vAHUZS1x2vKMnrUE6JuTa8vNLlpAcsZ8ueGLvBuobx6lBltsyb8+DjWT+3+W4nt1xmH734g9aOkduLyQTvGIYDKCpnvWdR0J34SvgUnCnv5XzRm9+HQInZDSslJ+1q5hAe3PQQ== - Tags: String, Mandatory - **MerchantKeyId**: - Description: Unique identifier against which merchant’s public key is stored with Juspay. Can be fetched from Juspay Dashboard. `Login>EC Operations>Settings>Security>RSA Key` - Tags: String, Mandatory - **Language**: - Description: Pass the language value to localise payment experience in regional language. Accepted values are "english", "hindi", "telugu", "tamil", "bengali", "malayalam", "gujarati", "kannada", "marathi" - Tags: String - **PayeeName**: - Description: Custom payeeName to override default payeeName in UPI-INTENT APP_May or may not reflect due to extra verification at UpiApps end which cannot be controlled by Juspay_ - Tags: String - **DisplayNote**: - Description: Custom displayNote to override default displayNote(transaction-note) in UPI-INTENT APP_May or may not reflect due to extra verification at UpiApps end which cannot be controlled by juspay_ - Tags: String - **Description**: - Description: Description for order to be displayed to the user on amountBar Example:-Complete your payment - Tags: String ## Types Decoded: ### **1. type = “space”** #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` > **Note** > Note - If merchant want to pass an empty line they can pass {“type”:”space”} ### **2. type = “text”** #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` > **Note** > If the text needs to be left and right aligned : > > [[{“type”: “text”, “text” : “TEXT A”},{“type”:”space”,”weight”:1},{“type”:”text”,”text” : “TEXT B”}]] ### **3. type = “image”** #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` ### **4. type = “divider”** #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` ### **5. type = “toggleImage”** Toggle Image is used for the case when merchant wants to use accordion view and want different icons for closing and opening accordion view. #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` ### **6. type = “background”** #### Shell Code Snippet: ```shell curl --location --request POST 'https://api.juspay.in/session' \ --header 'x-merchantid: yourMerchantId' \ --header 'Authorization: Basic base64encodedkey==' \ --header 'Content-Type: application/json' \ --data-raw '{ "amount":"10.00", "order_id":"yourUniqueOrderId", "customer_id":"dummyCustId", "customer_phone":"9876543210", "customer_email":"dummyemail@gmail.com", "payment_page_client_id":"", "action":"paymentPage" }' ``` ## Sample Code Snippets: ### Sample Request: #### Sample Process Payload Code Snippet: ```sample process payload { "requestId": "8cbc3fad-8b3f-40c0-ae93-2d7e75a8624a", "service": "in.juspay.hyperpay", "payload": { "action": "paymentPage", "merchantId": "", "clientId": "", "orderId": "R1096438018", "amount": "1.00", "customerId": "1234567890", "customerEmail": "test@gmail.com", "customerMobile": "9739534710", "orderDetails": "{\"order_id\":\"R1096438018\",\"amount\":\"1.00\",\"customer_id\":\"1234567890\",\"merchant_id\":\"idea_preprod\",\"customer_email\":\"test007@gmail.com\",\"customer_phone\":\"1234567890\",\"return_url\":\"https:\\/\\/sandbox.juspay.in\\/end\",\"timestamp\":\"1571922200845\"}", "signature": "AZOn8jH8RPWSzrbZ0iiHSLjMdvnvDBkyKslgx4yDadtiQ49kqf8vFh7GMEC/aSARgfovwUOBoPPRTksV6IXNlwIBwuSLWeH7/dIBC+FdtgOR1UNhRGKM17xNg/A6iLufR880Pa31QT3JAWJtRPeQ3aGczsgsFc8NzbSNCQmV2w7ziSSUAwdpU8JWthkFc2oW23QTcMHXnk/EHXf9vAHUZS1x2vKMnrUE6JuTa8vNLlpAcsZ8ueGLvBuobx6lBltsyb8+DjWT+3+W4nt1xmH734g9aOkduLyQTvGIYDKCpnvWdR0J34SvgUnCnv5XzRm9+HQInZDSslJ+1q5hAe3PQQ==", "merchantKeyId": "2980", "language": "english", "product_summary": "[[{\"type\": \"space\", \"width\": 20}, {\"type\": \"accordion\", \"limit\": 5, \"content\": [[{\"type\": \"text\", \"text\": \"Review Booking\", \"textSize\": 14, \"fontType\": \"Bold\", \"color\": \"#333333\"}, {\"type\": \"space\", \"width\": 10, \"weight\": 1}, {\"type\": \"toggleImage\", \"openIcon\": \"https://i.post.cc/BvqN3JH/Frame-81.png\", \"closeIcon\": \"https://assets.juspay.in/hyper/images/internalPP/ic_arrow_up.png\", \"height\": 15, \"width\": 80}, {\"type\": \"space\", \"width\": 20}], [{\"type\": \"text\", \"text\": \"Total seats\", \"textSize\": 14, \"fontType\": \"regular\", \"color\": \"#333333\"}, {\"type\": \"text\", \"text\": \"1\", \"textSize\": 12, \"fontType\": \"regular\", \"color\": \"#808080\"}, {\"type\": \"linegap\", \"gap\": 1}], [{\"type\": \"space\", \"weight\": 1}], [{\"type\": \"text\", \"text\": \" Jaipur\", \"textSize\": 14, \"fontType\": \"Bold\", \"color\": \"#000000\"}, {\"type\": \"image\", \"url\": \"https://googleapis.com/merchant-assets/arrow.png\", \"size\": 15}, {\"type\": \"text\", \"text\": \"Udaipur (Travels)\", \"textSize\": 14, \"fontType\": \"Bold\", \"color\": \"#000000\"}], [{\"type\": \"text\", \"text\": \" Tue, 29 Apr 2025, 01:30 AM\", \"textSize\": 13, \"fontType\": \"regular\", \"color\": \"#000000\"}, {\"type\": \"linegap\", \"gap\": 1}], [{\"type\": \"text\", \"text\": \"Base Fare\", \"textSize\": 14, \"fontType\": \"semibold\", \"color\": \"#000000\"}, {\"type\": \"space\", \"weight\": 1}, {\"type\": \"text\", \"textSize\": 14, \"fontType\": \"semibold\", \"color\": \"#000000\", \"text\": \"1000\"}, {\"type\": \"space\", \"width\": 20}], [{\"type\": \"text\", \"text\": \"Discount\", \"textSize\": 14, \"fontType\": \"semibold\", \"color\": \"#000000\"}, {\"type\": \"space\", \"weight\": 1}, {\"type\": \"text\", \"textSize\": 14, \"fontType\": \"semibold\", \"color\": \"#000000\", \"text\": \"\\u20b970\"}, {\"type\": \"space\", \"width\": 20}], [{\"type\": \"text\", \"text\": \"GST\", \"textSize\": 14, \"fontType\": \"semibold\", \"color\": \"#000000\"}, {\"type\": \"space\", \"weight\": 1}, {\"type\": \"text\", \"textSize\": 14, \"fontType\": \"semibold\", \"color\": \"#000000\", \"text\": \"\\u20b950.0\"}, {\"type\": \"space\", \"width\": 20}]]}], [{\"type\": \"background\", \"color\": \"#F6f6f6\"}, {\"type\": \"space\", \"weight\": 1}], [{\"type\": \"background\", \"color\": \"#F6f6f6\"}, {\"type\": \"space\", \"weight\": 1}], [{\"type\": \"linegap\", \"gap\": 10}, {\"type\": \"background\", \"color\": \"#F6f6f6\"}, {\"type\": \"image\", \"url\": \"https://i.postimge.cc/7L0DvrYf/Frame.png\", \"height\": 22, \"width\": 100}, {\"type\": \"space\", \"weight\": 1}, {\"type\": \"image\", \"url\": \"https://i.postimge.cc/7Gqfrqj2/trusted.png\", \"height\": 22, \"width\": 100}, {\"type\": \"space\", \"weight\": 1}, {\"type\": \"image\", \"url\": \"https://i.postimge.cc/vH0ZXycy/Frame-1000004892-1.png\", \"height\": 22, \"width\": 100}, {\"type\": \"space\", \"weight\": 1}], [{\"type\": \"background\", \"color\": \"#F6f6f6\"}, {\"type\": \"space\", \"weight\": 1}]]" } } ``` #### Accordion view attached to amount bar Code Snippet: ```accordion view attached to amount bar [ [ { "type": "image", "url": "https://assets.juspay.in/hyper/images/internalPP/wallet_icon.png" }, { "type": "text", "text": "Amount to pay" }, { "type": "text", "text": "₹1000", "fontType": "bold" }, { "type": "image", "url": "https://cdn.iconscout.com/icon/free/png-256/free-dot-22-433567.png", "size": 10 }, { "type": "text", "text": "Saved ₹500", "color": "#47cc83" }, { "type": "image", "url": "https://assets.juspay.in/hyper/images/internalPP/info_icon.png", "size": 18 }, { "type": "space", "weight": 1.0 }, { "type": "toggleimage", "openIcon": "https://assets.juspay.in/hyper/images/internalPP/ic_arrow_down.png", "closeIcon": "https://assets.juspay.in/hyper/images/internalPP/ic_arrow_up.png", "size": 18 } ], [ { "type": "image", "url": "https://assets.juspay.in/hyper/images/internalPP/wallet_icon.png" }, { "type": "text", "text": "Mid and Small Cup Focused Portfolio", "fontType": "bold" } ], [ { "type": "image", "url": "https://assets.juspay.in/hyper/images/internalPP/wallet_icon.png" }, { "type": "text", "text": "Renews every" }, { "type": "text", "text": "12 months", "fontType": "bold" } ] ] ``` #### Top of the payment page adjacent to tool bar Code Snippet: ```top of the payment page adjacent to tool bar [ [{ "type": "space" }], [ { "type": "text", "text": "Bangalore", "textSize": 18, "fontType": "bold", "color": "#FFFFFF" }, { "type": "space", "weight": 1.0 }, { "type": "image", "url": "https://www.nicepng.com/png/full/9-97633_right-arrow-white-png-right-arrow-png-white.png", "size": 20 }, { "type": "space", "weight": 0.7 }, { "type": "text", "text": "Coimbatore", "textSize": 18, "fontType": "bold", "color": "#FFFFFF" } ], [ { "type": "text", "text": "22:20", "fontType": "bold", "color": "#FFFFFF" }, { "type": "space", "weight": 1.0 }, { "type": "text", "text": "7 hr 10 mins", "color": "#FFFFFF" }, { "type": "space", "weight": 0.8 }, { "type": "text", "text": "05:30", "fontType": "bold", "color": "#FFFFFF" } ], [ { "type": "text", "text": "Jul 19,2023", "color": "#FFFFFF" }, { "type": "space", "weight": 1.0 }, { "type": "text", "text": "Jul 20,2023", "color": "#FFFFFF" } ], [{ "type": "space" }], [{ "type": "space" }], [ { "type": "text", "text": "Pay", "textSize": 20, "color": "#FFFFFF" }, { "type": "text", "text": "₹ 813.75", "textSize": 20, "fontType": "bold", "color": "#FEE135" }, { "type": "space", "weight": 1.0 }, { "type": "text", "text": "View Details", "textSize": 20, "color": "#FFFFFF" }, { "type": "toggleImage", "openIcon": "https://upload.wikimedia.org/wikipedia/commons/9/96/Chevron-icon-drop-down-menu-WHITE.png", "closeIcon": "", "size": 20 } ], [{ "type": "space" }], [{ "type": "space" }], [{ "type": "space" }], [{ "type": "space" }], [ { "type": "image", "url": "https://cdn-icons-png.flaticon.com/512/869/869698.png", "size": 350 } ], [{ "type": "space" }], [{ "type": "space" }], [{ "type": "space" }], [ { "type": "space", "weight": 1.0 }, { "type": "text", "text": "Hide Details", "color": "#FFFFFF", "textSize": 20 }, { "type": "toggleImage", "openIcon": "", "closeIcon": "https://www.pngkit.com/png/full/255-2557792_up-arrow-top-image-png-white.png", "size": 20 } ] ] ``` #### Top of payment page Code Snippet: ```top of payment page [ [{ "type": "space" }], [ { "type": "space", "weight": 1.0 }, { "type": "text", "text": "Bus Name VRL No.", "fontType": "bold" }, { "type": "space", "weight": 1.0 } ], [{ "type": "space" }], [ { "type": "space", "width": 20 }, { "type": "text", "text": "Bangalore", "fontType": "bold", "color": "#b6a885", "textSize": 20 }, { "type": "space", "width": 1.0 }, { "type": "image", "url": "https://static.vecteezy.com/system/resources/previews/018/931/177/original/black-bus-icon-png.png" }, { "type": "space", "weight": 1.0 }, { "type": "text", "text": "Tirupati", "fontType": "bold", "color": "#b6a885", "textSize": 20 }, { "type": "space", "width": 20 } ], [ { "type": "space", "width": 20 }, { "type": "text", "text": "Kalasipalayam", "fontType": "bold" }, { "type": "space", "weight": 1.0 }, { "type": "image", "url": "https://cdn-icons-png.flaticon.com/512/109/109617.png" }, { "type": "space", "weight": 0.8 }, { "type": "text", "text": "RTC Bus Stand", "fontType": "bold" }, { "type": "space", "width": 20 } ], [ { "type": "space", "width": 20 }, { "type": "text", "text": "21:15", "fontType": "bold" }, { "type": "space", "weight": 1.0 }, { "type": "text", "text": "4:00", "fontType": "bold" }, { "type": "space", "width": 20 } ], [ { "type": "space", "width": 20 }, { "type": "text", "text": "Tue, Apr 25", "color": "#808080" }, { "type": "space", "weight": 1.0 }, { "type": "text", "text": "Wed, Apr 26", "color": "#808080" }, { "type": "space", "width": 20 } ], [{ "type": "space" }], [{ "type": "space" }, { "type": "background", "color": "#000000" }], [ { "type": "space", "width": 20 }, { "type": "text", "text": "Amount: ₹1058", "color": "#ffffff", "fontType": "bold" }, { "type": "background", "color": "#000000" } ], [ { "type": "space", "width": 20 }, { "type": "text", "text": "(Added Taxes)", "color": "#ffffff", "fontType": "bold", "textSize": 10 }, { "type": "background", "color": "#000000" } ], [{ "type": "space" }, { "type": "background", "color": "#000000" }] ] ``` --- ## See Also - [Session API payload for Product Summary](https://juspay.io/in/docs/product-summary/docs/product-summary/session-api-payload-for-product-summary) - [Testing & Validation](https://juspay.io/in/docs/product-summary/docs/product-summary/testing--validation)