mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-20 13:34:37 +01:00
Allow overriding UI of checkout in payment handler (#992)
This commit is contained in:
Andrew Camilleri
Nicolas Dorier
parent
989a7b863e
commit
43ee22f965
7 changed files with 296 additions and 246 deletions
|
|
@ -167,7 +167,6 @@ namespace BTCPayServer.Controllers
|
|||
return View(model);
|
||||
}
|
||||
|
||||
//TODO: abstract
|
||||
private async Task<PaymentModel> GetInvoiceModel(string invoiceId, PaymentMethodId paymentMethodId)
|
||||
{
|
||||
var invoice = await _InvoiceRepository.GetInvoice(invoiceId);
|
||||
|
|
@ -297,6 +296,7 @@ namespace BTCPayServer.Controllers
|
|||
};
|
||||
|
||||
paymentMethodHandler.PreparePaymentModel(model, dto);
|
||||
model.UISettings = paymentMethodHandler.GetCheckoutUISettings();
|
||||
model.PaymentMethodId = paymentMethodId.ToString();
|
||||
var expiration = TimeSpan.FromSeconds(model.ExpirationSeconds);
|
||||
model.TimeLeft = expiration.PrettyPrint();
|
||||
|
|
|
|||
|
|
@ -5,8 +5,15 @@ using System.Threading.Tasks;
|
|||
|
||||
namespace BTCPayServer.Models.InvoicingModels
|
||||
{
|
||||
public class CheckoutUIPaymentMethodSettings
|
||||
{
|
||||
public string ExtensionPartial { get; set; }
|
||||
public string CheckoutBodyVueComponentName { get; set; }
|
||||
public string NoScriptPartialName { get; set; }
|
||||
}
|
||||
public class PaymentModel
|
||||
{
|
||||
public CheckoutUIPaymentMethodSettings UISettings;
|
||||
public class AvailableCrypto
|
||||
{
|
||||
public string PaymentMethodId { get; set; }
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ namespace BTCPayServer.Payments
|
|||
Money amount, PaymentMethodId paymentMethodId);
|
||||
|
||||
IEnumerable<PaymentMethodId> GetSupportedPaymentMethods();
|
||||
CheckoutUIPaymentMethodSettings GetCheckoutUISettings();
|
||||
}
|
||||
|
||||
public interface IPaymentMethodHandler<TSupportedPaymentMethod, TBTCPayNetwork> : IPaymentMethodHandler
|
||||
|
|
@ -92,6 +93,11 @@ namespace BTCPayServer.Payments
|
|||
|
||||
throw new NotSupportedException("Invalid supportedPaymentMethod");
|
||||
}
|
||||
|
||||
public virtual CheckoutUIPaymentMethodSettings GetCheckoutUISettings()
|
||||
{
|
||||
return null;
|
||||
}
|
||||
|
||||
object IPaymentMethodHandler.PreparePayment(ISupportedPaymentMethod supportedPaymentMethod, StoreData store,
|
||||
BTCPayNetworkBase network)
|
||||
|
|
|
|||
|
|
@ -99,12 +99,10 @@
|
|||
<div class="single-item-order__right__btc-price" v-else>
|
||||
<span>{{ srvModel.btcDue }} {{ srvModel.cryptoCode }}</span>
|
||||
</div>
|
||||
|
||||
<div class="single-item-order__right__ex-rate" v-if="srvModel.orderAmountFiat">
|
||||
<div class="single-item-order__right__ex-rate" v-if="srvModel.orderAmountFiat && srvModel.cryptoCode">
|
||||
1 {{ srvModel.cryptoCodeSrv }} = {{ srvModel.rate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="fa fa-angle-double-down"></span>
|
||||
<span class="fa fa-angle-double-up"></span>
|
||||
</div>
|
||||
|
|
@ -128,7 +126,7 @@
|
|||
<span>{{$t("Network Cost")}}</span>
|
||||
</div>
|
||||
<div class="line-items__item__value">
|
||||
<span v-if="srvModel.IsMultiCurrency">
|
||||
<span v-if="srvModel.isMultiCurrency">
|
||||
{{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
|
||||
</span>
|
||||
<span v-else>
|
||||
|
|
@ -148,7 +146,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</line-items>
|
||||
<div class="payment-tabs">
|
||||
<div class="payment-tabs" v-if="!srvModel.uiSettings || !srvModel.uiSettings.checkoutBodyVueComponentName">
|
||||
<div class="payment-tabs__tab active" id="scan-tab">
|
||||
<span>{{$t("Scan")}}</span>
|
||||
</div>
|
||||
|
|
@ -170,218 +168,227 @@
|
|||
</div>
|
||||
|
||||
<div class="payment-box">
|
||||
<div class="bp-view payment manual-flow enter-contact-email active" id="emailAddressView">
|
||||
<form class="manual__step-one refund-address-form contact-email-form" id="emailAddressForm" name="emailAddressForm" novalidate="">
|
||||
<div class="manual__step-one__header">
|
||||
<span>{{$t("Contact and Refund Email")}}</span>
|
||||
</div>
|
||||
<div class="manual__step-one__instructions">
|
||||
<span class="initial-label">
|
||||
<span>{{$t("Contact_Body")}}</span>
|
||||
</span>
|
||||
<span class="submission-error-label">{{$t("Please enter a valid email address")}}</span>
|
||||
</div>
|
||||
<div class="input-wrapper">
|
||||
<input class="bp-input email-input ng-pristine ng-invalid ng-touched" id="emailAddressFormInput" v-bind:placeholder="$t('Your email')" type="email">
|
||||
<bp-loading-button>
|
||||
<button type="submit" class="action-button" style="margin-top: 15px;">
|
||||
<span class="button-text">{{$t("Continue")}}</span>
|
||||
<div class="loader-wrapper">
|
||||
<partial name="Checkout-Spinner" />
|
||||
</div>
|
||||
<div class="bp-view payment manual-flow enter-contact-email active" id="emailAddressView">
|
||||
<form class="manual__step-one refund-address-form contact-email-form" id="emailAddressForm" name="emailAddressForm" novalidate="">
|
||||
<div class="manual__step-one__header">
|
||||
<span>{{$t("Contact and Refund Email")}}</span>
|
||||
</div>
|
||||
<div class="manual__step-one__instructions">
|
||||
<span class="initial-label">
|
||||
<span>{{$t("Contact_Body")}}</span>
|
||||
</span>
|
||||
<span class="submission-error-label">{{$t("Please enter a valid email address")}}</span>
|
||||
</div>
|
||||
<div class="input-wrapper">
|
||||
<input class="bp-input email-input ng-pristine ng-invalid ng-touched" id="emailAddressFormInput" v-bind:placeholder="$t('Your email')" type="email">
|
||||
<bp-loading-button>
|
||||
<button type="submit" class="action-button" style="margin-top: 15px;">
|
||||
<span class="button-text">{{$t("Continue")}}</span>
|
||||
<div class="loader-wrapper">
|
||||
<partial name="Checkout-Spinner"/>
|
||||
</div>
|
||||
</button>
|
||||
</bp-loading-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div v-if="showPaymentUI">
|
||||
<component
|
||||
v-if="srvModel.uiSettings && srvModel.uiSettings.checkoutBodyVueComponentName"
|
||||
v-bind:srv-model="srvModel"
|
||||
v-bind:is="srvModel.uiSettings.checkoutBodyVueComponentName">
|
||||
</component>
|
||||
|
||||
<template v-else>
|
||||
<div class="bp-view payment scan" id="scan">
|
||||
<div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null || !scanDisplayQr }">
|
||||
<div class="btnGroupLnd">
|
||||
<button onclick="lndToggleBolt11()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 0 }"
|
||||
v-bind:title="$t('BOLT 11 Invoice')">
|
||||
{{$t("BOLT 11 Invoice")}}
|
||||
</button>
|
||||
</bp-loading-button>
|
||||
<button onclick="lndToggleNode()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 1 }"
|
||||
v-bind:title="$t('Node Info')">
|
||||
{{$t("Node Info")}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="bp-view payment scan" id="scan">
|
||||
<div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null || !scanDisplayQr }">
|
||||
<div class="btnGroupLnd">
|
||||
<button onclick="lndToggleBolt11()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 0 }"
|
||||
v-bind:title="$t('BOLT 11 Invoice')">
|
||||
{{$t("BOLT 11 Invoice")}}
|
||||
</button>
|
||||
<button onclick="lndToggleNode()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 1 }"
|
||||
v-bind:title="$t('Node Info')">
|
||||
{{$t("Node Info")}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payment__scan">
|
||||
<img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon"
|
||||
v-if="scanDisplayQr" />
|
||||
<qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 0, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg"
|
||||
v-if="scanDisplayQr">
|
||||
</qrcode>
|
||||
<div class="payment__scan">
|
||||
<img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon"
|
||||
v-if="scanDisplayQr"/>
|
||||
<qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 0, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg"
|
||||
v-if="scanDisplayQr">
|
||||
</qrcode>
|
||||
|
||||
|
||||
<div class="payment__spinner qr_currency_icon" style="padding-right: 20px;">
|
||||
<partial name="Checkout-Spinner" />
|
||||
<div class="payment__spinner qr_currency_icon" style="padding-right: 20px;">
|
||||
<partial name="Checkout-Spinner"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payment__details__instruction__open-wallet" v-if="scanDisplayQr">
|
||||
<a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">
|
||||
<span>{{$t("Open in wallet")}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payment__details__instruction__open-wallet" v-if="scanDisplayQr">
|
||||
<a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">
|
||||
<span>{{$t("Open in wallet")}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bp-view payment manual-flow" id="copy">
|
||||
<div class="manual__step-two__instructions">
|
||||
<span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
|
||||
</div>
|
||||
<div class="copyLabelPopup">
|
||||
<span>{{$t("Copied")}}</span>
|
||||
</div>
|
||||
<nav v-if="srvModel.isLightning" class="copyBox">
|
||||
<div class="copySectionBox bottomBorder">
|
||||
<label>{{$t("BOLT 11 Invoice")}}</label>
|
||||
<div class="inputWithIcon _copyInput">
|
||||
<input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
|
||||
<img v-bind:src="srvModel.cryptoImage" />
|
||||
</div>
|
||||
<div class="bp-view payment manual-flow" id="copy">
|
||||
<div class="manual__step-two__instructions">
|
||||
<span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
|
||||
</div>
|
||||
<div class="separatorGem"></div>
|
||||
<div class="copySectionBox">
|
||||
<label>{{$t("Node Info")}}</label>
|
||||
<div class="inputWithIcon _copyInput">
|
||||
<input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly" />
|
||||
<img v-bind:src="srvModel.cryptoImage" />
|
||||
</div>
|
||||
<div class="copyLabelPopup">
|
||||
<span>{{$t("Copied")}}</span>
|
||||
</div>
|
||||
</nav>
|
||||
<nav v-else class="copyBox">
|
||||
<div class="copySectionBox bottomBorder">
|
||||
<label>{{$t("Amount")}}</label>
|
||||
<div class="copyAmountText copy-cursor _copySpan">
|
||||
<span>{{srvModel.btcDue}}</span> {{ srvModel.cryptoCode }}
|
||||
<nav v-if="srvModel.isLightning" class="copyBox">
|
||||
<div class="copySectionBox bottomBorder">
|
||||
<label>{{$t("BOLT 11 Invoice")}}</label>
|
||||
<div class="inputWithIcon _copyInput">
|
||||
<input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly"/>
|
||||
<img v-bind:src="srvModel.cryptoImage"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separatorGem"></div>
|
||||
<div class="copySectionBox">
|
||||
<label>{{$t("Address")}}</label>
|
||||
<div class="inputWithIcon _copyInput">
|
||||
<input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly" />
|
||||
<img v-bind:src="srvModel.cryptoImage" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@if (Model.ChangellyEnabled || Model.CoinSwitchEnabled)
|
||||
{
|
||||
<div id="altcoins" class="bp-view payment manual-flow">
|
||||
<nav v-if="srvModel.isLightning">
|
||||
<div class="manual__step-two__instructions">
|
||||
<span>
|
||||
{{$t("ConversionTab_Lightning")}}
|
||||
</span>
|
||||
<div class="separatorGem"></div>
|
||||
<div class="copySectionBox">
|
||||
<label>{{$t("Node Info")}}</label>
|
||||
<div class="inputWithIcon _copyInput">
|
||||
<input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly"/>
|
||||
<img v-bind:src="srvModel.cryptoImage"/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav v-else>
|
||||
<div class="manual__step-two__instructions">
|
||||
<span>
|
||||
{{$t("ConversionTab_BodyTop", srvModel)}}
|
||||
<br /><br />
|
||||
{{$t("ConversionTab_BodyDesc", srvModel)}}
|
||||
</span>
|
||||
<nav v-else class="copyBox">
|
||||
<div class="copySectionBox bottomBorder">
|
||||
<label>{{$t("Amount")}}</label>
|
||||
<div class="copyAmountText copy-cursor _copySpan">
|
||||
<span>{{srvModel.btcDue}}</span> {{ srvModel.cryptoCode }}
|
||||
</div>
|
||||
</div>
|
||||
<center>
|
||||
|
||||
@if (Model.CoinSwitchEnabled && Model.ChangellyEnabled)
|
||||
{
|
||||
<template v-if="!selectedThirdPartyProcessor">
|
||||
<button v-on:click="selectedThirdPartyProcessor = 'coinswitch'" class="action-button">
|
||||
{{$t("Pay with CoinSwitch")}}
|
||||
</button>
|
||||
<button v-on:click="selectedThirdPartyProcessor = 'changelly'" class="action-button">
|
||||
{{$t("Pay with Changelly")}}
|
||||
</button>
|
||||
</template>
|
||||
}
|
||||
|
||||
@if (Model.CoinSwitchEnabled)
|
||||
{
|
||||
<coinswitch inline-template
|
||||
v-if="!srvModel.changellyEnabled || selectedThirdPartyProcessor === 'coinswitch'"
|
||||
:mode="srvModel.coinSwitchMode"
|
||||
:merchant-id="srvModel.coinSwitchMerchantId"
|
||||
:to-currency="srvModel.paymentMethodId"
|
||||
:to-currency-due="coinswitchAmountDue"
|
||||
:autoload="selectedThirdPartyProcessor === 'coinswitch'"
|
||||
:to-currency-address="srvModel.btcAddress">
|
||||
<div>
|
||||
<a v-on:click="openDialog($event)" :href="url" class="action-button" v-show="url && !opened">
|
||||
<div class="separatorGem"></div>
|
||||
<div class="copySectionBox">
|
||||
<label>{{$t("Address")}}</label>
|
||||
<div class="inputWithIcon _copyInput">
|
||||
<input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly"/>
|
||||
<img v-bind:src="srvModel.cryptoImage"/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@if (Model.ChangellyEnabled || Model.CoinSwitchEnabled)
|
||||
{
|
||||
<div id="altcoins" class="bp-view payment manual-flow">
|
||||
<nav v-if="srvModel.isLightning">
|
||||
<div class="manual__step-two__instructions">
|
||||
<span>
|
||||
{{$t("ConversionTab_Lightning")}}
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
<nav v-else>
|
||||
<div class="manual__step-two__instructions">
|
||||
<span>
|
||||
{{$t("ConversionTab_BodyTop", srvModel)}}
|
||||
<br/><br/>
|
||||
{{$t("ConversionTab_BodyDesc", srvModel)}}
|
||||
</span>
|
||||
</div>
|
||||
<center>
|
||||
|
||||
@if (Model.CoinSwitchEnabled && Model.ChangellyEnabled)
|
||||
{
|
||||
<template v-if="!selectedThirdPartyProcessor">
|
||||
<button v-on:click="selectedThirdPartyProcessor = 'coinswitch'" class="action-button">
|
||||
{{$t("Pay with CoinSwitch")}}
|
||||
</a>
|
||||
|
||||
@if (Model.ChangellyEnabled)
|
||||
{
|
||||
<button v-show="!opened" v-on:click="$parent.selectedThirdPartyProcessor = 'changelly'" class="btn-link mt-2">
|
||||
</button>
|
||||
<button v-on:click="selectedThirdPartyProcessor = 'changelly'" class="action-button">
|
||||
{{$t("Pay with Changelly")}}
|
||||
</button>
|
||||
}
|
||||
|
||||
<iframe
|
||||
v-if="showInlineIFrame"
|
||||
v-on:load="onLoadIframe"
|
||||
style="height: 100%; position: fixed; top: 0; width: 100%; left: 0;"
|
||||
sandbox="allow-scripts allow-forms allow-popups allow-same-origin"
|
||||
:src="url"></iframe>
|
||||
</template>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
</coinswitch>
|
||||
}
|
||||
|
||||
@if(Model.ChangellyEnabled){
|
||||
|
||||
<changelly inline-template
|
||||
v-if="!srvModel.coinSwitchEnabled || selectedThirdPartyProcessor === 'changelly'"
|
||||
:merchant-id="srvModel.changellyMerchantId"
|
||||
:store-id="srvModel.storeId"
|
||||
:to-currency="srvModel.paymentMethodId"
|
||||
:to-currency-due="srvModel.changellyAmountDue"
|
||||
:to-currency-address="srvModel.btcAddress">
|
||||
<div class="changelly-component">
|
||||
<div class="changelly-component-dropdown-holder" v-show="prettyDropdownInstance">
|
||||
<select
|
||||
v-model="selectedFromCurrency"
|
||||
:disabled="isLoading"
|
||||
v-on:change="onCurrencyChange($event)"
|
||||
ref="changellyCurrenciesDropdown">
|
||||
<option value="">{{$t("ConversionTab_CurrencyList_Select_Option")}}</option>
|
||||
<option v-for="currency of currencies"
|
||||
:data-prefix="'<img src=\''+currency.image+'\'/>'"
|
||||
:value="currency.name">
|
||||
{{currency.fullName}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<a v-on:click="openDialog($event)" :href="url" class="action-button" v-show="url">
|
||||
{{$t("Pay with Changelly")}}
|
||||
</a>
|
||||
@if (Model.CoinSwitchEnabled)
|
||||
{
|
||||
<button v-on:click="$parent.selectedThirdPartyProcessor = 'coinswitch'" class="btn-link mt-2">
|
||||
@if (Model.CoinSwitchEnabled)
|
||||
{
|
||||
<coinswitch inline-template
|
||||
v-if="!srvModel.changellyEnabled || selectedThirdPartyProcessor === 'coinswitch'"
|
||||
:mode="srvModel.coinSwitchMode"
|
||||
:merchant-id="srvModel.coinSwitchMerchantId"
|
||||
:to-currency="srvModel.paymentMethodId"
|
||||
:to-currency-due="coinswitchAmountDue"
|
||||
:autoload="selectedThirdPartyProcessor === 'coinswitch'"
|
||||
:to-currency-address="srvModel.btcAddress">
|
||||
<div>
|
||||
<a v-on:click="openDialog($event)" :href="url" class="action-button" v-show="url && !opened">
|
||||
{{$t("Pay with CoinSwitch")}}
|
||||
</button>
|
||||
}
|
||||
<button class="retry-button" v-if="calculateError" v-on:click="retry('calculateAmount')">
|
||||
{{$t("ConversionTab_CalculateAmount_Error")}}
|
||||
</button>
|
||||
<button class="retry-button" v-if="currenciesError" v-on:click="retry('loadCurrencies')">
|
||||
{{$t("ConversionTab_LoadCurrencies_Error")}}
|
||||
</button>
|
||||
<div v-show="isLoading" class="general__spinner">
|
||||
<partial name="Checkout-Spinner"/>
|
||||
</a>
|
||||
|
||||
@if (Model.ChangellyEnabled)
|
||||
{
|
||||
<button v-show="!opened" v-on:click="$parent.selectedThirdPartyProcessor = 'changelly'" class="btn-link mt-2">
|
||||
{{$t("Pay with Changelly")}}
|
||||
</button>
|
||||
}
|
||||
|
||||
<iframe
|
||||
v-if="showInlineIFrame"
|
||||
v-on:load="onLoadIframe"
|
||||
style="height: 100%; position: fixed; top: 0; width: 100%; left: 0;"
|
||||
sandbox="allow-scripts allow-forms allow-popups allow-same-origin"
|
||||
:src="url">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</changelly>
|
||||
}
|
||||
</center>
|
||||
</nav>
|
||||
</div>
|
||||
}
|
||||
</coinswitch>
|
||||
}
|
||||
|
||||
@if (Model.ChangellyEnabled)
|
||||
{
|
||||
<changelly inline-template
|
||||
v-if="!srvModel.coinSwitchEnabled || selectedThirdPartyProcessor === 'changelly'"
|
||||
:merchant-id="srvModel.changellyMerchantId"
|
||||
:store-id="srvModel.storeId"
|
||||
:to-currency="srvModel.paymentMethodId"
|
||||
:to-currency-due="srvModel.changellyAmountDue"
|
||||
:to-currency-address="srvModel.btcAddress">
|
||||
<div class="changelly-component">
|
||||
<div class="changelly-component-dropdown-holder" v-show="prettyDropdownInstance">
|
||||
<select
|
||||
v-model="selectedFromCurrency"
|
||||
:disabled="isLoading"
|
||||
v-on:change="onCurrencyChange($event)"
|
||||
ref="changellyCurrenciesDropdown">
|
||||
<option value="">{{$t("ConversionTab_CurrencyList_Select_Option")}}</option>
|
||||
<option v-for="currency of currencies"
|
||||
:data-prefix="'<img src=\''+currency.image+'\'/>'"
|
||||
:value="currency.name">
|
||||
{{currency.fullName}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<a v-on:click="openDialog($event)" :href="url" class="action-button" v-show="url">
|
||||
{{$t("Pay with Changelly")}}
|
||||
</a>
|
||||
@if (Model.CoinSwitchEnabled)
|
||||
{
|
||||
<button v-on:click="$parent.selectedThirdPartyProcessor = 'coinswitch'" class="btn-link mt-2">
|
||||
{{$t("Pay with CoinSwitch")}}
|
||||
</button>
|
||||
}
|
||||
<button class="retry-button" v-if="calculateError" v-on:click="retry('calculateAmount')">
|
||||
{{$t("ConversionTab_CalculateAmount_Error")}}
|
||||
</button>
|
||||
<button class="retry-button" v-if="currenciesError" v-on:click="retry('loadCurrencies')">
|
||||
{{$t("ConversionTab_LoadCurrencies_Error")}}
|
||||
</button>
|
||||
<div v-show="isLoading" class="general__spinner">
|
||||
<partial name="Checkout-Spinner"/>
|
||||
</div>
|
||||
</div>
|
||||
</changelly>
|
||||
}
|
||||
</center>
|
||||
</nav>
|
||||
</div>
|
||||
}
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="bp-view" id="paid">
|
||||
<div class="status-block">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@addTagHelper *, BundlerMinifier.TagHelpers
|
||||
@inject BTCPayServer.Services.LanguageService langService
|
||||
@using Newtonsoft.Json
|
||||
@using Newtonsoft.Json.Linq
|
||||
@inject PaymentMethodHandlerDictionary PaymentMethodHandlerDictionary
|
||||
@model PaymentModel
|
||||
@{
|
||||
Layout = null;
|
||||
|
|
@ -152,7 +151,7 @@
|
|||
return availableLanguages.indexOf(languageCode) >= 0;
|
||||
}
|
||||
|
||||
const i18n = new VueI18next(i18next);
|
||||
var i18n = new VueI18next(i18next);
|
||||
|
||||
// TODO: Move all logic from core.js to Vue controller
|
||||
Vue.config.ignoredElements = [
|
||||
|
|
@ -161,7 +160,6 @@
|
|||
// Ignoring custom HTML5 elements, eg: bp-spinner
|
||||
/^bp-/
|
||||
];
|
||||
|
||||
var checkoutCtrl = new Vue({
|
||||
i18n: i18n,
|
||||
el: '#checkoutCtrl',
|
||||
|
|
@ -184,9 +182,18 @@
|
|||
return this.srvModel.coinSwitchAmountMarkupPercentage
|
||||
? this.srvModel.btcDue * (1 + (this.srvModel.coinSwitchAmountMarkupPercentage / 100))
|
||||
: this.srvModel.btcDue;
|
||||
},
|
||||
showPaymentUI: function(){
|
||||
var disallowedStatuses = ["complete","confirmed" ,"paid", "expired", "invalid"];
|
||||
return (!this.srvModel.requiresRefundEmail || validateEmail(srvModel.customerEmail)) && disallowedStatuses.indexOf(this.srvModel.status) < 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@foreach (var paymentMethodHandler in PaymentMethodHandlerDictionary.Select(handler => handler.GetCheckoutUISettings()).Where(settings => settings != null))
|
||||
{
|
||||
<partial name="@paymentMethodHandler.ExtensionPartial" model="@Model"/>
|
||||
}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -16,16 +16,22 @@
|
|||
<h1>Pay with @Model.StoreName</h1>
|
||||
@if (Model.Status == "new")
|
||||
{
|
||||
<div>
|
||||
<p>To complete payment, please send <b>@Model.BtcDue @Model.CryptoCode</b> to <b style="word-break: break-word;">@Model.BtcAddress</b></p>
|
||||
<p>Time remaining: @Model.TimeLeft</p>
|
||||
<p><a href="@Model.InvoiceBitcoinUrl" style="word-break: break-word;">@Model.InvoiceBitcoinUrl</a></p>
|
||||
@if (Model.IsLightning)
|
||||
{
|
||||
<p>Peer Info: <b>@Model.PeerInfo</b></p>
|
||||
}
|
||||
</div>
|
||||
|
||||
if (!string.IsNullOrEmpty(Model.UISettings?.NoScriptPartialName))
|
||||
{
|
||||
<partial model="@Model" name="@Model.UISettings.NoScriptPartialName"/>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div>
|
||||
<p>To complete payment, please send <b>@Model.BtcDue @Model.CryptoCode</b> to <b style="word-break: break-word;">@Model.BtcAddress</b></p>
|
||||
<p>Time remaining: @Model.TimeLeft</p>
|
||||
<p><a href="@Model.InvoiceBitcoinUrl" style="word-break: break-word;">@Model.InvoiceBitcoinUrl</a></p>
|
||||
@if (Model.IsLightning)
|
||||
{
|
||||
<p>Peer Info: <b>@Model.PeerInfo</b></p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (Model.AvailableCryptos.Count > 1)
|
||||
{
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,29 @@
|
|||
// TODO: Refactor... switch from jQuery to Vue.js
|
||||
// public methods
|
||||
function resetTabsSlider() {
|
||||
// Scan/Copy Transitions
|
||||
// Scan Tab
|
||||
$("#scan-tab").off().on("click", function () {
|
||||
resetTabsSlider();
|
||||
activateTab("#scan");
|
||||
});
|
||||
|
||||
// Copy tab
|
||||
$("#copy-tab").off().on("click", function () {
|
||||
resetTabsSlider();
|
||||
activateTab("#copy");
|
||||
|
||||
$("#tabsSlider").addClass("slide-copy");
|
||||
});
|
||||
|
||||
// Altcoins tab
|
||||
$("#altcoins-tab").off().on("click", function () {
|
||||
resetTabsSlider();
|
||||
activateTab("#altcoins");
|
||||
|
||||
$("#tabsSlider").addClass("slide-altcoins");
|
||||
});
|
||||
|
||||
$("#tabsSlider").removeClass("slide-copy");
|
||||
$("#tabsSlider").removeClass("slide-altcoins");
|
||||
|
||||
|
|
@ -27,6 +50,17 @@ function changeCurrency(currency) {
|
|||
checkoutCtrl.scanDisplayQr = "";
|
||||
srvModel.paymentMethodId = currency;
|
||||
fetchStatus();
|
||||
setTimeout(function(){
|
||||
resetTabsSlider();
|
||||
if ($("#tabsSlider").hasClass("slide-copy")) {
|
||||
activateTab("#copy");
|
||||
} else if ($("#tabsSlider").hasClass("slide-altcoins")) {
|
||||
activateTab("#altcoins");
|
||||
} else {
|
||||
activateTab("#scan");
|
||||
}
|
||||
},50);
|
||||
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
|
@ -162,6 +196,14 @@ function onlyExpandLineItems() {
|
|||
}
|
||||
|
||||
|
||||
function activateTab(senderName) {
|
||||
$(senderName + "-tab").addClass("active");
|
||||
|
||||
$(senderName).show();
|
||||
$(senderName).addClass("active");
|
||||
}
|
||||
|
||||
|
||||
// private methods
|
||||
$(document).ready(function () {
|
||||
// initialize
|
||||
|
|
@ -192,7 +234,7 @@ $(document).ready(function () {
|
|||
jQuery("invoice").fadeIn(300);
|
||||
|
||||
// eof initialize
|
||||
|
||||
|
||||
// Expand Line-Items
|
||||
$(".buyerTotalLine").click(function () {
|
||||
toggleLineItems();
|
||||
|
|
@ -239,11 +281,7 @@ $(document).ready(function () {
|
|||
});
|
||||
}
|
||||
|
||||
// Validate Email address
|
||||
function validateEmail(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);
|
||||
}
|
||||
|
||||
|
||||
/* =============== Even listeners =============== */
|
||||
|
||||
|
|
@ -255,35 +293,8 @@ $(document).ready(function () {
|
|||
});
|
||||
|
||||
|
||||
// Scan/Copy Transitions
|
||||
// Scan Tab
|
||||
$("#scan-tab").click(function () {
|
||||
resetTabsSlider();
|
||||
activateTab("#scan");
|
||||
});
|
||||
|
||||
// Copy tab
|
||||
$("#copy-tab").click(function () {
|
||||
resetTabsSlider();
|
||||
activateTab("#copy");
|
||||
|
||||
$("#tabsSlider").addClass("slide-copy");
|
||||
});
|
||||
|
||||
// Altcoins tab
|
||||
$("#altcoins-tab").click(function () {
|
||||
resetTabsSlider();
|
||||
activateTab("#altcoins");
|
||||
|
||||
$("#tabsSlider").addClass("slide-altcoins");
|
||||
});
|
||||
|
||||
function activateTab(senderName) {
|
||||
$(senderName + "-tab").addClass("active");
|
||||
|
||||
$(senderName).show();
|
||||
$(senderName).addClass("active");
|
||||
}
|
||||
|
||||
// Payment received
|
||||
// Should connect using webhook ?
|
||||
|
|
@ -423,3 +434,9 @@ $(document).ready(function () {
|
|||
);
|
||||
|
||||
});
|
||||
|
||||
// Validate Email address
|
||||
function validateEmail(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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue