mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-01-19 05:33:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(checkout): displayed payment methods vue component (#6316)

Browse Source 
The displayed payment methods can change with updates aswell, so it
should be rendered as a vue component instead
This commit is contained in:
jackstar12 2024-10-18 07:05:00 +02:00 committed by GitHub
parent 8b5b90d247
commit 817522ff97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
BTCPayServer/Views/UIInvoice/Checkout.cshtml
View File

@ -12,7 +12,7 @@
ViewData["StoreBranding"] = Model.StoreBranding; ViewData["StoreBranding"] = Model.StoreBranding;
Csp.UnsafeEval(); Csp.UnsafeEval();
var hasPaymentPlugins = UiExtensions.Any(extension => extension.Location == "checkout-payment-method"); var hasPaymentPlugins = UiExtensions.Any(extension => extension.Location == "checkout-payment-method");
var displayedPaymentMethods = Model.AvailablePaymentMethods.Where(c => c.Displayed).ToList(); var checkoutLink = Url.Action("Checkout", new { invoiceId = Model.InvoiceId });
} }
@functions { @functions {
private string ToJsValue(object value) private string ToJsValue(object value)
@ -90,24 +90,20 @@
:show-recommended-fee="showRecommendedFee" :show-recommended-fee="showRecommendedFee"
class="pb-4" /> class="pb-4" />
</div> </div>
@if (displayedPaymentMethods.Count > 1 || hasPaymentPlugins) <div v-if="displayedPaymentMethods.length > 1 || @Safe.Json(hasPaymentPlugins)" class="mt-3 mb-2">
{ <h6 class="text-center mb-3" v-t="'pay_with'"></h6>
<div class="mt-3 mb-2"> <div class="btcpay-pills d-flex flex-wrap align-items-center justify-content-center gap-2 pb-2">
<h6 class="text-center mb-3" v-t="'pay_with'"></h6> <a
<div class="btcpay-pills d-flex flex-wrap align-items-center justify-content-center gap-2 pb-2"> v-for="crypto in displayedPaymentMethods"
@foreach (var crypto in displayedPaymentMethods) :href="@ToJsValue(checkoutLink) + '/' + crypto.paymentMethodId"
{ class="btcpay-pill m-0 payment-method"
<a asp-action="Checkout" asp-route-invoiceId="@Model.InvoiceId" asp-route-paymentMethodId="@crypto.PaymentMethodId" :class="{ active: srvModel.paymentMethodId === crypto.paymentMethodId }"
class="btcpay-pill m-0 payment-method" v-on:click.prevent="changePaymentMethod(crypto.paymentMethodId)"
:class="{ active: pmId === @ToJsValue(crypto.PaymentMethodId) }" v-text="crypto.paymentMethodName">
v-on:click.prevent="changePaymentMethod(@ToJsValue(crypto.PaymentMethodId))"> </a>
@crypto.PaymentMethodName
</a>
}
@await Component.InvokeAsync("UiExtensionPoint", new { location = "checkout-payment-method", model = Model })
</div>
</div> </div>
} @await Component.InvokeAsync("UiExtensionPoint", new { location = "checkout-payment-method", model = Model })
</div>
<component v-if="paymentMethodComponent" :is="paymentMethodComponent" <component v-if="paymentMethodComponent" :is="paymentMethodComponent"
:model="srvModel" :model="srvModel"
:nfc-scanning="nfc.scanning" :nfc-scanning="nfc.scanning"

3
BTCPayServer/wwwroot/checkout/checkout.js
View File

@ -185,6 +185,9 @@ function initApp() {
}, },
realPaymentMethodCurrency () { realPaymentMethodCurrency () {
return this.srvModel.paymentMethodCurrency.toLowerCase() === 'sats' ? 'BTC' : this.srvModel.paymentMethodCurrency; return this.srvModel.paymentMethodCurrency.toLowerCase() === 'sats' ? 'BTC' : this.srvModel.paymentMethodCurrency;
},
displayedPaymentMethods: function () {
return this.srvModel?.availablePaymentMethods?.filter(pm => pm.displayed) ?? [];
} }
}, },
watch: { watch: {