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);