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

@using BTCPayServer.Abstractions.Extensions
@using BTCPayServer.Abstractions.TagHelpers
<template id="lnurl-withdraw-template">
    <template v-if="display">
        <div class="mt-4">
            <p id="CheatSuccessMessage" class="alert alert-success text-break" v-if="successMessage" v-text="successMessage"></p>
            <p id="CheatErrorMessage" class="alert alert-danger text-break" v-if="errorMessage" v-text="errorMessage"></p>
            <template v-if="isV2">
                <button class="btn btn-secondary rounded-pill w-100" type="button" id="PayByNFC"
                    :disabled="scanning || submitting" v-on:click="handleClick">{{btnText}}</button>
            </template>
            <bp-loading-button v-else>
                <button class="action-button" style="margin: 0 45px;width:calc(100% - 90px) !important" :disabled="scanning || submitting" v-on:click="handleClick" id="PayByNFC"
                        :class="{ 'loading': scanning || submitting, 'action-button': supported, 'btn btn-text w-100': !supported  }">
                    <span class="button-text">{{btnText}}</span>
                    <div class="loader-wrapper">
                        @await Html.PartialAsync("~/Views/UIInvoice/Checkout-Spinner.cshtml")
                    </div>
                </button>
            </bp-loading-button>
        </div>
    </template>
</template>
<script>
class NDEFReaderWrapper {
    constructor() {
        this.onreading = null;
        this.onreadingerror = null;
    }

    async scan(opts) {
        if (opts && opts.signal){
            opts.signal.addEventListener('abort', () => {
                window.parent.postMessage('nfc:abort', '*');
            });
        }
        window.parent.postMessage('nfc:startScan', '*');
    }
}

Vue.component("lnurl-withdraw-checkout", {
    template: "#lnurl-withdraw-template",
    props: {
        model: Object,
        isV2: Boolean
    },
    computed: {
        display () {
            const {
                onChainWithLnInvoiceFallback: isUnified,
                paymentMethodId: activePaymentMethodId,
                availableCryptos: availablePaymentMethods,
                invoiceBitcoinUrl: paymentUrl
            } = this.model
            const lnurlwAvailable = 
                // Either we have LN or LNURL available directly
                !!availablePaymentMethods.find(pm => ['BTC_LNURLPAY', 'BTC_LightningLike'].includes(pm.paymentMethodId)) ||
                // Or the BIP21 payment URL flags Lightning support
                !!paymentUrl.match(/lightning=ln/i)
            const isAvailable = activePaymentMethodId === 'BTC_LNURLPAY' || (
                // Unified QR/BIP21 case
                (activePaymentMethodId === 'BTC' && isUnified && lnurlwAvailable) ||
                // Lightning with LNURL available
                (activePaymentMethodId === 'BTC_LightningLike' && lnurlwAvailable))
            return isAvailable && (this.supported || this.testFallback)
        },
        testFallback () {
            return !this.supported && window.location.search.match('lnurlwtest=(1|true)')
        },
        btnText () {
            if (this.supported) {
                if (this.submitting) {
                    return this.isV2 ? this.$t('submitting_nfc') : 'Submitting NFC …'
                } else if (this.scanning) {
                    return this.isV2 ? this.$t('scanning_nfc') : 'Scanning NFC …'
                } else {
                    return this.isV2 ? this.$t('pay_by_nfc') : 'Pay by NFC'
                }
            } else {
                return this.isV2 ? this.$t('pay_by_lnurl') : 'Pay by LNURL-Withdraw'
            }
        }
    },
    data () {
        return {
            url: @Safe.Json(Context.Request.GetAbsoluteUri(Url.Action("SubmitLNURLWithdrawForInvoice", "NFC"))),
            supported: 'NDEFReader' in window,
            scanning: false,
            submitting: false,
            permissionGranted: false,
            readerAbortController: null,
            amount: 0,
            successMessage: null,
            errorMessage: null
        }
    },
    async mounted () {
        if (!this.supported) return;
        try {
            this.permissionGranted = navigator.permissions &&
                (await navigator.permissions.query({ name: 'nfc' })).state === 'granted'
        } catch (e) {}
        if (this.permissionGranted) {
            this.startScan()
        }
    },
    beforeDestroy () {
        if (this.readerAbortController) {
            this.readerAbortController.abort()
        }
    },
    methods: {
        async handleClick () {
            if (this.supported) {
                this.startScan()
            } else {
                if (this.model.isUnsetTopUp) {
                    this.handleUnsetTopUp()
                    if (!this.amount) {
                        return;
                    }
                }
                const lnurl = prompt("Enter LNURL-Withdraw")
                if (lnurl) {
                    await this.sendData(lnurl)
                }
            }
        },
        handleUnsetTopUp () {
            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");
                }
            }
            return false
        },
        async startScan () {
            if (this.scanning || this.submitting) {
                return;
            }
            if (this.model.isUnsetTopUp) {
                this.handleUnsetTopUp()
                if (!this.amount) {
                    return;
                }
            }
            this.submitting = false;
            this.scanning = true;
            try {
                const inModal = window.self !== window.top;
                const ndef = inModal ? new NDEFReaderWrapper() : new NDEFReader();
                this.readerAbortController = new AbortController()
                this.readerAbortController.signal.onabort = () => {
                    this.scanning = false;
                };
                
                await ndef.scan({ signal: this.readerAbortController.signal })

                ndef.onreadingerror = () => this.reportNfcError('Could not read NFC tag')

                ndef.onreading = async ({ message }) => {
                    const record = message.records[0]
                    const textDecoder = new TextDecoder('utf-8')
                    const lnurl = textDecoder.decode(record.data)
                    await this.sendData(lnurl)
                }
                
                if (inModal) {
                    // receive messages from iframe
                    window.addEventListener('message', async event => {
                        // deny messages from other origins
                        if (event.origin !== window.location.origin) return
                        
                        const { action, data } = event.data
                        switch (action) {
                            case 'nfc:data':
                                await this.sendData(data)
                                break;
                            case 'nfc:error':
                                this.reportNfcError('Could not read NFC tag')
                                break;
                        }
                    });
                }
                
                // we came here, so the user must have allowed NFC access
                this.permissionGranted = true;
            } catch (error) {
                this.reportNfcError(`NFC scan failed: ${error}`);
            }
        },
        async sendData (lnurl) {
            this.submitting = true;
            this.successMessage = null;
            this.errorMessage = null;
            
            if (this.isV2) this.$root.playSound('nfcRead');
            
            // Post LNURL-Withdraw data to server
            const body = JSON.stringify({ lnurl, invoiceId: this.model.invoiceId, amount: this.amount })
            const opts = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }
            const response = await fetch(this.url, opts)
            
            // Handle response
            try {
                const result = await response.text()
                if (response.ok) {
                    this.successMessage = result;
                } else {
                    this.reportNfcError(result);
                }
            } catch (error) {
                this.reportNfcError(error);
            }
            this.submitting = false;
        },
        reportNfcError(message) {
            this.errorMessage = message;
            if (this.isV2) this.$root.playSound('error');
        }
    }
});
</script>