From 28dbf10a3198ce8ff997810ae0b35f18f41ee8b0 Mon Sep 17 00:00:00 2001
From: Nicolas Dorier <nicolas.dorier@gmail.com>
Date: Mon, 24 Jan 2022 20:05:22 +0900
Subject: [PATCH] Do not rely on element's id for payment button (#3339)

* Do not rely on element's id for payment button

* Update BTCPayServer/Views/UIStores/PayButton.cshtml

Co-authored-by: d11n <mail@dennisreimann.de>

* Update BTCPayServer/Views/UIStores/PayButton.cshtml

Co-authored-by: d11n <mail@dennisreimann.de>

* Update BTCPayServer/Views/UIStores/PayButton.cshtml

Co-authored-by: d11n <mail@dennisreimann.de>

* Update BTCPayServer/Views/UIStores/PayButton.cshtml

Co-authored-by: d11n <mail@dennisreimann.de>

Co-authored-by: d11n <mail@dennisreimann.de>
---
 BTCPayServer/Views/UIStores/PayButton.cshtml | 23 +++++++++++++-------
 BTCPayServer/wwwroot/paybutton/paybutton.js  |  4 ++--
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/BTCPayServer/Views/UIStores/PayButton.cshtml b/BTCPayServer/Views/UIStores/PayButton.cshtml
index d77db18e9..61009ab79 100644
--- a/BTCPayServer/Views/UIStores/PayButton.cshtml
+++ b/BTCPayServer/Views/UIStores/PayButton.cshtml
@@ -41,7 +41,8 @@
     <template id="template-price-buttons" csp-allow>
     function handlePlusMinus(event) {
         event.preventDefault();
-        const el = document.querySelector('#btcpay-input-price');
+        const root = event.target.closest('.btcpay-form');
+        const el = root.querySelector('.btcpay-input-price');
         const step = parseInt(event.target.dataset.step) || 1;
         const min = parseInt(event.target.dataset.min) || 1;
         const max = parseInt(event.target.dataset.max);
@@ -57,8 +58,9 @@
     <template id="template-price-input" csp-allow>
     function handlePriceInput(event) {
         event.preventDefault();
+        const root = event.target.closest('.btcpay-form');
         const price = parseInt(event.target.dataset.price);
-        if (isNaN(event.target.value)) document.querySelector('#btcpay-input-price').value = price;
+        if (isNaN(event.target.value)) root.querySelector('.btcpay-input-price').value = price;
         const min = parseInt(event.target.getAttribute('min')) || 1;
         const max = parseInt(event.target.getAttribute('max'));
         if (event.target.value < min) {
@@ -71,7 +73,8 @@
     <template id="template-price-slider" csp-allow>
     function handleSliderChange(event) {
         event.preventDefault();
-        const el = document.querySelector('#btcpay-input-price');
+        const root = event.target.closest('.btcpay-form');
+        const el = root.querySelector('.btcpay-input-price');
         const price = parseInt(el.value);
         const min = parseInt(event.target.getAttribute('min')) || 1;
         const max = parseInt(event.target.getAttribute('max'));
@@ -80,11 +83,11 @@
         } else if (price > max) {
             el.value = max;
         } 
-        document.querySelector('#btcpay-input-range').value = el.value;
+        root.querySelector('.btcpay-input-range').value = el.value;
     }
     
     function handleSliderInput(event) {
-        document.querySelector('#btcpay-input-price').value = document.querySelector('#btcpay-input-range').value;
+        event.target.closest('.btcpay-form').querySelector('.btcpay-input-price').value = event.target.value;
     }
     </template>
     
@@ -431,7 +434,11 @@
         .btcpay-form select:hover {
             border-color: #ccc;
         }
-        #btcpay-input-price {
+        .btcpay-form option {
+            color: #000;
+            background: rgba(0,0,0,.1);
+        }
+        .btcpay-input-price {
             -moz-appearance: textfield;
             border: none;
             box-shadow: none;
@@ -443,8 +450,8 @@
             background: #fff;
         }
         
-        #btcpay-input-price::-webkit-outer-spin-button,
-        #btcpay-input-price::-webkit-inner-spin-button {
+        .btcpay-input-price::-webkit-outer-spin-button,
+        .btcpay-input-price::-webkit-inner-spin-button {
           -webkit-appearance: none;
           margin: 0;
         }
diff --git a/BTCPayServer/wwwroot/paybutton/paybutton.js b/BTCPayServer/wwwroot/paybutton/paybutton.js
index 8ad996787..3abfd96fc 100644
--- a/BTCPayServer/wwwroot/paybutton/paybutton.js
+++ b/BTCPayServer/wwwroot/paybutton/paybutton.js
@@ -204,12 +204,12 @@ function addPlusMinusButton(type, step, min, max) {
 
 function addInputPrice(name, price, widthInput, min = 0, max = 'none', step = 'any', onChange = null) {
     if (!price) price = min
-    return `      <input id="btcpay-input-price" type="number" name="${esc(name)}" min="${min}" max="${max}" step="${step}" value="${price}" data-price="${price}" style="width:${widthInput};" oninput="handlePriceInput(event);return false"${onChange ? ` onchange="${onChange}"` : ''} />\n`;
+    return `      <input class="btcpay-input-price" type="number" name="${esc(name)}" min="${min}" max="${max}" step="${step}" value="${price}" data-price="${price}" style="width:${widthInput};" oninput="handlePriceInput(event);return false"${onChange ? ` onchange="${onChange}"` : ''} />\n`;
 }
 
 function addSlider(price, min, max, step, width) {
     if (!price) price = min
-    return `    <input id="btcpay-input-range" type="range" class="btcpay-input-range" min="${min}" max="${max}" step="${step}" value="${price}" style="width:${width};margin-bottom:15px;" oninput="handleSliderInput(event);return false" />\n`;
+    return `    <input type="range" class="btcpay-input-range" min="${min}" max="${max}" step="${step}" value="${price}" style="width:${width};margin-bottom:15px;" oninput="handleSliderInput(event);return false" />\n`;
 }
 
 function addSelectCurrency(currency) {