mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-24 06:47:50 +01:00
213 lines
12 KiB
Text
213 lines
12 KiB
Text
@using BTCPayServer.Payments
|
|
@using Microsoft.AspNetCore.Mvc.TagHelpers
|
|
@using BTCPayServer.Services.Stores
|
|
@model CheckoutAppearanceViewModel
|
|
@{
|
|
Layout = "../Shared/_NavLayout.cshtml";
|
|
ViewData.SetActivePage(StoreNavPages.CheckoutAppearance, "Checkout experience", Context.GetStoreData().Id);
|
|
|
|
var store = ViewContext.HttpContext.GetStoreData();
|
|
}
|
|
@section PageFootContent {
|
|
<partial name="_ValidationScriptsPartial" />
|
|
<script>
|
|
delegate('click', '.setTheme', e => {
|
|
e.preventDefault();
|
|
const { theme } = e.target.dataset;
|
|
document.getElementById('CustomCSS').value = ['dark', 'legacy'].includes(theme)
|
|
? `/checkout/css/themes/${theme}.css`
|
|
: ''
|
|
});
|
|
delegate('click', '#Presets_InStore', e => {
|
|
$("#UseNewCheckout").prop('checked', true);
|
|
$("#NewCheckoutSettings").addClass('show');
|
|
$("#ShowPayInWalletButton").prop('checked', false);
|
|
$("#ShowStoreHeader").prop('checked', false);
|
|
});
|
|
delegate('click', '#Presets_Online', e => {
|
|
$("#UseNewCheckout").prop('checked', false);
|
|
$("#NewCheckoutSettings").removeClass('show');
|
|
$("#ShowPayInWalletButton").prop('checked', true);
|
|
$("#ShowStoreHeader").prop('checked', true);
|
|
});
|
|
</script>
|
|
}
|
|
|
|
<div class="row">
|
|
<div class="col-xxl-constrain col-xl-8">
|
|
<form method="post">
|
|
@if (!ViewContext.ModelState.IsValid)
|
|
{
|
|
<div asp-validation-summary="All" class="text-danger"></div>
|
|
}
|
|
<h3 class="mb-3">Invoice Settings</h3>
|
|
@if (Model.PaymentMethods.Any())
|
|
{
|
|
<div class="form-group mb-4">
|
|
<label asp-for="DefaultPaymentMethod" class="form-label"></label>
|
|
<select asp-for="DefaultPaymentMethod" asp-items="Model.PaymentMethods" class="form-select w-auto"></select>
|
|
</div>
|
|
<div class="form-group mb-4">
|
|
<div class="form-label mb-1">Enable payment methods only when amount is …</div>
|
|
<table class="table table-sm mt-0 mx-0">
|
|
@for (var index = 0; index < Model.PaymentMethodCriteria.Count; index++)
|
|
{
|
|
var criteria = Model.PaymentMethodCriteria[index];
|
|
<tr>
|
|
<td class="border-0 ps-0 align-middle">
|
|
<input type="hidden" asp-for="PaymentMethodCriteria[index].PaymentMethod" />
|
|
@PaymentMethodId.Parse(criteria.PaymentMethod).ToPrettyString()
|
|
</td>
|
|
<td class="border-0">
|
|
<select asp-for="PaymentMethodCriteria[index].Type" class="form-select"
|
|
asp-items="@((PaymentMethodCriteriaViewModel.CriteriaType[]) Enum.GetValues(typeof(PaymentMethodCriteriaViewModel.CriteriaType))).Select(s => new SelectListItem(PaymentMethodCriteriaViewModel.ToString(s), s.ToString()))">
|
|
</select>
|
|
</td>
|
|
<td class="border-0">
|
|
<input placeholder="6.15 USD" asp-for="PaymentMethodCriteria[index].Value" class="form-control my-0" style="max-width: 20ch;" />
|
|
</td>
|
|
</tr>
|
|
}
|
|
</table>
|
|
</div>
|
|
}
|
|
|
|
<h3 class="mt-5 mb-3 d-flex gap-3 align-items-center">
|
|
<span>Checkout</span>
|
|
<div id="Presets" name="Presets" class="dropdown">
|
|
<button class="btn btn-secondary dropdown-toggle btn-sm px-3" type="button" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Select a preset
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="ActionsDropdownToggle">
|
|
<div id="Presets_Online" class="btcpay-list-select-item dropdown-item">
|
|
<vc:icon symbol="pos-cart" />
|
|
<span>Online</span>
|
|
<span class="note">Enhance the checkout process for online purchases.<br />This assume the payment page will be displayed on the customer's device.</span>
|
|
</div>
|
|
<div id="Presets_InStore" class="btcpay-list-select-item dropdown-item">
|
|
<vc:icon symbol="store" />
|
|
<span>In-store</span>
|
|
<span class="note">Enhance the checkout process for in-store purchases.<br />This assume the payment page will be displayed on the merchant's device.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h3>
|
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
<input asp-for="UseNewCheckout" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target=".checkout-settings" aria-expanded="@(Model.UseNewCheckout)" aria-controls="NewCheckoutSettings" />
|
|
<div>
|
|
<label asp-for="UseNewCheckout" class="d-flex align-items-center form-label">
|
|
Use the new checkout
|
|
<span class="badge bg-warning ms-2">Experimental</span>
|
|
</label>
|
|
<span asp-validation-for="UseNewCheckout" class="text-danger"></span>
|
|
<div class="form-text">
|
|
Since v1.7.0 a new version of the checkout is available. Note: For now, the new version is English-only.<br />
|
|
We are still collecting <a href="https://github.com/btcpayserver/btcpayserver/discussions/4308" target="_blank" rel="noreferrer noopener">feedback</a> and offer this as an opt-in feature.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="checkout-settings collapse @(Model.UseNewCheckout ? "show" : "")" id="NewCheckoutSettings">
|
|
<div class="form-group">
|
|
<label asp-for="DisplayExpirationTimer" class="form-label"></label>
|
|
<div class="input-group">
|
|
<input inputmode="numeric" asp-for="DisplayExpirationTimer" class="form-control" style="max-width:10ch;" />
|
|
<span class="input-group-text">minutes</span>
|
|
</div>
|
|
<span asp-validation-for="DisplayExpirationTimer" class="text-danger"></span>
|
|
</div>
|
|
<div class="form-check">
|
|
<input asp-for="CelebratePayment" type="checkbox" class="form-check-input" />
|
|
<label asp-for="CelebratePayment" class="form-check-label"></label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input asp-for="ShowStoreHeader" type="checkbox" class="form-check-input" />
|
|
<label asp-for="ShowStoreHeader" class="form-check-label"></label>
|
|
</div>
|
|
</div>
|
|
<div class="form-check">
|
|
<input asp-for="ShowPayInWalletButton" type="checkbox" class="form-check-input" />
|
|
<label asp-for="ShowPayInWalletButton" class="form-check-label"></label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input asp-for="OnChainWithLnInvoiceFallback" type="checkbox" class="form-check-input" />
|
|
<label asp-for="OnChainWithLnInvoiceFallback" class="form-check-label"></label>
|
|
<a href="https://bitcoinqr.dev/" target="_blank" rel="noreferrer noopener">
|
|
<vc:icon symbol="info" />
|
|
</a>
|
|
</div>
|
|
<div class="form-check">
|
|
<input asp-for="LightningAmountInSatoshi" type="checkbox" class="form-check-input" />
|
|
<label asp-for="LightningAmountInSatoshi" class="form-check-label"></label>
|
|
</div>
|
|
<div class="checkout-settings collapse @(Model.UseNewCheckout ? "" : "show")" id="OldCheckoutSettings">
|
|
<div class="form-check">
|
|
<input asp-for="RequiresRefundEmail" type="checkbox" class="form-check-input" />
|
|
<label asp-for="RequiresRefundEmail" class="form-check-label"></label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="CustomLogo" class="form-label"></label>
|
|
<a href="https://docs.btcpayserver.org/Development/Theme/#checkout-page-themes" target="_blank" rel="noreferrer noopener">
|
|
<vc:icon symbol="info" />
|
|
</a>
|
|
<input asp-for="CustomLogo" class="form-control" />
|
|
<span asp-validation-for="CustomLogo" class="text-danger"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="CustomCSS" class="form-label"></label>
|
|
<a href="https://docs.btcpayserver.org/Development/Theme/#checkout-page-themes" target="_blank" rel="noreferrer noopener">
|
|
<vc:icon symbol="info" />
|
|
</a>
|
|
<input asp-for="CustomCSS" class="form-control" />
|
|
<span asp-validation-for="CustomCSS" class="text-danger"></span>
|
|
<div class="form-text">
|
|
Bundled Themes:
|
|
<a href="#" class="setTheme" data-theme="default">Default</a> |
|
|
<a href="#" class="setTheme" data-theme="dark">Dark</a> |
|
|
<a href="#" class="setTheme" data-theme="legacy">Legacy</a>
|
|
</div>
|
|
@await Component.InvokeAsync("UiExtensionPoint", new {location = "invoice-checkout-theme-options", model = Model})
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="form-check">
|
|
<input asp-for="AutoDetectLanguage" type="checkbox" class="form-check-input" />
|
|
<label asp-for="AutoDetectLanguage" class="form-check-label"></label>
|
|
<div class="form-text">Detects the language of the customer's browser with 99.9% accuracy.</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="DefaultLang" class="form-label"></label>
|
|
<select asp-for="DefaultLang" asp-items="Model.Languages" class="form-select w-auto"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="HtmlTitle" class="form-label"></label>
|
|
<input asp-for="HtmlTitle" class="form-control" />
|
|
<span asp-validation-for="HtmlTitle" class="text-danger"></span>
|
|
</div>
|
|
<div class="form-check my-3">
|
|
<input asp-for="LazyPaymentMethods" type="checkbox" class="form-check-input" />
|
|
<label asp-for="LazyPaymentMethods" class="form-check-label"></label>
|
|
</div>
|
|
<div class="form-check my-3">
|
|
<input asp-for="RedirectAutomatically" type="checkbox" class="form-check-input" />
|
|
<label asp-for="RedirectAutomatically" class="form-check-label"></label>
|
|
</div>
|
|
<h3 class="mt-5 mb-3">Public receipt</h3>
|
|
<div class="form-check my-3">
|
|
<input asp-for="ReceiptOptions.Enabled" type="checkbox" class="form-check-input" />
|
|
<label asp-for="ReceiptOptions.Enabled" class="form-check-label"></label>
|
|
</div>
|
|
<div class="form-check my-3">
|
|
<input asp-for="ReceiptOptions.ShowPayments" type="checkbox" class="form-check-input" />
|
|
<label asp-for="ReceiptOptions.ShowPayments" class="form-check-label"></label>
|
|
</div>
|
|
<div class="form-check my-3">
|
|
<input asp-for="ReceiptOptions.ShowQR" type="checkbox" class="form-check-input" />
|
|
<label asp-for="ReceiptOptions.ShowQR" class="form-check-label"></label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary mt-4" id="Save">Save</button>
|
|
</form>
|
|
</div>
|
|
</div>
|