From 184c797b0e40020dbd5438f3f28f7c32dfb34d85 Mon Sep 17 00:00:00 2001
From: Ludovic <dolu89@gmail.com>
Date: Wed, 3 Apr 2019 21:43:53 +0200
Subject: [PATCH 1/6] Add a new Pay Button Type : Custom amount

---
 BTCPayServer/Controllers/StoresController.cs  |  3 +-
 .../StoreViewModels/PayButtonViewModel.cs     |  6 +--
 BTCPayServer/Views/Stores/PayButton.cshtml    | 35 +++++++++-----
 BTCPayServer/wwwroot/paybutton/paybutton.js   | 46 +++++++++++++++----
 4 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/BTCPayServer/Controllers/StoresController.cs b/BTCPayServer/Controllers/StoresController.cs
index 4335336ea..8f267b8d2 100644
--- a/BTCPayServer/Controllers/StoresController.cs
+++ b/BTCPayServer/Controllers/StoresController.cs
@@ -891,7 +891,8 @@ namespace BTCPayServer.Controllers
                 ButtonSize = 2,
                 UrlRoot = appUrl,
                 PayButtonImageUrl = appUrl + "img/paybutton/pay.png",
-                StoreId = store.Id
+                StoreId = store.Id,
+                ButtonType = 0
             };
             return View(model);
         }
diff --git a/BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs b/BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
index 2c6687e93..27a649594 100644
--- a/BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
+++ b/BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
@@ -1,8 +1,5 @@
-using System;
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
-using System.Linq;
-using System.Threading.Tasks;
 using BTCPayServer.ModelBinders;
 using Microsoft.AspNetCore.Mvc;
 
@@ -18,6 +15,7 @@ namespace BTCPayServer.Models.StoreViewModels
         public string CheckoutDesc { get; set; }
         public string OrderId { get; set; }
         public int ButtonSize { get; set; }
+        public int ButtonType { get; set; }
         [Url]
         public string ServerIpn { get; set; }
         [Url]
diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index 215685018..eb0223a77 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -57,6 +57,17 @@
                     </button>
                 </div>
             </div>
+            <div class="form-group">
+                <label>Button Type</label>
+                <div>
+                    <input type="radio" name="button-type" id="btn-fixed" value="0" v-model="srvModel.buttonType" v-on:change="inputChanges" checked />
+                    <label for="btn-fixed">Fixed amount</label>
+                </div>
+                <div>
+                    <input type="radio" name="button-type" id="btn-custom" value="1" v-model="srvModel.buttonType" v-on:change="inputChanges" />
+                    <label for="btn-custom">Custom amount</label>
+                </div>
+            </div>
         </div>
         <div class="col-lg-5">
             <br />
@@ -123,20 +134,20 @@
     </div>
 
 
-@section HeadScripts {
-    <link rel="stylesheet" href="~/vendor/highlightjs/default.min.css">
-    <script src="~/vendor/highlightjs/highlight.min.js"></script>
+    @section HeadScripts {
+        <link rel="stylesheet" href="~/vendor/highlightjs/default.min.css">
+        <script src="~/vendor/highlightjs/highlight.min.js"></script>
 
-    <script src="~/vendor/vuejs/vue.js"></script>
-    <script src="~/vendor/vuejs-vee-validate/vee-validate.js"></script>
+        <script src="~/vendor/vuejs/vue.js"></script>
+        <script src="~/vendor/vuejs-vee-validate/vee-validate.js"></script>
 
-    <script src="~/vendor/clipboard.js/clipboard.js"></script>
+        <script src="~/vendor/clipboard.js/clipboard.js"></script>
 
-    <script src="~/paybutton/paybutton.js"></script>
-}
+        <script src="~/paybutton/paybutton.js"></script>
+    }
 
-@section Scripts {
-    <script type="text/javascript">
+    @section Scripts {
+        <script type="text/javascript">
         var srvModel = @Html.Raw(Json.Serialize(Model));
 
         var payButtonCtrl = new Vue({
@@ -150,5 +161,5 @@
                 }
             }
         });
