aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-18 14:34:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add currency select in Pay Button

Browse Source
This commit is contained in:
Ludovic
2019-04-04 21:32:16 +02:00
parent cf27fe5a53
commit bc97c07670
3 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
BTCPayServer/Controllers/StoresController.cs
View File

@@ -892,7 +892,7 @@ namespace BTCPayServer.Controllers
UrlRoot = appUrl, UrlRoot = appUrl,
PayButtonImageUrl = appUrl + "img/paybutton/pay.png", PayButtonImageUrl = appUrl + "img/paybutton/pay.png",
StoreId = store.Id, StoreId = store.Id,
ButtonType = 2, ButtonType = 0,
Min = 1, Min = 1,
Max = 20, Max = 20,
Step = 1 Step = 1

2
BTCPayServer/Views/Stores/PayButton.cshtml
View File

@@ -18,7 +18,7 @@
</div> </div>
<div class="form-group col-md-4"> <div class="form-group col-md-4">
<label>&nbsp;</label> <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" v-model="srvModel.currency" v-on:change="inputChanges"
:class="{'is-invalid': errors.has('currency') }"> :class="{'is-invalid': errors.has('currency') }">
</div> </div>

16
BTCPayServer/wwwroot/paybutton/paybutton.js
View File

@@ -62,17 +62,20 @@ function inputChanges(event, buttonSize) {
} }
else if (srvModel.buttonType == 1) { else if (srvModel.buttonType == 1) {
html += '\n <div style="text-align:center;width:' + width + '">'; html += '\n <div style="text-align:center;width:' + width + '">';
html += '<div>';
html += addPlusMinusButton("-"); html += addPlusMinusButton("-");
html += addInputPrice(srvModel.price, widthInput, ""); html += addInputPrice(srvModel.price, widthInput, "");
html += addPlusMinusButton("+"); html += addPlusMinusButton("+");
html += '</div>'; html += '</div>';
html += addSelectCurrency();
html += '</div>';
} }
else if (srvModel.buttonType == 2) { else if (srvModel.buttonType == 2) {
html += '\n <div style="text-align:center;width:' + width + '">'; html += '\n <div style="text-align:center;width:' + width + '">';
// Input price // Input price
html += addInputPrice(srvModel.price, width, 'onchange="document.querySelector(\'#btcpay-input-range\').value = document.querySelector(\'#btcpay-input-price\').value"'); html += addInputPrice(srvModel.price, width, 'onchange="document.querySelector(\'#btcpay-input-range\').value = document.querySelector(\'#btcpay-input-price\').value"');
html += addSelectCurrency();
// Slider // 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;"' + 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" />'; '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) { function addInputPrice(price, widthInput, customFn) {
var input = '<input type="text" id="btcpay-input-price" name="price" value="' + price + '" style="' + 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 '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 />'; 'oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector(\'#btcpay-input-price\').value = ' + price + ' : event.target.value" CUSTOM />';
if (customFn) { if (customFn) {
return input.replace("CUSTOM", customFn); return input.replace("CUSTOM", customFn);
} }
return input.replace("CUSTOM", ""); 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>';
}