btcpayserver/BTCPayServer/Views/Apps/ViewPayButton.cshtml

@model PayButtonViewModel
@{
    ViewData["Title"] = "Pay Button";
}

<section>
    <div class="container" id="payButtonCtrl">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">@ViewData["Title"]</h2>
                <hr class="primary">
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-lg-6">
                <div class="form-row">
                    <div class="form-group col-md-8">
                        <label>Price</label>
                        <input name="price" type="text" class="form-control"
                               v-model="srvModel.price" v-on:change="inputChanges"
                               v-validate="'required|decimal|min_value:0'" :class="{'is-invalid': errors.has('price') }">
                        <small class="text-danger">{{ errors.first('price') }}</small>
                    </div>
                    <div class="form-group col-md-4">
                        <label>&nbsp;</label>
                        <select class="form-control" v-model="srvModel.currency" v-on:change="inputChanges">
                            @foreach (var item in Model.CurrencyDropdown)
                            {
                                <option>@item</option>
                            }
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Checkout Description</label>
                    <input name="checkoutDesc" type="text" class="form-control" placeholder="(optional)"
                           v-model="srvModel.checkoutDesc" v-on:change="inputChanges">
                </div>
                <div class="form-group">
                    <label>Order Id</label>
                    <input name="orderId" type="text" class="form-control" id="inputAddress" placeholder="(optional)"
                           v-model="srvModel.orderId" v-on:change="inputChanges">
                </div>
                <div class="form-group">
                    <label>Pay Button Image Url</label>
                    <input name="payButtonImageUrl" type="text" class="form-control" id="inputAddress"
                           v-model="srvModel.payButtonImageUrl" v-on:change="inputChanges"
                           v-validate="'required|url'" :class="{'is-invalid': errors.has('payButtonImageUrl') }">
                    <small class="text-danger">{{ errors.first('payButtonImageUrl') }}</small>
                </div>
                <div class="form-group">
                    <label>Button Size</label>
                    <div style="vertical-align:top; font-size:12px; display:flex;">
                        <button class="btn" style="width:95px;height:40px;margin-right:40px;"
                                v-on:click="inputChanges($event, 0)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 0) }">
                            146 x 40 px
                        </button>
                        <button class="btn btn-default" style="width:126px;height:46px;margin-right:40px;"
                                v-on:click="inputChanges($event, 1)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 1) }">
                            168 x 46 px
                        </button>
                        <button class="btn btn-default" style="width:146px;height:57px;"
                                v-on:click="inputChanges($event, 2)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 2) }">
                            209 x 57 px
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <br />
                Define parameters that define the purchase: price, currency and then optional description of purchase.
                <br /><br />
                Generated HTML will be displayed at the bottom of this page and all you need is to paste that HTML into your final page.
                Clicking on the button will redirect customer to checkout.
            </div>
        </div>
        <hr />
        <h3>Payment Notifications</h3>
        <br />
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Server IPN</label>
                    <input name="serverIpn" type="text" class="form-control" placeholder="(optional)"
                           v-model="srvModel.serverIpn" v-on:change="inputChanges"
                           v-validate="'email'" :class="{'is-invalid': errors.has('serverIpn') }">
                    <small class="text-danger">{{ errors.first('serverIpn') }}</small>
                </div>
                <div class="form-group">
                    <label>Send Email Notifications to</label>
                    <input name="notifyEmail" type="text" class="form-control" placeholder="(optional)"
                           v-model="srvModel.notifyEmail" v-on:change="inputChanges"
                           v-validate="'email'" :class="{'is-invalid': errors.has('notifyEmail') }">
                    <small class="text-danger">{{ errors.first('notifyEmail') }}</small>

                </div>
                <div class="form-group">
                    <label>Browser Redirect</label>
                    <input name="browserRedirect" type="text" class="form-control" placeholder="(optional)"
                           v-model="srvModel.browserRedirect" v-on:change="inputChanges"
                           v-validate="'url'" :class="{'is-invalid': errors.has('browserRedirect') }">
                    <small class="text-danger">{{ errors.first('browserRedirect') }}</small>
                </div>
            </div>
            <div class="col-lg-6">
                <br />
                These parameters allow you to influence process after purchase. <i>Server IPN</i> is location we'll query with details.
                We can also deliver email notification to specified addres.
                <br /><br />
                Finally <i>Browser Redirect</i> defines where BtcPayServer will redirect customer after puchase is completed.
            </div>
        </div>
        <hr />
        <h3>Generated code</h3>
        <div class="row" v-show="!errors.any()">
            <div class="col-lg-8">
                <pre><code id="mainCode" class="html"></code></pre>
                <button class="btn btn-primary" id="copyCode">
                    <i class="fa fa-copy"></i> Copy Code
                </button>
                <span class="copyLabelPopup" style="display:none;">Copied</span>
            </div>
            <div class="col-lg-4">
                <img id="previewButton" src="~/img/paywithbtcpay.png" />
            </div>
        </div>
        <div class="row" v-show="errors.any()">
            <div class="col-lg-12 text-danger">
                Please fix errors shown in order for code generation to successfully execute.
            </div>
        </div>
        <br />
    </div>