-    </script>
-}
+        </script>
+    }
diff --git a/BTCPayServer/wwwroot/paybutton/paybutton.js b/BTCPayServer/wwwroot/paybutton/paybutton.js
index a901a14fc..1248218ec 100644
--- a/BTCPayServer/wwwroot/paybutton/paybutton.js
+++ b/BTCPayServer/wwwroot/paybutton/paybutton.js
@@ -22,7 +22,7 @@ function esc(input) {
         (but it's not necessary).
         Or for XML, only if the named entities are defined in its DTD.
         */
-    ;
+        ;
 }
 
 Vue.use(VeeValidate);
@@ -42,9 +42,35 @@ function inputChanges(event, buttonSize) {
         srvModel.buttonSize = buttonSize;
     }
 
+    var width = "209px";
+    var widthInput = "3em";
+    if (srvModel.buttonSize === 0) {
+        width = "146px";
+        widthInput = "2em";
+    } else if (srvModel.buttonSize === 1) {
+        width = "168px";
+    } else if (srvModel.buttonSize === 2) {
+        width = "209px";
+    }
+
     var html = '<form method="POST" action="' + esc(srvModel.urlRoot) + 'api/v1/invoices">';
     html += addinput("storeId", srvModel.storeId);
-    html += addinput("price", srvModel.price);
+
+    // Add price as hidden only if it's a fixed amount
+    if (srvModel.buttonType == 0) {
+        html += addinput("price", srvModel.price);
+    }
+    else if (srvModel.buttonType == 1) {
+        html += '\n    <div style="text-align:center;width:' + width + '">';
+        html += addPlusMinusButton("-");
+        html += '<input type="text" id="btcpay-input-price" name="price" value="' + srvModel.price + '" style="' +
+            'border:none;background-image:none;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;-webkit-appearance: none;' + // Reset css
+            'width:' + widthInput + ';text-align:center;font-size:25px;margin:auto;border-radius:5px;line-height:50px;background:#fff;"' + // Custom css
+            'oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector(\'#btcpay-input-price\').value = ' + srvModel.price + ' : event.target.value" />'; // Method to try if it's a number
+        html += addPlusMinusButton("+");
+        html += '</div>';
+    }
+
     if (srvModel.currency) {
         html += addinput("currency", srvModel.currency);
     }
@@ -65,14 +91,6 @@ function inputChanges(event, buttonSize) {
         html += addinput("notifyEmail", srvModel.notifyEmail);
     }
 
-    var width = "209px";
-    if (srvModel.buttonSize === 0) {
-        width = "146px";
-    } else if (srvModel.buttonSize === 1) {
-        width = "168px";
-    } else if (srvModel.buttonSize === 2) {
-        width = "209px";
-    }
     html += '\n    <input type="image" src="' + esc(srvModel.payButtonImageUrl) + '" name="submit" style="width:' + width +
         '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">';
 
@@ -93,3 +111,11 @@ function addinput(name, value) {
     return html;
 }
 
+function addPlusMinusButton(type) {
+    var button = '<button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault();document.querySelector(\'#btcpay-input-price\').value = parseInt(document.querySelector(\'#btcpay-input-price\').value) TYPE 1;">TYPE</button>';
+    if (type === "+") {
+        return button.replace(/TYPE/g, '+');
+    } else {
+        return button.replace(/TYPE/g, '-');
+    }
+}

From 449066449b1d8d976dd55a7855782e8a9ab70193 Mon Sep 17 00:00:00 2001
From: Ludovic <dolu89@gmail.com>
Date: Thu, 4 Apr 2019 20:56:12 +0200
Subject: [PATCH 2/6] Add a new Pay Button Type : Slider

---
 BTCPayServer/Controllers/StoresController.cs  |  7 ++--
 .../StoreViewModels/PayButtonViewModel.cs     |  6 ++++
 BTCPayServer/Views/Stores/PayButton.cshtml    | 27 ++++++++++++++++
 BTCPayServer/wwwroot/paybutton/paybutton.js   | 32 ++++++++++++++++---
 4 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/BTCPayServer/Controllers/StoresController.cs b/BTCPayServer/Controllers/StoresController.cs
index 8f267b8d2..a42c51102 100644
--- a/BTCPayServer/Controllers/StoresController.cs
+++ b/BTCPayServer/Controllers/StoresController.cs
@@ -507,7 +507,7 @@ namespace BTCPayServer.Controllers
                 Action = nameof(UpdateChangellySettings),
                 Provider = "Changelly"
             });
-            
+
             var coinSwitchEnabled = storeBlob.CoinSwitchSettings != null && storeBlob.CoinSwitchSettings.Enabled;
             vm.ThirdPartyPaymentMethods.Add(new StoreViewModel.ThirdPartyPaymentMethod()
             {
@@ -892,7 +892,10 @@ namespace BTCPayServer.Controllers
                 UrlRoot = appUrl,
                 PayButtonImageUrl = appUrl + "img/paybutton/pay.png",
                 StoreId = store.Id,
-                ButtonType = 0
+                ButtonType = 2,
+                Min = 1,
+                Max = 20,
+                Step = 1
             };
             return View(model);
         }
diff --git a/BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs b/BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
index 27a649594..dc5c1ea23 100644
--- a/BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
+++ b/BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
@@ -16,6 +16,12 @@ namespace BTCPayServer.Models.StoreViewModels
         public string OrderId { get; set; }
         public int ButtonSize { get; set; }
         public int ButtonType { get; set; }
+
+        // Slider properties (ButtonType = 2)
+        public decimal Min { get; set; }
+        public decimal Max { get; set; }
+        public decimal Step { get; set; }
+
         [Url]
         public string ServerIpn { get; set; }
         [Url]
diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index eb0223a77..992df92d4 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -23,6 +23,29 @@
                            :class="{'is-invalid': errors.has('currency') }">
                 </div>
             </div>
+            <div class="form-row" v-if="srvModel.buttonType == 2">
+                <div class="form-group col-md-4">
+                    <label>Min</label>
+                    <input name="min" type="text" class="form-control"
+                           v-model="srvModel.min" v-on:change="inputChanges"
+                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('min') }">
+                    <small class="text-danger">{{ errors.first('min') }}</small>
+                </div>
+                <div class="form-group col-md-4">
+                    <label>Max</label>
+                    <input name="max" type="text" class="form-control"
+                           v-model="srvModel.max" v-on:change="inputChanges"
+                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('max') }">
+                    <small class="text-danger">{{ errors.first('max') }}</small>
+                </div>
+                <div class="form-group col-md-4">
+                    <label>Step</label>
+                    <input name="step" type="text" class="form-control"
+                           v-model="srvModel.step" v-on:change="inputChanges"
+                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('step') }">
+                    <small class="text-danger">{{ errors.first('step') }}</small>
+                </div>
+            </div>
             <div class="form-group">
                 <label>Checkout Description</label>
                 <input name="checkoutDesc" type="text" class="form-control" placeholder="(optional)"
@@ -67,6 +90,10 @@
                     <input type="radio" name="button-type" id="btn-custom" value="1" v-model="srvModel.buttonType" v-on:change="inputChanges" />
                     <label for="btn-custom">Custom amount</label>
                 </div>
+                <div>
+                    <input type="radio" name="button-type" id="btn-slider" value="2" v-model="srvModel.buttonType" v-on:change="inputChanges" />
+                    <label for="btn-slider">Slider</label>
+                </div>
             </div>
         </div>
         <div class="col-lg-5">
