stoken-js/index.html at main · 3dsinteractive/stoken-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Payment Test Page</title>
  </head>
  <body>
    <h1>Test SToken payment</h1>
    <div class="form-item">
      <label>Order number: </label>
      <input type="text" id="orderNumber" value="01234567890"></input>
    </div>
    <div class="form-item">
      <label>Amount USD</label>
      <input type="text" id="amount" value="5"></input>
    </div>
    <div class="form-item">
      <label>Merchant wallet</label>
      <input type="text" id="merchantAddr" value="0x59c4B1a0B22ccd24C7B919898edE83219C2bC6dB"></input>
    </div>
    <div class="buttons">
      <button id="payWithMetamask" onclick="showPayment()">
        Pay with Metamask
      </button>
    </div>

    <script type="text/javascript" src="public/stoken.js"></script>
    <script type="text/javascript">
      function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
      }

      function showPayment() {

        var orderNumber = document.getElementById('orderNumber').value
        var amountUSD = document.getElementById('amount').value
        var merchantAddr = document.getElementById('merchantAddr').value

        if (amountUSD.length == 0 || !isNumber(amountUSD)) {
          alert('Please enter amount in USD')
          return
        }

        amountUSD = parseFloat(amountUSD)

        const { SToken, Network } = window.SToken
        var stoken = new SToken(Network.BSCTest, merchantAddr)
        stoken.showPaymentDialog(
          orderNumber,
          amountUSD,
        )
      }
    </script>
    <style lang="css">
      * {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
      }
      h1 {
        font-size: 23px;
      }
      .form-item {
        margin-top: 10px;
      }
      label {
        display: block;
      }
      input {
        width: 500px;
        margin-top: 5px;
      }
      .buttons {
        margin-top: 50px;
      }
    </style>
  </body>
</html>