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 : Custom amount

Browse Source
This commit is contained in:
Ludovic 2019-04-03 21:43:53 +02:00
parent 05da63f2a5
commit 184c797b0e
4 changed files with 63 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
BTCPayServer/Controllers/StoresController.cs
View File

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

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

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

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

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

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

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