diff --git a/BTCPayServer/wwwroot/paybutton/paybutton.js b/BTCPayServer/wwwroot/paybutton/paybutton.js
index 1248218ec..91e39d3af 100644
--- a/BTCPayServer/wwwroot/paybutton/paybutton.js
+++ b/BTCPayServer/wwwroot/paybutton/paybutton.js
@@ -56,20 +56,31 @@ function inputChanges(event, buttonSize) {
     var html = '<form method="POST" action="' + esc(srvModel.urlRoot) + 'api/v1/invoices">';
     html += addinput("storeId", srvModel.storeId);
 
-    // Add price as hidden only if it's a fixed amount
+    // Add price as hidden only if it's a fixed amount (srvModel.buttonType = 0)
     if (srvModel.buttonType == 0) {
         html += addinput("price", srvModel.price);
     }
     else if (srvModel.buttonType == 1) {
         html += '\n    <div style="text-align:center;width:' + width + '">';
         html += addPlusMinusButton("-");
-        html += '<input type="text" id="btcpay-input-price" name="price" value="' + srvModel.price + '" style="' +
-            'border:none;background-image:none;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;-webkit-appearance: none;' + // Reset css
-            'width:' + widthInput + ';text-align:center;font-size:25px;margin:auto;border-radius:5px;line-height:50px;background:#fff;"' + // Custom css
-            'oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector(\'#btcpay-input-price\').value = ' + srvModel.price + ' : event.target.value" />'; // Method to try if it's a number
+        html += addInputPrice(srvModel.price, widthInput, "");
         html += addPlusMinusButton("+");
         html += '</div>';
     }
+    else if (srvModel.buttonType == 2) {
+        html += '\n    <div style="text-align:center;width:' + width + '">';
+
+        // Input price
+        html += addInputPrice(srvModel.price, width, 'onchange="document.querySelector(\'#btcpay-input-range\').value = document.querySelector(\'#btcpay-input-price\').value"');
+
+        // Slider
+        html += '<input class="btcpay-input-range" id="btcpay-input-range" value="' + srvModel.price + '" type="range" min="' + srvModel.min + '" max="' + srvModel.max + '" step="' + srvModel.step + '" style="width:' + width + ';margin-bottom:15px;"' +
+            'oninput="document.querySelector(\'#btcpay-input-price\').value = document.querySelector(\'#btcpay-input-range\').value" />';
+
+        // Slider style
+        html += '<style type="text/css">input[type=range].btcpay-input-range { -webkit-appearance: none; width: 100%; margin: 9.45px 0; } input[type=range].btcpay-input-range:focus { outline: none; } input[type=range].btcpay-input-range::-webkit-slider-runnable-track { width: 100%; height: 3.1px; cursor: pointer; box-shadow: 0px 0px 1.7px #002200, 0px 0px 0px #003c00; background: #f3f3f3; border-radius: 1px; border: 0px solid rgba(24, 213, 1, 0); } input[type=range].btcpay-input-range::-webkit-slider-thumb { box-shadow: 0px 0px 3.7px rgba(0, 170, 0, 0), 0px 0px 0px rgba(0, 195, 0, 0); border: 2.5px solid #cedc21; height: 22px; width: 23px; border-radius: 12px; background: #0f3723; cursor: pointer; -webkit-appearance: none; margin-top: -9.45px; } input[type=range].btcpay-input-range:focus::-webkit-slider-runnable-track { background: #ffffff; } input[type=range].btcpay-input-range::-moz-range-track { width: 100%; height: 3.1px; cursor: pointer; box-shadow: 0px 0px 1.7px #002200, 0px 0px 0px #003c00; background: #f3f3f3; border-radius: 1px; border: 0px solid rgba(24, 213, 1, 0); } input[type=range].btcpay-input-range::-moz-range-thumb { box-shadow: 0px 0px 3.7px rgba(0, 170, 0, 0), 0px 0px 0px rgba(0, 195, 0, 0); border: 2.5px solid #cedc21; height: 22px; width: 23px; border-radius: 12px; background: #0f3723; cursor: pointer; } input[type=range].btcpay-input-range::-ms-track { width: 100%; height: 3.1px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range].btcpay-input-range::-ms-fill-lower { background: #e6e6e6; border: 0px solid rgba(24, 213, 1, 0); border-radius: 2px; box-shadow: 0px 0px 1.7px #002200, 0px 0px 0px #003c00; } input[type=range].btcpay-input-range::-ms-fill-upper { background: #f3f3f3; border: 0px solid rgba(24, 213, 1, 0); border-radius: 2px; box-shadow: 0px 0px 1.7px #002200, 0px 0px 0px #003c00; } input[type=range].btcpay-input-range::-ms-thumb { box-shadow: 0px 0px 3.7px rgba(0, 170, 0, 0), 0px 0px 0px rgba(0, 195, 0, 0); border: 2.5px solid #cedc21; height: 22px; width: 23px; border-radius: 12px; background: #0f3723; cursor: pointer; height: 3.1px; } input[type=range].btcpay-input-range:focus::-ms-fill-lower { background: #f3f3f3; } input[type=range].btcpay-input-range:focus::-ms-fill-upper { background: #ffffff; }</style>';
+        html += '</div>';
+    }
 
     if (srvModel.currency) {
         html += addinput("currency", srvModel.currency);
@@ -119,3 +130,14 @@ function addPlusMinusButton(type) {
         return button.replace(/TYPE/g, '-');
     }
 }
+
+function addInputPrice(price, widthInput, customFn) {
+    var input = '<input type="text" id="btcpay-input-price" name="price" value="' + price + '" style="' +
+        'border:none;background-image:none;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;-webkit-appearance: none;' + // Reset css
+        'width:' + widthInput + ';text-align:center;font-size:25px;margin:auto;border-radius:5px;line-height:50px;background:#fff;"' + // Custom css
+        'oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector(\'#btcpay-input-price\').value = ' + price + ' : event.target.value" CUSTOM />';
+    if (customFn) {
+        return input.replace("CUSTOM", customFn);
+    }
+    return input.replace("CUSTOM", "");
+}

From bc97c076707e5982fe8dc7ec1f37c5d4d29d1bb0 Mon Sep 17 00:00:00 2001
From: Ludovic <dolu89@gmail.com>
Date: Thu, 4 Apr 2019 21:32:16 +0200
Subject: [PATCH 3/6] Add currency select in Pay Button

---
 BTCPayServer/Controllers/StoresController.cs |  2 +-
 BTCPayServer/Views/Stores/PayButton.cshtml   |  2 +-
 BTCPayServer/wwwroot/paybutton/paybutton.js  | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/BTCPayServer/Controllers/StoresController.cs b/BTCPayServer/Controllers/StoresController.cs
index a42c51102..831045d58 100644
--- a/BTCPayServer/Controllers/StoresController.cs
+++ b/BTCPayServer/Controllers/StoresController.cs
@@ -892,7 +892,7 @@ namespace BTCPayServer.Controllers
                 UrlRoot = appUrl,
                 PayButtonImageUrl = appUrl + "img/paybutton/pay.png",
                 StoreId = store.Id,
-                ButtonType = 2,
+                ButtonType = 0,
                 Min = 1,
                 Max = 20,
                 Step = 1
diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index 992df92d4..946fb016c 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -18,7 +18,7 @@
                 </div>
                 <div class="form-group col-md-4">
                     <label>&nbsp;</label>
-                    <input name="price" type="text" class="form-control"
+                    <input name="currency" type="text" class="form-control"
                            v-model="srvModel.currency" v-on:change="inputChanges"
                            :class="{'is-invalid': errors.has('currency') }">
                 </div>
diff --git a/BTCPayServer/wwwroot/paybutton/paybutton.js b/BTCPayServer/wwwroot/paybutton/paybutton.js
index 91e39d3af..047aaae90 100644
--- a/BTCPayServer/wwwroot/paybutton/paybutton.js
+++ b/BTCPayServer/wwwroot/paybutton/paybutton.js
@@ -62,17 +62,20 @@ function inputChanges(event, buttonSize) {
     }
     else if (srvModel.buttonType == 1) {
         html += '\n    <div style="text-align:center;width:' + width + '">';
+        html += '<div>';
         html += addPlusMinusButton("-");
         html += addInputPrice(srvModel.price, widthInput, "");
         html += addPlusMinusButton("+");
         html += '</div>';
+        html += addSelectCurrency();
+        html += '</div>';
     }
     else if (srvModel.buttonType == 2) {
         html += '\n    <div style="text-align:center;width:' + width + '">';
 
         // Input price
         html += addInputPrice(srvModel.price, width, 'onchange="document.querySelector(\'#btcpay-input-range\').value = document.querySelector(\'#btcpay-input-price\').value"');
-
+        html += addSelectCurrency();
         // Slider
         html += '<input class="btcpay-input-range" id="btcpay-input-range" value="' + srvModel.price + '" type="range" min="' + srvModel.min + '" max="' + srvModel.max + '" step="' + srvModel.step + '" style="width:' + width + ';margin-bottom:15px;"' +
             'oninput="document.querySelector(\'#btcpay-input-price\').value = document.querySelector(\'#btcpay-input-range\').value" />';
@@ -134,10 +137,19 @@ function addPlusMinusButton(type) {
 function addInputPrice(price, widthInput, customFn) {
     var input = '<input type="text" id="btcpay-input-price" name="price" value="' + price + '" style="' +
         'border:none;background-image:none;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;-webkit-appearance: none;' + // Reset css
-        'width:' + widthInput + ';text-align:center;font-size:25px;margin:auto;border-radius:5px;line-height:50px;background:#fff;"' + // Custom css
+        'width:' + widthInput + ';text-align:center;font-size:25px;margin:auto;border-radius:5px;line-height:35px;background:#fff;"' + // Custom css
         'oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector(\'#btcpay-input-price\').value = ' + price + ' : event.target.value" CUSTOM />';
     if (customFn) {
         return input.replace("CUSTOM", customFn);
     }
     return input.replace("CUSTOM", "");
 }
+
+function addSelectCurrency() {
+    return '<select onchange="document.querySelector(\'input[type = hidden][name = currency]\').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;">' +
+        '<option value="USD">USD</option>' +
+        '<option value="GBP">GBP</option>' +
+        '<option value="EUR">EUR</option>' +
+        '<option value="BTC">BTC</option>' +
+        '</select>';
+}

From a8a857a7ce1b0fe59a91fe5252181bc72a5485fd Mon Sep 17 00:00:00 2001
From: Ludovic <dolu89@gmail.com>
Date: Sat, 6 Apr 2019 13:47:22 +0200
Subject: [PATCH 4/6] Move Slider settings below radio buttons

---
 BTCPayServer/Views/Stores/PayButton.cshtml | 46 +++++++++++-----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index 946fb016c..244760271 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -23,29 +23,6 @@
                            :class="{'is-invalid': errors.has('currency') }">
                 </div>
             </div>
-            <div class="form-row" v-if="srvModel.buttonType == 2">
-                <div class="form-group col-md-4">
-                    <label>Min</label>
-                    <input name="min" type="text" class="form-control"
-                           v-model="srvModel.min" v-on:change="inputChanges"
-                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('min') }">
-                    <small class="text-danger">{{ errors.first('min') }}</small>
-                </div>
-                <div class="form-group col-md-4">
-                    <label>Max</label>
-                    <input name="max" type="text" class="form-control"
-                           v-model="srvModel.max" v-on:change="inputChanges"
-                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('max') }">
-                    <small class="text-danger">{{ errors.first('max') }}</small>
-                </div>
-                <div class="form-group col-md-4">
-                    <label>Step</label>
-                    <input name="step" type="text" class="form-control"
-                           v-model="srvModel.step" v-on:change="inputChanges"
-                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('step') }">
-                    <small class="text-danger">{{ errors.first('step') }}</small>
-                </div>
-            </div>
             <div class="form-group">
                 <label>Checkout Description</label>
                 <input name="checkoutDesc" type="text" class="form-control" placeholder="(optional)"
