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

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

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

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

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