btcpayserver/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml

@using BTCPayServer.Abstractions.Extensions
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using BTCPayServer.Abstractions.TagHelpers
<template id="lnurl-withdraw-template">
    <button v-if="v2" class="btn btn-secondary rounded-pill w-100 mt-4" type="button" 
            v-on:click="startScan" 
            v-bind:disabled="scanning || submitting" 
            v-bind:class="{ 'loading': scanning || submitting, 'text-secondary': !supported }">{{btnText}}</button>

    <bp-loading-button v-else>
        <button v-on:click="startScan"  style="margin-top: 15px;" v-bind:disabled="scanning || submitting"
                v-bind:class="{ 'loading': scanning || submitting, 'action-button': supported, 'btn btn-text w-100': !supported  }">
            <span class="button-text">{{btnText}}</span>
            <div class="loader-wrapper">
                <partial name="Checkout-Spinner" />
            </div>
        </button>
    </bp-loading-button>
</template>
<script type="text/javascript">
Vue.component("lnurl-withdraw-checkout", {
    template: "#lnurl-withdraw-template",
    computed: {
        v2: function() {
          return !!this.$parent.model;
        },
        topup: function (){
           return (this.$parent.srvModel || this.$parent.model).isUnsetTopUp;
        },
        destination: function (){
            return (this.$parent.srvModel || this.$parent.model).invoiceId;
        },
        btnText: function (){
            return this.supported? "Pay by NFC & LNURL-Withdraw" : "Pay by LNURL-Withdraw";
        }
    },
    data: function () {
        return {
            url : @Safe.Json(Context.Request.GetAbsoluteUri(Url.Action("SubmitLNURLWithdrawForInvoice", "NFC"))),
            supported: ('NDEFReader' in window && window.self === window.top),
            scanning: false,
            submitting: false,
            readerAbortController: null,
            amount: 0
        }
    },
    methods: {
        startScan: async function () {
            try {
                if (this.scanning || this.submitting) {
                    return;
                }
                if (this.topup) {
                    const amountStr = prompt("How many sats do you want to pay?")
                    if (amountStr){
                        try {
                            this.amount = parseInt(amountStr)
                        } catch {
                            alert("Please provide a valid number amount in sats");
                        }
                    }else{
                        return;    
                    }
                }
                
                const self = this;
                self.submitting = false;
                self.scanning = true;
                if (!this.supported) {
                    const result = prompt("Enter LNURL withdraw");
                    if (result) {
                        self.sendData.bind(self)(result);
                        return;
                    }
                    self.scanning = false;
                }
                ndef = new NDEFReader()
                self.readerAbortController = new AbortController()
                await ndef.scan({signal: self.readerAbortController.signal})

                ndef.addEventListener('readingerror', () => {
                    self.scanning = false;
                    self.readerAbortController.abort()
                })

                ndef.addEventListener('reading', ({message, serialNumber}) => {
                    //Decode NDEF data from tag
                    const record = message.records[0]
                    const textDecoder = new TextDecoder('utf-8')
                    const lnurl = textDecoder.decode(record.data)

                    //User feedback, show loader icon
                    self.scanning = false;
                    self.sendData.bind(self)(lnurl);

                })
            } catch(e) {
                self.scanning = false;
                self.submitting = false;
            }
        },
        sendData: function (lnurl) {

            this.submitting = true;
            //Post LNURLW data to server
            var xhr = new XMLHttpRequest()
            xhr.open('POST', this.url, true)
            xhr.setRequestHeader('Content-Type', 'application/json')
            xhr.send(JSON.stringify({lnurl, invoiceId: this.destination, amount: this.amount}))
            const self = this;
            //User feedback, reset on failure
            xhr.onload = function () {
                if (xhr.readyState === xhr.DONE) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                    self.scanning = false;
                    self.submitting = false;

                    if(self.readerAbortController) {
                        self.readerAbortController.abort()
                    }

                    if(xhr.response){
                        alert(xhr.response)
                    }
                }
            }
        }
    }
});


</script>