@@ -95,6 +72,29 @@
                     <label for="btn-slider">Slider</label>
                 </div>
             </div>
+            <div class="form-row" v-if="srvModel.buttonType == 2">
+                <div class="form-group col-md-4">
+                    <label>Min</label>
+                    <input name="min" type="text" class="form-control"
+                           v-model="srvModel.min" v-on:change="inputChanges"
+                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('min') }">
+                    <small class="text-danger">{{ errors.first('min') }}</small>
+                </div>
+                <div class="form-group col-md-4">
+                    <label>Max</label>
+                    <input name="max" type="text" class="form-control"
+                           v-model="srvModel.max" v-on:change="inputChanges"
+                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('max') }">
+                    <small class="text-danger">{{ errors.first('max') }}</small>
+                </div>
+                <div class="form-group col-md-4">
+                    <label>Step</label>
+                    <input name="step" type="text" class="form-control"
+                           v-model="srvModel.step" v-on:change="inputChanges"
+                           v-validate="'required|decimal|min_value:1'" :class="{'is-invalid': errors.has('step') }">
+                    <small class="text-danger">{{ errors.first('step') }}</small>
+                </div>
+            </div>
         </div>
         <div class="col-lg-5">
             <br />

From 7e0211924d4ad441b2d267f7f5bf6932b38236c8 Mon Sep 17 00:00:00 2001
From: Ludovic <dolu89@gmail.com>
Date: Sat, 6 Apr 2019 15:02:02 +0200
Subject: [PATCH 5/6] Replace inline js by templates in pay button

