JavaScript is disabled. Some features may not work. You can also read the static version: View text version

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.

                      product_summary
                      *
                      

String

Mandatory

product_summary : Array ( Array PayloadItem)
Here,
PayloadItem = {“type”: TYPE, <Things related to TYPE> }

Description for each TYPE

                      space
                      *
                      

String

Mandatory

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 }

                      text
                      *
                      

String

Mandatory

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 }

                      image
                      *
                      

String

Mandatory

Image that needs to be added. url and the size can be specified.
Example: { “type”: “image”, “url”: “url of the image”}

                      toggleImage
                      *
                      

String

Mandatory

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

                      divider
                      *
                      

String

Mandatory

To add the divider, thickness of the divider need to be specified always.
Color of the divider can also be added.

                      background
                      *
                      

String

Mandatory

To add the background. Color needs to be specified.

Sample Curl

Product Summary Payload Generator:

Start building your customized order summary payload by adding "Text", "Image", "Space", "Divider" through payload generator
Once you have created your product summary paylaod, you can click the “Copy Payload” button. This will copy the product summary paylaod to your clipboard.

Configurableness of the UI

Mobile view variants:

Accordion view attached to amount bar (Use Case 1)

Top of the payment page adjacent to tool bar (Use case 2)

Top of payment page (Use Case 3)

Bottom of payment page
Pop up view