# Request task panel view in H5 game

Divepoint Collection Request Parameters：

```json
{
    "merchantId":"1",//String Merchant Number: The merchant number assigned to you by the platform
    "ts":1699243390,//Number Request timestamp: used to ensure the uniqueness and security of the request
    "sign":"xxxxxxxxxxxxxxx", //String Signs the request parameters to verify the legitimacy of the request
}
```

Signature Method: Follow the sequence provided in the documentation (excluding ts and sign), concatenate the corresponding parameter values into a string, append ts and **UMI-API-KEY** (provided by us) at the end, and then generate the signature using MD5.

Signature String

```javascript
const text = `${merchantId}${ts}${KEY}`;
```

Javascript Example：

```javascript
// Signature Example
const KEY = "UMIVERSE UMI-API-KEY";
let str = '';
// Iterate through the parameter object
for (const key in param) {
    if (param.hasOwnProperty(key)) {
        const value = param[key];
        // Concatenate the parameter values into the string
        str += `${value}`;
    }
}
// Append the timestamp and secret key to the end of the string
str += `${ts}${KEY}`;
// Calculate the MD5 hash value
const sign = md5(str);
```

Here’s a complete example of a signature generation and API request process using JavaScript. This includes the creation of the signature, appending it to the request, and making an API call:：

```html
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View Game Task Panel</title>
</head>

<body>
    <button onclick="postDivePointMessage()">View Task Panel</button>
    <script src="./node_modules/js-md5/src/md5.js"></script>
    <script>
        const KEY = "YOUR_KEY"; // Signature Key
        function createSign(ts, param = null, key = KEY) {
            console.log("param", param);
            // Initialize an empty string
            let str = '';
            // Iterate through the parameter object
            for (const key in param) {
                if (param.hasOwnProperty(key)) {
                    const value = param[key];
                    // Concatenate the parameter values into the string
                    str += `${value}`;
                }
            }
            // Append the timestamp and key to the end of the string
            str += `${ts}${key}`;
            // Calculate the MD5 hash value
            const sign = md5(str);

            // Print debug information
            console.log("Signature String:", str);
            console.log("Signature Result:", sign);

            // Return the generated signature
            return sign;
        }
        function postDivePointMessage() {
            const jsonData = {
                "merchantId": "2", // String Merchant ID: The merchant ID assigned to you by the platform
            };
            const ts = Math.floor(Date.now() / 1000);
            const sign = createSign(ts, jsonData);

            // Add timestamp and signature to the payment request
            jsonData.ts = ts;
            jsonData.sign = sign;
            console.log(jsonData);
            window.parent.postMessage(jsonData, '*');
        }
    </script>
</body>
</html>
```