</section>


@section Scripts {
    <link rel="stylesheet" href="~/vendor/highlightjs/default.min.css">
    <script src="~/vendor/highlightjs/highlight.min.js"></script>

    <script src="~/vendor/vuejs/vue.js"></script>
    <!-- jsdelivr cdn -->
    <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

    <script src="~/vendor/clipboard.js/clipboard.js"></script>

    <script type="text/javascript">
        var srvModel = @Html.Raw(Json.Serialize(Model));
        Vue.use(VeeValidate);
        const dictionary = {
            en: {
                attributes: {
                    price: 'Price', checkoutDesc: 'Checkout Description', orderId: 'Order Id',
                    serverIpn: 'Server IPN', notifyEmail: 'Send Email Notifications', browserRedirect: 'Browser Redirect',
                    payButtonImageUrl: "Pay Button Image Url"
                }
            }
        };
        VeeValidate.Validator.localize(dictionary);
        var payButtonCtrl = new Vue({
            el: '#payButtonCtrl',
            data: {
                srvModel: srvModel
            },
            methods: {
                inputChanges: function (event, buttonSize) {
                    inputChanges(event, buttonSize);
                }
            }
        });

        function inputChanges(event, buttonSize) {
            if (buttonSize != null) {
                srvModel.buttonSize = buttonSize;
            }

            var html = '&lt;form method="POST" action="' + srvModel.urlRoot + '/apps/3jVExUHqRkGi4eaJEFCTxw5zjk14VAFzoVZXZJ3fbwED/pay"&gt;';
            html += addinput("price", srvModel.price);
            if (srvModel.currency) {
                html += addinput("currency", srvModel.currency);
            }
            if (srvModel.checkoutDesc) {
                html += addinput("checkoutDesc", srvModel.checkoutDesc);
            }
            if (srvModel.orderId) {
                html += addinput("orderId", srvModel.orderId);
            }

            if (srvModel.serverIpn) {
                html += addinput("serverIpn", srvModel.serverIpn);
            }
            if (srvModel.browserRedirect) {
                html += addinput("browserRedirect", srvModel.browserRedirect);
            }
            if (srvModel.notifyEmail) {
                html += addinput("notifyEmail", srvModel.notifyEmail);
            }

            var width = "209px";
            if (srvModel.buttonSize == 0) {
                width = "146px";
            } else if (srvModel.buttonSize == 1) {
                width = "168px";
            } else if (srvModel.buttonSize == 2) {
                width = "209px";
            }
            html += '\n    &lt;input type="image" src="' + srvModel.payButtonImageUrl + '" name="submit" style="width:' + width +
                '" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor"&gt;';

            html += '\n&lt;/form&gt;';

            $("#mainCode").html(html);

            $('pre code').each(function (i, block) {
                hljs.highlightBlock(block);
            });

            $("#previewButton").css("width", width);
            $("#previewButton").attr("src", srvModel.payButtonImageUrl);

            return html;
        }

        function addinput(name, value) {
            var html = '\n    &lt;input type="hidden" name="' + name + '" value="' + value + '" /&gt;';
            return html;
        }

        $(function () {
            inputChanges();
        });

        String.prototype.replaceAll = function (search, replacement) {
            var target = this;
            return target.replace(new RegExp(search, 'g'), replacement);
        };

        // Clipboard Copy
        new Clipboard('#copyCode', {
            text: function (trigger) {
                $(".copyLabelPopup").show().delay(1000).fadeOut(500);
                return inputChanges().replaceAll("&lt;", "<").replaceAll("&gt;", ">");
            }
        });
    </script>
}