---
 BTCPayServer/Views/Stores/PayButton.cshtml  | 44 +++++++++++++++------
 BTCPayServer/wwwroot/paybutton/paybutton.js | 37 +++++++++--------
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index 244760271..f5cc179e8 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -159,22 +159,22 @@
             Please fix errors shown in order for code generation to successfully execute.
         </div>
     </div>
+</div>
 
+@section HeadScripts {
+    <link rel="stylesheet" href="~/vendor/highlightjs/default.min.css">
+    <script src="~/vendor/highlightjs/highlight.min.js"></script>
 
-    @section HeadScripts {
-        <link rel="stylesheet" href="~/vendor/highlightjs/default.min.css">
-        <script src="~/vendor/highlightjs/highlight.min.js"></script>
+    <script src="~/vendor/vuejs/vue.js"></script>
+    <script src="~/vendor/vuejs-vee-validate/vee-validate.js"></script>
 
-        <script src="~/vendor/vuejs/vue.js"></script>
-        <script src="~/vendor/vuejs-vee-validate/vee-validate.js"></script>
+    <script src="~/vendor/clipboard.js/clipboard.js"></script>
 
-        <script src="~/vendor/clipboard.js/clipboard.js"></script>
+    <script src="~/paybutton/paybutton.js"></script>
+}
 
-        <script src="~/paybutton/paybutton.js"></script>
-    }
-
-    @section Scripts {
-        <script type="text/javascript">
+@section Scripts {
+    <script type="text/javascript">
         var srvModel = @Html.Raw(Json.Serialize(Model));
 
         var payButtonCtrl = new Vue({
@@ -188,5 +188,23 @@
                 }
             }
         });
