--- page_source: https://juspay.io/sea/docs/hyper-checkout-sea/web/resources/product-summary page_title: Product Summary --- # Product Summary View Product summary simplifies the purchase process by providing a brief yet informative overview of the product. This helps prevent users from abandoning the payment journey to double-check product details, improving the overall shopping experience. This feature works based on information provided when Juspay payment page is initiated. Payload generator for the same is present on Juspay studio. ### Step 1.1a Open the hypercheckout screen with product summary 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 **Sample Curl** #### Shell Code Snippet: ```shell curl --location 'https://api.juspay.in/session' \ --header 'Authorization: Basic base64_encoded_API_KEY' \ --header 'x-merchantid: your_merchant_id' \ --header 'Content-Type: application/json' \ --data '{ "amount":"1.00", "order_id":"unique_order_id", "customer_id":"customer_id", "customer_phone":"customer_phone", "customer_email":"customer_email", "payment_page_client_id":"your_client_id", "return_url": "https://www.google.com", "action":"paymentPage", "product_summary": "[[{\"type\":\"text\",\"text\":\"Amount Entered :\",\"color\":\"#032146\",\"fontType\" : \"bold\"},{\"type\":\"space\",\"weight\":1},{\"type\":\"text\",\"text\":\"₹7812.5\",\"fontType\":\"Bold\",\"color\":\"#032146\"}],[{\"type\":\"text\",\"text\":\"Bonus Code WWWLECOME175 has been applied\",\"textSize\":10,\"fontType\":\"SemiBold\",\"color\":\"#000000\"}],[{\"type\":\"space\"}],[{\"type\":\"text\",\"text\":\"GST Charges :\",\"fontType\":\"Bold\",\"color\":\"#032146\"},{\"type\":\"space\",\"weight\":1},{\"type\":\"text\",\"text\":\"₹2187.5\",\"fontType\":\"Bold\"}],[{\"type\":\"text\",\"text\":\"28% on Amount Entered\",\"textSize\":10,\"fontType\":\"SemiBold\",\"color\":\"#000000\"}],[{\"type\":\"divider\",\"thickness\":1,\"color\":\"#D6C190\"}],[{\"type\":\"text\",\"text\":\"Total Pay\",\"textSize\":16,\"fontType\":\"Bold\",\"color\":\"#032146\"},{\"type\":\"space\",\"weight\":1},{\"type\":\"text\",\"text\":\"₹10,000\",\"textSize\":16,\"fontType\":\"Bold\",\"color\":\"#032146\"}],[{\"type\":\"space\"}],[{\"type\":\"background\",\"color\":\"#faefd9\"},{\"type\":\"image\",\"url\":\"https://cdn-icons-png.flaticon.com/512/4213/4213958.png\"},{\"type\":\"text\",\"text\":\"Extra Surprise bonus is auto-applied just for you\",\"textSize\":10,\"fontType\":\"Bold\",\"color\":\"#032146\"}]]" }' ``` ## Product Summary Payload Generator: Start building your customized order summary payload by adding "Text", "Image", "Space", "Divider" through payload generatorOnce you have created your product summary paylaod, you can click the “Copy Payload” button. This will copy the product summary paylaod to your clipboard. ### 🔘 Button: [Generate Payload](https://studio.juspay.in/configurator/payload_generator.html?payloadGeneratorMode=ordersummary) ## **Configurableness of the UI** **Mobile view variants:** * **Accordion view attached to amount bar (Use Case 1)** ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/hyper-checkout/Screenshot%202023-10-16%20at%205.33.22%20PM-MbygN.png) * **Top of the payment page adjacent to tool bar (Use case 2)** ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/hyper-checkout/Screenshot%202023-10-16%20at%205.24.18%20PM-D02uJ.png) * **Top of payment page (Use Case 3)** ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/hyper-checkout/Screenshot%201945-04-28%20at%209.32.37%20PM-hoDfX.png) * **Bottom of payment page** ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/hyper-checkout/Screenshot%201945-07-24%20at%205.42.24%20PM.png) * **Pop up view** ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/hyper-checkout/Screenshot%202023-10-16%20at%205.53.35%20PM.png) ## Sample Code Snippets: ### Sample Payloads: #### Use Case 1 Code Snippet: ```use case 1 [ [ { "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" } ] ] ``` #### Use Case 2 Code Snippet: ```use case 2 [ [{ "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 } ] ] ``` #### Use Case 3 Code Snippet: ```use case 3 [ [{ "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" }] ] ```