diff --git a/common/input/web-payment/index.html b/common/input/web-payment/index.html
index d0877578..db130993 100644
--- a/common/input/web-payment/index.html
+++ b/common/input/web-payment/index.html
@@ -7,9 +7,15 @@
web-payment
-
+
+
+
+
+
-
+
diff --git a/common/input/web-payment/index.js b/common/input/web-payment/index.js
index 9e5a2d3e..6d0368a3 100644
--- a/common/input/web-payment/index.js
+++ b/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();
}
diff --git a/common/style.css b/common/style.css
index ca571dea..4cf5a758 100755
--- a/common/style.css
+++ b/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);