diff --git a/BTCPayServer/Views/UIStores/PayButton.cshtml b/BTCPayServer/Views/UIStores/PayButton.cshtml
index f17f3f2c4..8eb3a2179 100644
--- a/BTCPayServer/Views/UIStores/PayButton.cshtml
+++ b/BTCPayServer/Views/UIStores/PayButton.cshtml
@@ -3,6 +3,11 @@
@{
ViewData.SetActivePage(StoreNavPages.PayButton, "Pay Button", Context.GetStoreData().Id);
csp.AllowUnsafeHashes("onBTCPayFormSubmit(event);return false");
+ csp.AllowUnsafeHashes("handleSliderChange(event);return false");
+ csp.AllowUnsafeHashes("handleSliderInput(event);return false");
+ csp.AllowUnsafeHashes("handlePriceSlider(event);return false");
+ csp.AllowUnsafeHashes("handlePriceInput(event);return false");
+ csp.AllowUnsafeHashes("handlePlusMinus(event);return false");
}
@section PageHeadContent {
@@ -15,24 +20,75 @@
-
- if (!window.btcpay) {
- var script = document.createElement('script');
- script.src=@(Safe.Json(Model.UrlRoot + "modal/btcpay.js"));
- document.getElementsByTagName('head')[0].append(script);
- }
- function onBTCPayFormSubmit(event) {
- event.preventDefault();
- var xhttp = new XMLHttpRequest();
- xhttp.onreadystatechange = function() {
- if (this.readyState == 4 && this.status == 200 && this.responseText) {
- window.btcpay.showInvoice(JSON.parse(this.responseText).invoiceId);
- }
- };
- xhttp.open('POST', event.target.getAttribute('action'), true);
- xhttp.send(new FormData(event.target));
- }
+
+ if (!window.btcpay) {
+ var script = document.createElement('script');
+ script.src = @(Safe.Json(Model.UrlRoot + "modal/btcpay.js"));
+ document.getElementsByTagName('head')[0].append(script);
+ }
+ function onBTCPayFormSubmit(event) {
+ event.preventDefault();
+ var xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200 && this.responseText) {
+ window.btcpay.showInvoice(JSON.parse(this.responseText).invoiceId);
+ }
+ };
+ xhttp.open('POST', event.target.getAttribute('action'), true);
+ xhttp.send(new FormData(event.target));
+ }
+
+ function handlePlusMinus(event) {
+ event.preventDefault();
+ const el = document.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);
+ const type = event.target.dataset.type;
+ const price = parseInt(el.value) || min;
+ if (type === '-') {
+ el.value = price - step < min ? min : price - step;
+ } else if (type === '+') {
+ el.value = price + step > max ? max : price + step;
+ }
+ }
+
+
+ function handlePriceInput(event) {
+ event.preventDefault();
+ const price = parseInt(event.target.dataset.price);
+ if (isNaN(event.target.value)) document.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) {
+ event.target.value = min;
+ } else if (event.target.value > max) {
+ event.target.value = max;
+ }
+ }
+
+
+ function handleSliderChange(event) {
+ event.preventDefault();
+ const el = document.querySelector('#btcpay-input-price');
+ const price = parseInt(el.value);
+ const min = parseInt(event.target.getAttribute('min')) || 1;
+ const max = parseInt(event.target.getAttribute('max'));
+ if (price < min) {
+ el.value = min;
+ } else if (price > max) {
+ el.value = max;
+ }
+ document.querySelector('#btcpay-input-range').value = el.value;
+ }
+
+ function handleSliderInput(event) {
+ document.querySelector('#btcpay-input-price').value = document.querySelector('#btcpay-input-range').value;
+ }
+
+
+
` : '')
+ const scripts = getScripts(srvModel);
+ const code = html + (scripts.length ? `\n` : '')
$("#mainCode").text(code).html();
- var preview = document.getElementById('preview');
+ const preview = document.getElementById('preview');
preview.innerHTML = html;
- if (scripts) {
+ scripts.forEach(snippet => {
// script needs to be inserted as node, otherwise it won't get executed
- var script = document.createElement('script');
- script.innerHTML = scripts
+ const script = document.createElement('script')
+ script.innerHTML = snippet
preview.appendChild(script)
- }
- var form = preview.querySelector("form");
- var url = new URL(form.getAttribute("action"));
- var formData = new FormData(form);
+ })
+ const form = preview.querySelector("form");
+ const formData = new FormData(form);
+ let url = new URL(form.getAttribute("action"));
formData.forEach((value, key) => {
if (key !== "jsonResponse") {
url.searchParams.append(key, value);
@@ -193,43 +191,36 @@ function inputChanges(event, buttonSize) {
}
function addInput(name, value) {
- return ' \n';
+ return ` \n`;
}
function addPlusMinusButton(type, step, min, max) {
- step = step =="any"? 1: step;
- min = min == null? 1: parseInt(min);
- max = max == null? 1: parseInt(max);
- var onChange = "event.preventDefault(); var el=document.querySelector(\'#btcpay-input-price\'); var price = parseInt(el.value);"
- if(type == "-"){
- onChange += " if((price - "+step+" )< "+min+") { el.value = "+min+"} else {el.value = parseInt(el.value) - "+step + " }";
- } else if(type == "+"){
- onChange += " if((price + "+step+" )> "+max+") { el.value = "+max+"} else {el.value = parseInt(el.value) + "+step + " }";
- }
+ step = step === "any" ? 1 : step;
+ min = min == null ? 1 : parseInt(min);
+ max = max == null ? null : parseInt(max);
-
- return ' \n';
- }
+ return ` \n`;
+}
-function addInputPrice(name, price, widthInput, customFn, type, min, max, step) {
- return ' \n';
+function addInputPrice(name, price, widthInput, min = 0, max = 'none', step = 'any', onChange = null) {
+ if (!price) price = min
+ return ` \n`;
+}
+
+function addSlider(price, min, max, step, width) {
+ if (!price) price = min
+ return ` \n`;
}
function addSelectCurrency(currency) {
// Remove all non-alphabet characters from input string and uppercase it for display
- var safeCurrency = currency.replace(/[^a-z]/gi, '').toUpperCase();
- var defaultCurrencies = ['USD', 'GBP', 'EUR', 'BTC'];
- var options = defaultCurrencies.map(c => ' ');
+ const safeCurrency = currency.replace(/[^a-z]/gi, '').toUpperCase();
+ const defaultCurrencies = ['USD', 'GBP', 'EUR', 'BTC'];
+ const options = defaultCurrencies.map(c => ` `);
// If user provided a currency not in our default currencies list, add it to the top of the options as a selected option
if (defaultCurrencies.indexOf(safeCurrency) === -1) {
- options.unshift(' ')
+ options.unshift(` `)
}
- return ' \n'
-}
-
-function addSlider(price, min, max, step, width) {
- return ' \n';
+ return ` \n`
}