-        </script>
-    }
+    </script>
+}
+
+<script id="template-select-currency" type="text/template">
+    <select onchange="document.querySelector('input[type = hidden][name = currency]').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;"><option value="USD">USD</option><option value="GBP">GBP</option><option value="EUR">EUR</option><option value="BTC">BTC</option></select>
+</script>
+
+
+<script id="template-button-plus-minus" type="text/template">
+    <button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault();document.querySelector('#btcpay-input-price').value = parseInt(document.querySelector('#btcpay-input-price').value) TYPE 1;">TYPE</button>
+</script>
+
+<script id="template-input-price" type="text/template">
+    <input type="text" id="btcpay-input-price" name="price" value="PRICEVALUE" style="border: none; background-image: none; background-color: transparent; -webkit-box-shadow: none ; -moz-box-shadow: none ; -webkit-appearance: none ; width: WIDTHINPUT; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff;" oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector('#btcpay-input-price').value = PRICEVALUE : event.target.value" CUSTOM />
+</script>
+
+<script id="template-input-slider" type="text/template">
+    <input class="btcpay-input-range" id="btcpay-input-range" value="PRICE" type="range" min="MIN" max="MAX" step="STEP" style="width:WIDTH ;margin-bottom:15px;" oninput="document.querySelector('#btcpay-input-price').value = document.querySelector('#btcpay-input-range').value" />
+    <style type="text/css">input[type=range].btcpay-input-range{-webkit-appearance:none;width:100%;margin:9.45px 0}input[type=range].btcpay-input-range:focus{outline:0}input[type=range].btcpay-input-range::-webkit-slider-runnable-track{width:100%;height:3.1px;cursor:pointer;box-shadow:0 0 1.7px #020,0 0 0 #003c00;background:#f3f3f3;border-radius:1px;border:0 solid rgba(24,213,1,0)}input[type=range].btcpay-input-range::-webkit-slider-thumb{box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);border:2.5px solid #cedc21;height:22px;width:23px;border-radius:12px;background:#0f3723;cursor:pointer;-webkit-appearance:none;margin-top:-9.45px}input[type=range].btcpay-input-range:focus::-webkit-slider-runnable-track{background:#fff}input[type=range].btcpay-input-range::-moz-range-track{width:100%;height:3.1px;cursor:pointer;box-shadow:0 0 1.7px #020,0 0 0 #003c00;background:#f3f3f3;border-radius:1px;border:0 solid rgba(24,213,1,0)}input[type=range].btcpay-input-range::-moz-range-thumb{box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);border:2.5px solid #cedc21;height:22px;width:23px;border-radius:12px;background:#0f3723;cursor:pointer}input[type=range].btcpay-input-range::-ms-track{width:100%;height:3.1px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}input[type=range].btcpay-input-range::-ms-fill-lower{background:#e6e6e6;border:0 solid rgba(24,213,1,0);border-radius:2px;box-shadow:0 0 1.7px #020,0 0 0 #003c00}input[type=range].btcpay-input-range::-ms-fill-upper{background:#f3f3f3;border:0 solid rgba(24,213,1,0);border-radius:2px;box-shadow:0 0 1.7px #020,0 0 0 #003c00}input[type=range].btcpay-input-range::-ms-thumb{box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);border:2.5px solid #cedc21;height:22px;width:23px;border-radius:12px;background:#0f3723;cursor:pointer;height:3.1px}input[type=range].btcpay-input-range:focus::-ms-fill-lower{background:#f3f3f3}input[type=range].btcpay-input-range:focus::-ms-fill-upper{background:#fff}</style>
+</script>
diff --git a/BTCPayServer/wwwroot/paybutton/paybutton.js b/BTCPayServer/wwwroot/paybutton/paybutton.js
index 047aaae90..eda819f62 100644
--- a/BTCPayServer/wwwroot/paybutton/paybutton.js
+++ b/BTCPayServer/wwwroot/paybutton/paybutton.js
@@ -72,16 +72,9 @@ function inputChanges(event, buttonSize) {
     }
     else if (srvModel.buttonType == 2) {
         html += '\n    <div style="text-align:center;width:' + width + '">';
-
-        // Input price
         html += addInputPrice(srvModel.price, width, 'onchange="document.querySelector(\'#btcpay-input-range\').value = document.querySelector(\'#btcpay-input-price\').value"');
         html += addSelectCurrency();
-        // Slider
-        html += '<input class="btcpay-input-range" id="btcpay-input-range" value="' + srvModel.price + '" type="range" min="' + srvModel.min + '" max="' + srvModel.max + '" step="' + srvModel.step + '" style="width:' + width + ';margin-bottom:15px;"' +
-            'oninput="document.querySelector(\'#btcpay-input-price\').value = document.querySelector(\'#btcpay-input-range\').value" />';
-
-        // Slider style
-        html += '<style type="text/css">input[type=range].btcpay-input-range { -webkit-appearance: none; width: 100%; margin: 9.45px 0; } input[type=range].btcpay-input-range:focus { outline: none; } input[type=range].btcpay-input-range::-webkit-slider-runnable-track { width: 100%; height: 3.1px; cursor: pointer; box-shadow: 0px 0px 1.7px #002200, 0px 0px 0px #003c00; background: #f3f3f3; border-radius: 1px; border: 0px solid rgba(24, 213, 1, 0); } input[type=range].btcpay-input-range::-webkit-slider-thumb { box-shadow: 0px 0px 3.7px rgba(0, 170, 0, 0), 0px 0px 0px rgba(0, 195, 0, 0); border: 2.5px solid #cedc21; height: 22px; width: 23px; border-radius: 12px; background: #0f3723; cursor: pointer; -webkit-appearance: none; margin-top: -9.45px; } input[type=range].btcpay-input-range:focus::-webkit-slider-runnable-track { background: #ffffff; } input[type=range].btcpay-input-range::-moz-range-track { width: 100%; height: 3.1px; cursor: pointer; box-shadow: 0px 0px 1.7px #002200, 0px 0px 0px #003c00; background: #f3f3f3; border-radius: 1px; border: 0px solid rgba(24, 213, 1, 0); } input[type=range].btcpay-input-range::-moz-range-thumb { box-shadow: 0px 0px 3.7px rgba(0, 170, 0, 0), 0px 0px 0px rgba(0, 195, 0, 0); border: 2.5px solid #cedc21; height: 22px; width: 23px; border-radius: 12px; background: #0f3723; cursor: pointer; } input[type=range].btcpay-input-range::-ms-track { width: 100%; height: 3.1px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range].btcpay-input-range::-ms-fill-lower { background: #e6e6e6; border: 0px solid rgba(24, 213, 1, 0); border-radius: 2px; box-shadow: 0px 0px 1.7px #002200, 0px 0px 0px #003c00; } input[type=range].btcpay-input-range::-ms-fill-upper { background: #f3f3f3; border: 0px solid rgba(24, 213, 1, 0); border-radius: 2px; box-shadow: 0px 0px 1.7px #002200, 0px 0px 0px #003c00; } input[type=range].btcpay-input-range::-ms-thumb { box-shadow: 0px 0px 3.7px rgba(0, 170, 0, 0), 0px 0px 0px rgba(0, 195, 0, 0); border: 2.5px solid #cedc21; height: 22px; width: 23px; border-radius: 12px; background: #0f3723; cursor: pointer; height: 3.1px; } input[type=range].btcpay-input-range:focus::-ms-fill-lower { background: #f3f3f3; } input[type=range].btcpay-input-range:focus::-ms-fill-upper { background: #ffffff; }</style>';
+        html += addSlider(srvModel.price, srvModel.min, srvModel.max, srvModel.step, width);
         html += '</div>';
     }
 
@@ -126,7 +119,7 @@ function addinput(name, value) {
 }
 
 function addPlusMinusButton(type) {
-    var button = '<button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault();document.querySelector(\'#btcpay-input-price\').value = parseInt(document.querySelector(\'#btcpay-input-price\').value) TYPE 1;">TYPE</button>';
+    var button = document.getElementById('template-button-plus-minus').innerHTML.trim();
     if (type === "+") {
         return button.replace(/TYPE/g, '+');
     } else {
@@ -135,10 +128,11 @@ function addPlusMinusButton(type) {
 }
 
 function addInputPrice(price, widthInput, customFn) {
-    var input = '<input type="text" id="btcpay-input-price" name="price" value="' + price + '" style="' +
-        'border:none;background-image:none;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;-webkit-appearance: none;' + // Reset css
-        'width:' + widthInput + ';text-align:center;font-size:25px;margin:auto;border-radius:5px;line-height:35px;background:#fff;"' + // Custom css
-        'oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector(\'#btcpay-input-price\').value = ' + price + ' : event.target.value" CUSTOM />';
+    var input = document.getElementById('template-input-price').innerHTML.trim();
+
+    input = input.replace(/PRICEVALUE/g, price);
+    input = input.replace("WIDTHINPUT", widthInput);
+
     if (customFn) {
         return input.replace("CUSTOM", customFn);
     }
@@ -146,10 +140,15 @@ function addInputPrice(price, widthInput, customFn) {
 }
 
 function addSelectCurrency() {
-    return '<select onchange="document.querySelector(\'input[type = hidden][name = currency]\').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;">' +
-        '<option value="USD">USD</option>' +
-        '<option value="GBP">GBP</option>' +
-        '<option value="EUR">EUR</option>' +
-        '<option value="BTC">BTC</option>' +
-        '</select>';
+    return document.getElementById('template-select-currency').innerHTML.trim();
+}
+
+function addSlider(price, min, max, step, width) {
+    var input = document.getElementById('template-input-slider').innerHTML.trim();
+    input = input.replace("PRICE", price);
+    input = input.replace("MIN", min);
+    input = input.replace("MAX", max);
+    input = input.replace("STEP", step);
+    input = input.replace("WIDTH", width);
+    return input;
 }

From 0bf73abb395823db91ffc2125e3cd8f16f0e7ba5 Mon Sep 17 00:00:00 2001
From: Ludovic <dolu89@gmail.com>
Date: Sat, 6 Apr 2019 15:22:09 +0200
Subject: [PATCH 6/6] Fix Custom amount under 0 in Pay button

---
 BTCPayServer/Views/Stores/PayButton.cshtml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index f5cc179e8..87c4a9b50 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -195,13 +195,12 @@
     <select onchange="document.querySelector('input[type = hidden][name = currency]').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;"><option value="USD">USD</option><option value="GBP">GBP</option><option value="EUR">EUR</option><option value="BTC">BTC</option></select>
 </script>
 
-
 <script id="template-button-plus-minus" type="text/template">
-    <button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault();document.querySelector('#btcpay-input-price').value = parseInt(document.querySelector('#btcpay-input-price').value) TYPE 1;">TYPE</button>
+    <button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault(); var price = parseInt(document.querySelector('#btcpay-input-price').value); if ('TYPE' == '-' && (price - 1) < 1) { return; } document.querySelector('#btcpay-input-price').value = parseInt(document.querySelector('#btcpay-input-price').value) TYPE 1;">TYPE</button>
 </script>
 
 <script id="template-input-price" type="text/template">
-    <input type="text" id="btcpay-input-price" name="price" value="PRICEVALUE" style="border: none; background-image: none; background-color: transparent; -webkit-box-shadow: none ; -moz-box-shadow: none ; -webkit-appearance: none ; width: WIDTHINPUT; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff;" oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector('#btcpay-input-price').value = PRICEVALUE : event.target.value" CUSTOM />
+    <input type="text" id="btcpay-input-price" name="price" value="PRICEVALUE" style="border: none; background-image: none; background-color: transparent; -webkit-box-shadow: none ; -moz-box-shadow: none ; -webkit-appearance: none ; width: WIDTHINPUT; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff;" oninput="event.preventDefault();isNaN(event.target.value) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = PRICEVALUE : event.target.value" CUSTOM />
 </script>
 
 <script id="template-input-slider" type="text/template">