2020-12-11 04:56:13 +01:00
@addTagHelper *, BundlerMinifier.TagHelpers
2018-03-23 09:27:48 +01:00
@inject BTCPayServer.Services.LanguageService langService
2021-10-11 04:11:02 +02:00
@inject BTCPayNetworkProvider BTCPayNetworkProvider
2021-10-11 05:32:09 +02:00
@inject BTCPayServer.Services.BTCPayServerEnvironment env
2019-08-25 15:50:11 +02:00
@inject PaymentMethodHandlerDictionary PaymentMethodHandlerDictionary
2021-10-11 04:11:02 +02:00
@using NBitcoin
2018-03-03 07:32:51 +01:00
@model PaymentModel
2017-09-13 08:47:34 +02:00
@{
2017-10-27 06:46:21 +02:00
Layout = null;
2017-09-13 08:47:34 +02:00
}
2021-10-11 04:11:02 +02:00
2017-09-13 08:47:34 +02:00
<!DOCTYPE html>
<html>
<head>
2017-10-27 06:46:21 +02:00
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
2018-01-30 17:39:58 +01:00
2017-10-27 06:46:21 +02:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
2018-11-19 05:20:48 +01:00
<META NAME="robots" CONTENT="noindex,nofollow">
2018-05-03 23:51:04 +02:00
<title>@Model.HtmlTitle</title>
2017-09-13 08:47:34 +02:00
2020-04-18 17:56:05 +02:00
<bundle name="wwwroot/bundles/checkout-bundle.min.css" asp-append-version="true" />
2018-01-30 17:39:58 +01:00
2021-05-19 04:39:27 +02:00
<script>
2019-09-05 05:48:00 +02:00
var initialSrvModel = @Safe.Json(Model);
2017-10-27 06:46:21 +02:00
</script>
2018-03-03 07:32:51 +01:00
2021-05-19 04:39:27 +02:00
<bundle name="wwwroot/bundles/bootstrap-bundle.min.js" asp-append-version="true" />
2020-04-18 17:56:05 +02:00
<bundle name="wwwroot/bundles/checkout-bundle.min.js" asp-append-version="true" />
2018-07-13 22:58:59 +02:00
<script>vex.defaultOptions.className = 'vex-theme-btcpay'</script>
2018-03-27 08:14:50 +02:00
2019-11-06 04:01:29 +01:00
@if (!string.IsNullOrEmpty(Model.CustomCSSLink))
2018-03-27 08:14:50 +02:00
{
<link href="@Model.CustomCSSLink" rel="stylesheet" />
}
2018-07-13 22:58:59 +02:00
2018-11-09 08:09:09 +01:00
@if (Model.IsModal)
{
<style type="text/css">
body {
2020-10-12 17:52:21 +02:00
background: rgba(25, 25, 25, 0.9);
2018-11-09 08:09:09 +01:00
}
2021-10-11 05:32:09 +02:00
2018-11-09 08:09:09 +01:00
.close-icon {
display: flex;
}
</style>
}
2017-09-13 08:47:34 +02:00
</head>
2018-11-09 08:09:09 +01:00
<body>
2017-10-27 06:46:21 +02:00
<noscript>
2020-10-12 17:52:21 +02:00
<div style="padding:2em;text-align:center;">
2017-10-27 06:46:21 +02:00
<h2>Javascript is currently disabled in your browser.</h2>
<h5>Please enable Javascript and refresh this page for the best experience.</h5>
2017-09-13 08:47:34 +02:00
2017-10-27 06:46:21 +02:00
<p>Alternatively, click below to continue to our HTML-only invoice.</p>
2017-09-13 08:47:34 +02:00
2020-11-08 09:39:10 +01:00
<a asp-action="CheckoutNoScript" asp-route-invoiceId="@Model.InvoiceId" style="text-decoration:underline;color:blue">
2019-03-31 20:46:38 +02:00
Continue to javascript-disabled invoice >
</a>
2020-10-12 17:52:21 +02:00
</div>
2017-10-27 06:46:21 +02:00
</noscript>
2017-09-13 08:47:34 +02:00
2017-10-27 06:46:21 +02:00
<!--[if lte IE 8]>
2020-10-12 17:52:21 +02:00
<div style="padding:2em;text-align:center;">
2020-11-08 09:39:10 +01:00
<form asp-action="CheckoutNoScript" method="GET">
2017-10-27 06:46:21 +02:00
<button style="text-decoration: underline; color: blue">Continue to legacy browser compatible invoice page
</button>
</form>
2020-10-12 17:52:21 +02:00
</div>
2017-10-27 06:46:21 +02:00
<![endif]-->
2017-09-13 08:47:34 +02:00
2018-11-09 08:09:09 +01:00
<invoice>
<div class="no-bounce" id="checkoutCtrl" v-cloak>
<div class="modal page">
2019-08-27 04:31:15 +02:00
<div class="modal-dialog open opened" role="document" v-bind:class="{ 'expired': invoiceUnpayable, 'paid': invoicePaid, 'enter-purchaser-email': showEmailForm}">
2018-11-09 08:09:09 +01:00
<div class="modal-content long">
<div class="content">
<div class="invoice">
<partial name="Checkout-Body" />
</div>
2017-10-27 06:46:21 +02:00
</div>
</div>
2018-09-20 06:36:19 +02:00
2018-11-09 08:09:09 +01:00
<div style="margin-top: 10px; text-align: center;">
@* Not working because of nsSeparator: false, keySeparator: false,
2018-03-22 06:21:26 +01:00
{{$t("nested.lang")}} >>
2018-03-20 20:30:37 +01:00
*@
2019-03-08 23:12:54 +01:00
<select asp-for="DefaultLang"
2018-11-09 11:02:53 +01:00
class="cmblang reverse invisible"
2021-10-15 07:27:52 +02:00
asp-items="@langService.GetLanguageSelectListItems()"></select>
2019-03-08 23:12:54 +01:00
2018-11-09 13:13:00 +01:00
<script>
2019-03-08 23:12:54 +01:00
$(function () {
2018-11-09 13:13:00 +01:00
// REVIEW: don't use initDropdown method but rather directly initialize select whenever you are using it
$("#DefaultLang").val(startingLanguage);
2021-10-07 05:27:48 +02:00
var languageSelectorPrettyDropdown = initDropdown("#DefaultLang");
2021-10-11 05:32:09 +02:00
languageSelectorPrettyDropdown.change(function () {
2021-10-07 05:27:48 +02:00
changeLanguage(languageSelectorPrettyDropdown.val());
});
2021-10-11 05:32:09 +02:00
languageSelectorPrettyDropdown.keypress(function (event) {
if (event.keyCode == 13) {
2021-10-07 05:27:48 +02:00
languageSelectorPrettyDropdown.click();
}
});
2018-03-22 06:07:30 +01:00
});
2018-11-09 13:13:00 +01:00
function initDropdown(selector) {
return $(selector).prettyDropdown({
2021-10-15 07:27:52 +02:00
classic: true,
2018-11-09 13:13:00 +01:00
height: 32,
reverse: true,
2021-10-15 07:27:52 +02:00
hoverIntent: -1
2018-11-09 13:13:00 +01:00
});
}
</script>
2018-11-09 08:09:09 +01:00
</div>
2020-04-05 00:28:00 +02:00
<div class="powered__by__btcpayserver">
2021-07-06 10:35:42 +02:00
Powered by <a target="_blank" href="https://github.com/btcpayserver/btcpayserver" rel="noreferrer noopener">BTCPay Server</a>
2018-11-09 08:09:09 +01:00
</div>
2021-10-11 05:32:09 +02:00
@if (env.CheatMode)
2021-10-11 04:11:02 +02:00
{
<partial name="Checkout-Testing" />
}
2017-10-27 06:46:21 +02:00
</div>
</div>
</div>
</invoice>
2021-05-19 04:39:27 +02:00
<script>
2021-10-15 07:27:52 +02:00
var availableLanguages = @Safe.Json(langService.GetLanguages().Select((language) => language.Code));
2021-07-27 08:17:56 +02:00
var defaultLang = @Safe.Json(Model.DefaultLang);
2018-11-09 11:02:53 +01:00
var fallbackLanguage = "en";
2018-11-09 13:13:00 +01:00
startingLanguage = computeStartingLanguage();
2018-11-09 11:02:53 +01:00
i18next
.use(window.i18nextXHRBackend)
.init({
backend: {
2019-08-10 07:05:11 +02:00
loadPath: @Safe.Json($"{Model.RootPath}locales/{{{{lng}}}}.json")
2018-11-09 11:02:53 +01:00
},
lng: startingLanguage,
fallbackLng: fallbackLanguage,
nsSeparator: false,
keySeparator: false
});
2019-03-08 23:12:54 +01:00
2018-11-09 11:02:53 +01:00
function computeStartingLanguage() {
if (urlParams.lang && isLanguageAvailable(urlParams.lang)) {
return urlParams.lang;
}
2021-07-27 08:17:56 +02:00
else if (isLanguageAvailable(defaultLang)) {
return defaultLang;
2018-11-09 11:02:53 +01:00
} else {
return fallbackLanguage;
}
}
2018-03-22 17:12:15 +01:00
2018-10-24 07:52:19 +02:00
function changeLanguage(lang) {
2018-11-09 13:13:00 +01:00
if (isLanguageAvailable(lang)) {
i18next.changeLanguage(lang);
}
2018-10-24 07:52:19 +02:00
}
2019-03-08 23:12:54 +01:00
2018-11-09 11:02:53 +01:00
function isLanguageAvailable(languageCode) {
return availableLanguages.indexOf(languageCode) >= 0;
}
2019-03-08 23:12:54 +01:00
2019-08-25 15:50:11 +02:00
var i18n = new VueI18next(i18next);
2018-10-24 07:52:19 +02:00
Vue.config.ignoredElements = [
'line-items',
'low-fee-timeline',
// Ignoring custom HTML5 elements, eg: bp-spinner
/^bp-/
];
2019-08-27 04:31:15 +02:00
var eventBus = new Vue();
2018-10-24 07:52:19 +02:00
var checkoutCtrl = new Vue({
i18n: i18n,
el: '#checkoutCtrl',
data: {
2019-09-05 05:48:00 +02:00
srvModel: initialSrvModel,
2019-08-27 04:31:15 +02:00
end: new Date(),
expirationPercentage: 0,
timerText: "@Model.TimeLeft",
emailAddressInput: "",
emailAddressInputDirty: false,
emailAddressInputInvalid: false,
emailAddressFormSubmitting: false,
lineItemsExpanded: false,
changingCurrencies: false,
2019-10-27 08:13:30 +01:00
loading: true,
isModal: initialSrvModel.isModal
2019-04-06 08:10:27 +02:00
},
computed: {
2019-08-27 04:31:15 +02:00
expiringSoon: function(){
return this.expirationPercentage >= 75 && !this.invoiceUnpayable && !this.invoicePaid;
2019-08-25 15:50:11 +02:00
},
showPaymentUI: function(){
2019-08-27 04:31:15 +02:00
return !this.showEmailForm && !this.invoiceUnpayable && !this.invoicePaid;
},
showEmailForm: function(){
2020-02-28 10:10:07 +01:00
return this.srvModel.requiresRefundEmail && (!this.srvModel.customerEmail || !this.validateEmail(this.srvModel.customerEmail)) && !this.invoiceUnpayable;
2019-08-27 04:31:15 +02:00
},
2019-10-08 06:06:12 +02:00
showRecommendedFee: function(){
return this.srvModel.showRecommendedFee && this.srvModel.feeRate != 0;
},
2019-08-27 04:31:15 +02:00
invoiceUnpayable: function(){
return ["expired", "invalid"].indexOf(this.srvModel.status) >= 0;
},
invoicePaid: function(){
return ["complete", "confirmed", "paid"].indexOf(this.srvModel.status) >= 0;
}
},
mounted: function(){
this.startProgressTimer();
this.listenIn();
this.onDataCallback(this.srvModel);
if (this.srvModel.status === "new" && this.srvModel.txCount > 1) {
this.onlyExpandLineItems();
}
window.parent.postMessage("loaded", "*");
jQuery("invoice").fadeOut(0).fadeIn(300);
window.closePaymentMethodDialog = this.closePaymentMethodDialog.bind(this);
this.loading = false;
},
methods: {
onlyExpandLineItems: function() {
if (!this.lineItemsExpanded) {
this.toggleLineItems();
}},
toggleLineItems: function() {
this.lineItemsExpanded ? $("line-items").slideUp() : $("line-items").slideDown();
this.lineItemsExpanded = !this.lineItemsExpanded;
},
openPaymentMethodDialog: function() {
var content = $("#vexPopupDialog").html();
vex.open({
unsafeContent: content
});
},
closePaymentMethodDialog: function(currencyId) {
vex.closeAll();
this.changeCurrency(currencyId);
2021-10-11 05:32:09 +02:00
},
2019-08-27 04:31:15 +02:00
changeCurrency: function (currency) {
2019-09-05 05:48:00 +02:00
if (currency !== null && this.srvModel.paymentMethodId !== currency) {
2019-08-27 04:31:15 +02:00
this.changingCurrencies = true;
2019-09-05 05:48:00 +02:00
this.srvModel.paymentMethodId = currency;
2019-08-27 04:31:15 +02:00
this.fetchData();
this.closePaymentMethodDialog(null);
}
2021-10-11 05:32:09 +02:00
},
2019-08-27 04:31:15 +02:00
close: function(){
$("invoice").fadeOut(300, function () {
window.parent.postMessage("close", "*");
});
},
validateEmail: function (email) {
var re = /^(([^<>()\[\]\\.,;:\s@@"]+(\.[^<>()\[\]\\.,;:\s@@"]+)*)|(".+"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
},
startProgressTimer: function(){
var timeLeftS = this.endDate? (this.endDate.getTime() - new Date().getTime())/1000 : this.srvModel.expirationSeconds;
this.expirationPercentage = 100 - ((timeLeftS / this.srvModel.maxTimeSeconds) * 100);
this.timerText = this.updateTimerText(timeLeftS);
if( this.expirationPercentage < 100 && (this.srvModel.status === "paidPartial" || this.srvModel.status === "new")){
setTimeout(this.startProgressTimer, 500);
}
},
updateTimerText: function (timer) {
if (timer >= 0) {
var minutes = parseInt(timer / 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
var seconds = parseInt(timer % 60, 10);
seconds = seconds < 10 ? "0" + seconds : seconds;
return minutes + ":" + seconds;
} else {
return "00:00";
}
},
listenIn: function(){
2019-08-29 08:37:02 +02:00
var self = this;
2019-08-27 04:31:15 +02:00
var socket = null;
var supportsWebSockets = 'WebSocket' in window && window.WebSocket.CLOSING === 2;
if (supportsWebSockets) {
var loc = window.location, ws_uri;
if (loc.protocol === "https:") {
ws_uri = "wss:";
} else {
ws_uri = "ws:";
}
ws_uri += "//" + loc.host;
ws_uri += loc.pathname + "/status/ws?invoiceId=" + this.srvModel.invoiceId;
2021-10-05 06:37:30 +02:00
2019-08-27 04:31:15 +02:00
try {
socket = new WebSocket(ws_uri);
socket.onmessage = function (e) {
2021-10-05 06:37:30 +02:00
if (e.data === "ping")
return;
2019-08-29 08:37:02 +02:00
self.fetchData();
2019-08-27 04:31:15 +02:00
};
socket.onerror = function (e) {
console.error("Error while connecting to websocket for invoice notifications (callback)");
};
}
catch (e) {
console.error("Error while connecting to websocket for invoice notifications");
}
}
2019-09-05 05:13:36 +02:00
var self = this;
2019-08-27 04:31:15 +02:00
function watcher(){
setTimeout(function(){
if (socket === null || socket.readyState !== 1) {
2019-09-05 05:13:36 +02:00
self.fetchData();
2019-08-27 04:31:15 +02:00
}
watcher();
}, 2000);
2021-10-11 05:32:09 +02:00
}
2019-08-27 04:31:15 +02:00
watcher();
},
fetchData: function(){
var self = this;
$.ajax({
2019-09-05 05:48:00 +02:00
url: window.location.pathname + "/status?invoiceId=" + this.srvModel.invoiceId + "&paymentMethodId=" + this.srvModel.paymentMethodId,
2019-08-27 04:31:15 +02:00
type: "GET",
cache: false
})
.done(function (data) {
self.onDataCallback.bind(self)(data);
})
},
onDataCallback : function(jsonData){
if (this.srvModel.status !== jsonData.status) {
2019-09-05 07:58:01 +02:00
window.parent.postMessage({ "invoiceId": this.srvModel.invoiceId, "status": jsonData.status }, "*");
2019-08-27 04:31:15 +02:00
}
if (jsonData.paymentMethodId === this.srvModel.paymentMethodId) {
this.changingCurrencies = false;
}
// displaying satoshis for lightning payments
jsonData.cryptoCodeSrv = jsonData.cryptoCode;
// expand line items to show details on amount due for multi-transaction payment
if (this.srvModel.txCount === 1 && jsonData.txCount > 1) {
this.onlyExpandLineItems();
}
var newEnd = new Date();
newEnd.setSeconds(newEnd.getSeconds()+ jsonData.expirationSeconds);
this.endDate = newEnd;
// updating ui
this.srvModel = jsonData;
2021-10-11 05:32:09 +02:00
2021-04-13 13:19:48 +02:00
eventBus.$emit("data-fetched", this.srvModel);
2020-10-24 16:47:05 +02:00
if (this.invoicePaid && jsonData.redirectAutomatically && jsonData.merchantRefLink) {
2019-08-27 04:31:15 +02:00
this.loading = true;
setTimeout(function () {
2020-10-24 16:47:05 +02:00
if (this.isModal && window.top.location == jsonData.merchantRefLink){
this.close();
} else {
window.top.location = jsonData.merchantRefLink;
}
}.bind(this), 2000);
2019-08-27 04:31:15 +02:00
}
},
onEmailChange: function(){
this.emailAddressInputDirty = true;
this.emailAddressInputInvalid = false;
},
onEmailSubmit : function(){
var self = this;
if (this.validateEmail(this.emailAddressInput)) {
this.emailAddressFormSubmitting = true;
// Push the email to a server, once the reception is confirmed move on
$.ajax({
url: window.location.pathname + "/UpdateCustomer?invoiceId=" +this.srvModel.invoiceId,
type: "POST",
data: JSON.stringify({ Email: this.emailAddressInput }),
contentType: "application/json; charset=utf-8"
})
.done(function () {
self.srvModel.customerEmail = self.emailAddressInput;
}).always(function () {
self.emailAddressFormSubmitting = false;
});
} else {
this.emailAddressInputInvalid = true;
}
2019-04-06 08:10:27 +02:00
}
2018-10-24 07:52:19 +02:00
}
});
2019-03-08 23:12:54 +01:00
</script>
2019-08-25 15:50:11 +02:00
2021-10-11 05:32:09 +02:00
@foreach (var paymentMethodHandler in PaymentMethodHandlerDictionary.Select(handler => handler.GetCheckoutUISettings()).Where(settings => settings != null))
{
<partial name="@paymentMethodHandler.ExtensionPartial" model="@Model" />
}
@await Component.InvokeAsync("UiExtensionPoint", new { location = "checkout-end", model = Model })
2017-09-13 08:47:34 +02:00
</body>
2017-10-27 10:53:04 +02:00
</html>
