btcpayserver/BTCPayServer/Views/UIStores/ModifyWebhook.cshtml

@model EditWebhookViewModel
@using  BTCPayServer.Client.Models;
@{
    Layout = "../Shared/_NavLayout.cshtml";
    ViewData.SetActivePage(StoreNavPages.Webhooks, "Webhook Settings", Context.GetStoreData().Id);
}

@section PageHeadContent {
    <style>
        #event-selector { display: none; }
        #Everything[data-value='false'] + #event-selector { display: block; }
    </style>
}

<div class="row">
    <div class="col-xxl-constrain col-xl-8">
        <form method="post">
            <h3 class="mb-3">@ViewData["Title"]</h3>
            <div class="form-group">
                <label asp-for="PayloadUrl" class="form-label">Payload URL</label>
                <input asp-for="PayloadUrl" class="form-control" />
                <span asp-validation-for="PayloadUrl" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Secret" class="form-label"></label>
                <div class="input-group">
                    <input asp-for="Secret" type="password" class="form-control" value="@Model.Secret" data-toggle="password">
                    <span class="input-group-text">
                        <i class="fa fa-eye"></i>
                    </span>
                </div>
                <div class="form-text">The endpoint receiving the payload must validate the payload by checking that the HTTP header <code>BTCPAY-SIG</code> of the callback matches the HMAC256 of the secret on the payload's body bytes.</div>
            </div>
            <div class="form-group">
                <label class="form-group d-flex align-items-center">
                    <input asp-for="AutomaticRedelivery" type="checkbox" class="btcpay-toggle me-3" />
                    <div>
                        <span>Automatic redelivery</span>
                        <div class="form-text">We will try to redeliver any failed delivery after 10 seconds, 1 minute and up to 6 times after 10 minutes</div>
                    </div>
                </label>
            </div>
            <div class="form-group">
                <label class="d-flex align-items-center mb-2">
                    <input asp-for="Active" type="checkbox" class="btcpay-toggle me-3" />
                    <span>Enabled</span>
                </label>
            </div>

            <h3 class="mb-3 mt-5">Events</h3>
            <label asp-for="Everything" class="form-label">Which events would you like to trigger this webhook?</label>
            <select asp-for="Everything" class="form-select w-auto mb-3">
                <option value="true">Send me everything</option>
                <option value="false">Send specific events</option>
            </select>
            <div id="event-selector" class="collapse">
                <div class="pb-3">
                    @foreach (var evt in new[]
                  {
                        ("A new invoice has been created", WebhookEventType.InvoiceCreated),
                        ("A new payment has been received", WebhookEventType.InvoiceReceivedPayment),
                        ("A payment has been settled", WebhookEventType.InvoicePaymentSettled),
                        ("An invoice is processing", WebhookEventType.InvoiceProcessing),
                        ("An invoice has expired", WebhookEventType.InvoiceExpired),
                        ("An invoice has been settled", WebhookEventType.InvoiceSettled),
                        ("An invoice became invalid", WebhookEventType.InvoiceInvalid)
                    })
                    {
                        <div class="form-check my-1">
                            <input name="Events" id="@evt.Item2" value="@evt.Item2" @(Model.Events.Contains(evt.Item2) ? "checked" : "") type="checkbox" class="form-check-input" />
                            <label for="@evt.Item2" class="form-check-label">@evt.Item1</label>
                        </div>
                    }
                </div>
            </div>
            @if (Model.IsNew)
            {
                <button name="add" type="submit" class="btn btn-primary mb-5 mt-2" value="New" id="New">Add webhook</button>
            }
            else
            {
                <button name="update" type="submit" class="btn btn-primary mb-5 mt-2" value="Save" id="Save">Update webhook</button>
            }
        </form>
        @if (!Model.IsNew && Model.Deliveries.Count > 0)
        {
            <h4 class="mb-3">Recent deliveries</h4>
            <ul class="list-group">
                @foreach (var delivery in Model.Deliveries)
                {
                    <li class="list-group-item ">
                        <form asp-action="RedeliverWebhook"
                              asp-route-storeId="@this.Context.GetRouteValue("storeId")"
                              asp-route-webhookId="@this.Context.GetRouteValue("webhookId")"
                              asp-route-deliveryId="@delivery.Id"
                              method="post">
                            <div class="d-flex align-items-center">
                                <span class="d-flex align-items-center flex-fill me-3">
                                    @if (delivery.Success)
                                    {
                                        <span class="d-flex align-items-center fa fa-check text-success" title="Success"></span>
                                    }
                                    else
                                    {
                                        <span class="d-flex align-items-center fa fa-times text-danger" title="@delivery.ErrorMessage"></span>
                                    }
                                    <span class="ms-3">
                                        <a asp-action="WebhookDelivery"
                                           asp-route-storeId="@this.Context.GetRouteValue("storeId")"
                                           asp-route-webhookId="@this.Context.GetRouteValue("webhookId")"
                                           asp-route-deliveryId="@delivery.Id"
                                           class="btn btn-link delivery-content" target="_blank">
                                            @delivery.Id
                                        </a>
                                    </span>
                                </span>
                                <span class="d-flex align-items-center">
                                    <strong class="d-flex align-items-center text-muted small">
                                        @delivery.Time.ToBrowserDate()
                                    </strong>

                                    <button id="#redeliver-@delivery.Id"
                                            type="submit"
                                            class="btn btn-info py-1 ms-3 redeliver">
                                        Redeliver
                                    </button>
                                </span>
                            </div>
                        </form>
                    </li>
                }
            </ul>
        }
    </div>
</div>

@section PageFootContent {
    <partial name="_ValidationScriptsPartial" />
    <script>
        delegate('change', '#Everything', function (e) {
            e.target.dataset.value = e.target.value;
        });

        document.querySelector('#Everything').dataset.value = @Html.Raw(Json.Serialize(Model.Everything));
    </script>
}