btcpayserver/BTCPayServer/Views/Invoice/Checkout-Testing.cshtml

@model PaymentModel

<div id="testing">
    <hr class="my-3" />
    <p class="alert alert-danger" style="display: none; word-break: break-all;"></p>
    <p class="alert alert-success" style="display: none; word-break: break-all;"></p>
    <form id="test-payment" action="/i/@Model.InvoiceId/test-payment" method="post" class="form-inline my-2">
        <input name="CryptoCode" type="hidden" value="@Model.CryptoCode">
        <div class="form-group mb-1">
            <label for="test-payment-amount" class="control-label">{{$t("Fake a @Model.CryptoCode payment for testing")}}</label>
            <div class="input-group">
                <input id="test-payment-amount" name="Amount" type="number" step="0.00000001" min="0" class="form-control" placeholder="Amount" value="@Model.BtcDue" />
                <div id="test-payment-crypto-code" class="input-group-addon">@Model.CryptoCode</div>
            </div>
        </div>
        <button class="btn btn-primary" type="submit">{{$t("Fake Payment")}}</button>
        <p class="text-muted mt-1">{{$t("This is the same as running bitcoin-cli.sh sendtoaddress xxx")}}</p>
    </form>
    <form id="expire-invoice" action="/i/@Model.InvoiceId/expire" method="post" class="mb-1">
        <button class="btn btn-secondary" type="submit">{{$t("Expire Invoice Now")}}</button>
    </form>
    @* TODO
    <form id="expire-monitoring" action="/i/@Model.InvoiceId/expire-monitoring" method="post" class="mb-1">
        <!-- TODO only show when expired -->
        <button class="btn btn-secondary" type="submit">{{$t("Expire Monitoring Now")}} (TODO)</button>
    </form>
    <form id="mine-block" action="/i/@Model.InvoiceId/mine-block" method="post">
        <!-- TODO only show when BTC On-chain -->
        <!-- TODO to make it work use Bitcoin RPC calls getnewaddress + generatetoaddress -->
        <button class="btn btn-secondary" type="submit">{{$t("Mine a block now")}} (TODO)</button>
    </form>
    *@
</div>

<script type="text/javascript">
    $(document).ready(function() {
        const payForm = $('form#test-payment');
        const loader = $('form#test-payment-loading');
        const inputField = $('#test-payment-amount');
        const successAlert = $('#testing p.alert-success');
        const errorAlert = $('#testing p.alert-danger');
        const submitButton = payForm.find('button[type=submit]');
        const expireForm = $('form#expire-invoice');
        const expireButton = expireForm.find('[type=submit]');
        
        payForm.submit(e => {
             e.preventDefault();
             
             const form = $(e.target);
             const url = form.attr('action');
             const data = form.serialize();
             
             successAlert.hide();
             errorAlert.hide();
             loader.show();
             inputField.prop('disabled', true);
             submitButton.prop('disabled', true);
             
             $.post({
                 url,
                 data,
                 success(data) {
                     const { successMessage, amountRemaining } = data;
                     successAlert.html(successMessage);
                     successAlert.show();
                     if (amountRemaining > 0) {
                         inputField.val(amountRemaining);
                     } else {
                         form.hide();
                         expireForm.hide();
                     }
                 },
                 error(xhr) {
                     const { errorMessage } = JSON.parse(xhr.responseText);
                     errorAlert.html(errorMessage).show();
                 },
                 complete() {
                     loader.hide();
                     inputField.prop('disabled', false);
                     submitButton.prop('disabled', false);
                 }
             });
         });
        
        // Expire invoice form
        expireForm.submit(e => {
            e.preventDefault();
            successAlert.hide();
            errorAlert.hide();
                         
            $.post({
                url: expireForm.attr('action'),
                success(data) {
                    const { successMessage } = data;
                    successAlert.html(successMessage).show();
                    expireButton.hide();
                },
                complete() {
                    loader.hide();
                    submitButton.prop('disabled', false);
                },
                error(xhr) {
                    const { errorMessage } = JSON.parse(xhr.responseText);
                    errorAlert.html(errorMessage).show();
                }
            });
        });
    });
</script>