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

More options to Custom Amount Pay button (#948)

Browse Source 
* Start adding more options to Custom Amount Pay button

This allows you to simplify the custom amount pay button to remove the big + & - buttons along with set a min, max and step amounts. There's also an option to fit the button next to the input amount to have it more condensed(not finished)

* make fit button inline work nicely

* make currency dropdown more obvious

* fix space
This commit is contained in:
Andrew Camilleri
2019-07-31 15:58:04 +02:00
committed by Nicolas Dorier
parent 5d6c28c997
commit 89a7166c1b
3 changed files with 50 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,10 @@ namespace BTCPayServer.Models.StoreViewModels
public decimal Max { get; set; }
public decimal Step { get; set; }
// Custom Amount properties (ButtonType = 1)
public bool SimpleInput { get; set; }
public bool FitButtonInline { get; set; }
[Url]
public string ServerIpn { get; set; }
[Url]

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

@@ -72,7 +72,7 @@
<label for="btn-slider">Slider</label>
</div>
</div>
<div class="form-row" v-if="srvModel.buttonType == 2">
<div class="form-row" v-if="srvModel.buttonType == 1 ||srvModel.buttonType == 2">
<div class="form-group col-md-4">
<label>Min</label>
<input name="min" type="text" class="form-control"
@@ -95,6 +95,22 @@
<small class="text-danger">{{ errors.first('step') }}</small>
</div>
</div>
<div class="form-row" v-if="srvModel.buttonType == 1">
<div class="form-group col-md-6">
<label>Use a simple input style</label>
<input name="simpleInput" type="checkbox" class="form-check"
v-model="srvModel.simpleInput" v-on:change="inputChanges"
:class="{'is-invalid': errors.has('simpleInput') }">
<small class="text-danger">{{ errors.first('simpleInput') }}</small>
</div>
<div class="form-group col-md-6">
<label>Fit button inline</label>
<input name="fitButtoninline" type="checkbox" class="form-check"
v-model="srvModel.fitButtoninline" v-on:change="inputChanges"
:class="{'is-invalid': errors.has('fitButtoninline') }">
<small class="text-danger">{{ errors.first('fitButtoninline') }}</small>
</div>
</div>
</div>
<div class="col-lg-5">
<br />
@@ -154,7 +170,7 @@
</div>
<div class="col-lg-5">
<br />
This parameter allows you to specify additional query string paramters that should be appended to the checkout page once the invoice is created. For example, <kbd>lang=da-DK</kbd> would load the checkout page in Danishby default.
This parameter allows you to specify additional query string paramters that should be appended to the checkout page once the invoice is created. For example, <kbd>lang=da-DK</kbd> would load the checkout page in Danish by default.
</div>
</div>
@@ -208,9 +224,8 @@
});
</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>
<select onmouseover="this.style.border='solid #ccc 1px'; this.style.padding='0px'" onmouseout="this.style.border='0'; this.style.padding='1px'" onchange="document.querySelector('input[type = hidden][name = currency]').value = event.target.value" style="border: 0; display: block; padding: 1px; 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">
@@ -218,7 +233,7 @@
</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) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = PRICEVALUE : event.target.value" CUSTOM />
<input type="TYPEVALUE" id="btcpay-input-price" name="price" min="MIN" max="MAX" step="STEP" 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">

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

@@ -44,16 +44,25 @@ function inputChanges(event, buttonSize) {
var width = "209px";
var widthInput = "3em";
var formwidth = null;
if (srvModel.buttonSize === 0) {
width = "146px";
widthInput = "2em";
} else if (srvModel.buttonSize === 1) {
if(srvModel.fitButtoninline){
formwidth = "292px";
}
} else if (srvModel.buttonSize === 1 ) {
width = "168px";
if(srvModel.fitButtoninline){
formwidth = "336px";
}
} else if (srvModel.buttonSize === 2) {
width = "209px";
if(srvModel.fitButtoninline){
formwidth = "418px";
}
}
var html = '<form method="POST" action="' + esc(srvModel.urlRoot) + 'api/v1/invoices">';
var html = '<form method="POST" action="' + esc(srvModel.urlRoot) + 'api/v1/invoices" '+(formwidth? 'style="width:'+formwidth+'"' : '')+'>';
html += addinput("storeId", srvModel.storeId);
// Add price as hidden only if it's a fixed amount (srvModel.buttonType = 0)
@@ -61,11 +70,16 @@ function inputChanges(event, buttonSize) {
html += addinput("price", srvModel.price);
}
else if (srvModel.buttonType == 1) {
html += '\n <div style="text-align:center;display:inline;width:' + width + '">';
html += '\n <div style="text-align:center;display:inline;'+ (srvModel.fitButtoninline? 'float:left':'width:'+ width) +';">';
html += '<div>';
html += addPlusMinusButton("-");
html += addInputPrice(srvModel.price, widthInput, "");
html += addPlusMinusButton("+");
if(!srvModel.simpleInput) {
html += addPlusMinusButton("-");
}
html += addInputPrice(srvModel.price, widthInput, "", srvModel.simpleInput? "number": null, srvModel.min, srvModel.max, srvModel.step);
if(!srvModel.simpleInput) {
html += addPlusMinusButton("+");
}
html += '</div>';
html += addSelectCurrency();
html += '</div>';
@@ -130,12 +144,15 @@ function addPlusMinusButton(type) {
}
}
function addInputPrice(price, widthInput, customFn) {
function addInputPrice(price, widthInput, customFn, type, min, max, step) {
var input = document.getElementById('template-input-price').innerHTML.trim();
input = input.replace(/PRICEVALUE/g, price);
input = input.replace("WIDTHINPUT", widthInput);
input = input.replace("TYPEVALUE", type || "text");
input = input.replace("MIN", min || 0);
input = input.replace("MAX", max|| "none");
input = input.replace("STEP", step || "any");
if (customFn) {
return input.replace("CUSTOM", customFn);
}