payment-request-show/bobpay/public/pay/index.html at 4507e8de8d3ea109b7cf8e620a60a855761e1e2b · agektmr/payment-request-show · 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
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#db5945">
    <title>You are paying with BobPay</title>

    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="/css/new-age.min.css" rel="stylesheet">
  </head>

  <body>
      <div class="container">
          <h1>You are paying with BobPay</h1>
          <pre style="white-space: pre-wrap;" id="details"></pre>
      </div>

      <div class="container">
        <button id="pay" type="button" class="btn btn-primary" onclick="pay()">Pay</button>
        <button id="cancel" type="button" class="btn btn-default" onclick="cancel()">Cancel</button>
      </div>

    <script>
    let paymentRequestClient;

    navigator.serviceWorker.addEventListener('message', e => {
      paymentRequestClient = e.source;
      document.getElementById('details').innerHTML = JSON.stringify(e.data, undefined, 2);
    });
    navigator.serviceWorker.controller.postMessage('payment_app_window_ready');

    function pay() {
      if(!paymentRequestClient) return;

      var authn = new WebAuthnTransaction();

      authn.authenticate()
        .then(() => {
          var paymentAppResponse = {
            methodName: "https://emerald-eon.appspot.com/bobpay",
            details: {
              id: "123456"
            }
          };

          paymentRequestClient.postMessage(paymentAppResponse);
          window.close();
        })
        .catch((e) => {
          // TODO: need to think about the error path here: retry? fail payment?
          console.log ("Authentication failed");
          console.log (e);
          throw e;
        });
    }

    function cancel() {
      if(!paymentRequestClient) return;

      paymentRequestClient.postMessage("The payment request is cancelled by user");
      window.close();
    }
    </script>
  </body>
</html>