---
page_title: Session API payload for Product Summary
product: Product Summary
page_source: https://juspay.io/in/docs/product-summary/docs/product-summary/session-api-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
---


# Session API 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)




### Step 1.1a Product Summary Parameters


Pass the below product summary related parameters in stringfied format in the **session API.** 


### Payload
- **Product_summary**:
  - Description: product_summary : Array ( Array PayloadItem)Here,PayloadItem = {“type”: TYPE, <Things related to 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. Session API Complete Paramaters



### Payload
- **Order_id**:
  - Description: Unique Identifier for the order. Should be Alphanumeric with character length less than 21. 
    
    Make sure to go through [Best Practices for OrderId](https://docs.juspay.in/resources/docs/common-resources/order--transaction)
  - Value: <p>Example:- <br> order-id-9876580 </p>
  - Tags: string, required
- **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.Minimum value of amount should be INR 1.
  - Value: <p>Example:- <br> 1.00 </p>
  - Tags: string, required
- **Customer_id**:
  - 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.
  - Value: <p>Example:- <br> customer-id-007 </p>
  - Tags: string, required
- **Customer_email**:
  - 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).
  - Value: <p>Example:- <br> test@gmail.com</p>
  - Tags: string, required
- **Customer_phone**:
  - 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.
  - Value: <p>Example:- <br> 9999999912</p>
  - Tags: string, required
- **Payment_page_client_id**:
  - Description: A unique identifier of merchant. This is available in welcome e-mail shared by Juspay
  - Value: <p>Example:- <br> sampleMerchantId </p>
  - Tags: string, required
- **Action**:
  - Description: Value "paymentPage" is to start the Hypercheckout interface.Value "paymentManagement" for deleting saved cards and linking/unlinking wallets.
  - Value: <p>Example:- <br> paymentPage </p>
  - Tags: string, required
- **Return_url**:
  - Description: A fully qualified URL on which the customer will be redirected after payment completion. It is also required to provide the control back to SDK after the completion of transaction. This URL takes higher precedence over the common return URL configured in your account settings.
    
    **NOTE** :
    
      1. URL shouldn't contain any query parameters or Ip address.
      2. URL should be a valid HTTPS endpoint that is reachable from Juspay servers.
      3. Return URL should not redirect to a different URL.
      4. Please ensure to pass a valid return URL in the session API call or configure it on the Juspay Dashboard. Not doing the same will lead the SDK not being closed post transaction completion.
  - Value: <p>Example:- <br> https://shop.merchant.com </p>
  - Tags: string
- **First_name**:
  - Description: First Name of customer. This value will be used for customer identification.**Constraints :** You are allowed to use alphanumeric characters and the following special characters: `().-_`
  - Value: <p>Example:- <br> John </p>
  - Tags: string
- **Last_name**:
  - Description: Last name of customer. This value will be used for customer identification.**Constraints :** You are allowed to use alphanumeric characters and the following special characters: `().-_`
  - Value: <p>Example:- <br> Wick </p>
  - Tags: string
- **Description**:
  - Description: Description for order to be displayed to the user on amountBar.
  - Value: <p>Example:- <br> Complete your payment </p>
  - Tags: String
- **Currency**:
  - Description: Currency for the order. Should only be passed when supported by the Payment Gateway and enabled in the Juspay Dashboard within EC Operations → PGCC → Select PG → Edit → Supported Currencies.
    
    **Default Value if not passed:** INR**Note:** The value must be in Uppercase
    
    Example: USD
  - Tags: String, Case Sensitive





## 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":"<YOUR_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":"<YOUR_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":"<YOUR_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":"<YOUR_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":"<YOUR_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":"<YOUR_CLIENT_ID>",
"action":"paymentPage"
}'

```


## Sample Code Snippets:
### Sample Requests:

#### Session API sample Code Snippet:

```session api sample
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":"yourUniqueCustId",
    "customer_phone":"9876543210",
    "customer_email":"dummyemail@gmail.com",
    "payment_page_client_id":"picasso",
    "action":"paymentPage",
    "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}]]"
}'
```

#### 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" }]
]

```

#### 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
    }
  ]
]

```



---

## See Also

- [Enable Product Summary](https://juspay.io/in/docs/product-summary/docs/product-summary/enable-product-summary)
- [Process Payload for Product Summary](https://juspay.io/in/docs/product-summary/docs/product-summary/process-payload-for-product-summary)