[web-payment] Print API return values and exceptions in the footer. (#…

…392)

* Print API return values and exceptions in the footer.

For easier debugging on mobile devices, print the API return values and
exception messages in a default-hidden section and add a toggle button.

common/input/web-payment/index.html

@@ -7,9 +7,15 @@
 
 <div id="content">
   <h1>web-payment</h1>
-  <p><button onclick="handleClick();">Initiate payment</button></p>
+  <p>
+    <button onclick="handleClick();">Initiate payment</button>
+    <button id="log-toggle" onclick="toggleLogVisibility();">Show log</button>
+    <ul id="log" hidden></ul>
+  </p>
 </div>
 
-<div id="footer">This page requires web payment API.</div>
+<div id="footer">
+  <p>This page requires web payment API.</p>
+</div>
 
 <script src="index.js"></script>

common/input/web-payment/index.js

@@ -1,3 +1,31 @@
+function appendLog(msg) {
+  console.log(msg);
+  let logList = document.getElementById('log');
+  let logEntry = document.createElement('li');
+  let logText = document.createTextNode(msg);
+  logEntry.appendChild(logText);
+  logList.appendChild(logEntry);
+}
+
+function clearLog() {
+  let logList = document.getElementById('log');
+  while (logList.firstChild) {
+    logList.removeChild(logList.firstChild);
+  }
+}
+
+function toggleLogVisibility() {
+  let logList = document.getElementById('log');
+  let logToggle = document.getElementById('log-toggle');
+  if (logList.hidden) {
+    logToggle.innerHTML = 'Hide log';
+    logList.hidden = false;
+  } else {
+    logToggle.innerHTML = 'Show log';
+    logList.hidden = true;
+  }
+}
+
 /**
  * Builds PaymentRequest for credit cards, but does not show any UI yet.
  * @return {PaymentRequest} The PaymentRequest object.
@@ -17,9 +45,14 @@ function initPaymentRequest() {
         },
       });
   request.canMakePayment().then(function(result) {
-    console.log(result);
+    appendLog('canMakePayment returned: ' + result);
+  }).catch(function(err) {
+    appendLog('canMakePayment rejected: ' + err.name + ': ' + err.message);
+  });
+  request.hasEnrolledInstrument().then(function(result) {
+    appendLog('hasEnrolledInstrument returned: ' + result);
   }).catch(function(err) {
-    console.log(err);
+    appendLog('hasEnrolledInstrument rejected: ' + err.name + ': ' + err.message);
   });
   return request;
 }
@@ -28,13 +61,15 @@ let request = initPaymentRequest();
 
 /** Invokes PaymentRequest for credit cards. */
 function handleClick() {
-  request.show()
-      .then(function(instrumentResponse) {
-        return instrumentResponse.complete('success');
-      })
-      .catch(function(err) {
-        console.log(err);
-      });
+  clearLog();
+  request.show().then(function(instrumentResponse) {
+    appendLog('show returned: ' + JSON.stringify(instrumentResponse));
+    request = initPaymentRequest();
+    return instrumentResponse.complete('success');
+  })
+  .catch(function(err) {
+    appendLog('show rejected: ' + err.name + ': ' + err.message);
+    request = initPaymentRequest();
+  });
 
-  request = initPaymentRequest();
 }

common/style.css

@@ -50,6 +50,14 @@ body {
   font-size: 2vw;
 }
 
+#log {
+  list-style: none;
+  padding-inline-start: 0px;
+  color: white;
+  font-family: Helvetica, Tahoma, sans-serif;
+  font-size: 2vw;
+}
+
 #footer {
   padding: 2vh 2vw;
   background: rgba(0, 0, 0, 0.25);