btcpayserver/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml

@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`
                : ''
        });
    </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">Checkout</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-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">
                        <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
                    </a>
                </div>
                <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>
                            
            <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">
                    <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="CustomLogo" class="form-label"></label>
                    <a href="https://docs.btcpayserver.org/Development/Theme/#checkout-page-themes" target="_blank" rel="noreferrer noopener">
                        <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
                    </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">
                        <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
                    </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">
                <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>