mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2024-11-20 02:28:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add a new Pay Button Type : Slider

Browse Source
This commit is contained in:
Ludovic 2019-04-04 20:56:12 +02:00
parent 4221763f48
commit 449066449b
4 changed files with 65 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
BTCPayServer/Controllers/StoresController.cs
View File

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

6
BTCPayServer/Models/StoreViewModels/PayButtonViewModel.cs
View File

@ -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]

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

@ -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">

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

@ -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", "");
}