From b9b3860e6b0d858a471b42f2fe88fbbf43f82f23 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Thu, 30 Nov 2023 10:17:23 +0100
Subject: [PATCH] NFC improvements (#5509)

* Move NFC code on Vue app level

* Update NFC result handling and display

* Save a bit of space

* Scroll NFC error into view
---
 .../BitcoinLikeMethodCheckout-v2.cshtml       |   2 +-
 .../Bitcoin/BitcoinLikeMethodCheckout.cshtml  |   4 +-
 .../LightningLikeMethodCheckout-v2.cshtml     |   2 +-
 .../LightningLikeMethodCheckout.cshtml        |   2 +-
 .../Views/Shared/NFC/CheckoutEnd.cshtml       | 166 ++++--------------
 .../Shared/NFC/LNURLNFCPostContent-v2.cshtml  |   2 +-
 .../Shared/NFC/LNURLNFCPostContent.cshtml     |   2 +-
 .../Views/UIInvoice/Checkout-Body.cshtml      |  13 +-
 BTCPayServer/Views/UIInvoice/Checkout.cshtml  |  85 ++++++++-
 .../Views/UIInvoice/CheckoutV2.cshtml         |  10 +-
 BTCPayServer/wwwroot/checkout-v2/checkout.css |   7 +
 BTCPayServer/wwwroot/checkout-v2/checkout.js  | 106 ++++++++++-
 BTCPayServer/wwwroot/checkout/js/checkout.js  |  18 +-
 13 files changed, 270 insertions(+), 149 deletions(-)

diff --git a/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml b/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml
index b488dd893..32e1083f6 100644
--- a/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml
+++ b/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml
@@ -32,7 +32,7 @@
 
 <script>
     Vue.component('BitcoinLikeMethodCheckout', {
-        props: ["model"],
+        props: ['model', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage'],
         template: "#bitcoin-method-checkout-template",
         components: {
             qrcode: VueQrcode
diff --git a/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml b/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml
index b94631f8d..91d162758 100644
--- a/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml
+++ b/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml
@@ -79,7 +79,7 @@
 <script type="text/javascript">
     Vue.component('BitcoinLikeMethodCheckout',
         {
-            props: ["srvModel"],
+            props: ['srvModel', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage'],
             template: "#bitcoin-method-checkout-template",
             components: {
                 qrcode: VueQrcode
@@ -107,7 +107,7 @@
     });
 
     Vue.component('BitcoinLikeMethodCheckoutHeader', {
-        props: ["srvModel"],
+        props: ['srvModel', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage'],
         template: "#bitcoin-method-checkout-header-template",
         data: function() {
             return {
diff --git a/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout-v2.cshtml b/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout-v2.cshtml
index e02c775ae..580b00e35 100644
--- a/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout-v2.cshtml
+++ b/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout-v2.cshtml
@@ -24,7 +24,7 @@
 
 <script>
     Vue.component('LightningLikeMethodCheckout', {
-        props: ["model"],
+        props: ['model', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage'],
         template: "#lightning-method-checkout-template",
         components: {
             qrcode: VueQrcode
diff --git a/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml b/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml
index 3eaaa8a5f..be1ade48b 100644
--- a/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml
+++ b/BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml
@@ -80,7 +80,7 @@
 <script type="text/javascript">
     Vue.component('LightningLikeMethodCheckout',
         {
-            props: ["srvModel"],
+            props: ['srvModel', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage'],
             template: "#lightning-method-checkout-template",
             components: {
                 qrcode: VueQrcode
diff --git a/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml b/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml
index acda9ee23..639ddec37 100644
--- a/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml
+++ b/BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml
@@ -1,48 +1,32 @@
-@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  }">
+    <div v-if="display" class="mt-4" id="NFC">
+        <div v-if="nfcErrorMessage" class="alert alert-danger" v-text="nfcErrorMessage"></div>
+        <template v-if="isV2">
+            <button class="btn btn-secondary rounded-pill w-100" type="button" id="PayByNFC"
+                    :disabled="nfcScanning || submitting" v-on:click="handleClick">{{btnText}}</button>
+        </template>
+        <template v-else>
+            <bp-loading-button>
+                <button class="action-button" style="margin: 0 45px;width:calc(100% - 90px) !important" :disabled="nfcScanning || submitting" v-on:click="handleClick" id="PayByNFC"
+                        :class="{ 'action-button': nfcSupported, 'btn btn-text w-100': !nfcSupported  }">
                     <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>
+    </div>
 </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
+        isV2: Boolean,
+        nfcSupported: Boolean,
+        nfcScanning: Boolean,
+        nfcErrorMessage: String
     },
     computed: {
         display () {
@@ -62,16 +46,16 @@ Vue.component("lnurl-withdraw-checkout", {
                 (activePaymentMethodId === 'BTC' && isUnified && lnurlwAvailable) ||
                 // Lightning with LNURL available
                 (activePaymentMethodId === 'BTC_LightningLike' && lnurlwAvailable))
-            return isAvailable && (this.supported || this.testFallback)
+            return isAvailable && (this.nfcSupported || this.testFallback)
         },
         testFallback () {
-            return !this.supported && window.location.search.match('lnurlwtest=(1|true)')
+            return !this.nfcSupported && window.location.search.match('lnurlwtest=(1|true)')
         },
         btnText () {
-            if (this.supported) {
+            if (this.nfcSupported) {
                 if (this.submitting) {
                     return this.isV2 ? this.$t('submitting_nfc') : 'Submitting NFC …'
-                } else if (this.scanning) {
+                } else if (this.nfcScanning) {
                     return this.isV2 ? this.$t('scanning_nfc') : 'Scanning NFC …'
                 } else {
                     return this.isV2 ? this.$t('pay_by_nfc') : 'Pay by NFC'
@@ -84,35 +68,20 @@ Vue.component("lnurl-withdraw-checkout", {
     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
+            submitting: false
         }
     },
-    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()
-        }
+    beforeMount () {
+        this.$root.$on('read-nfc-data', this.sendData)
     },
     beforeDestroy () {
-        if (this.readerAbortController) {
-            this.readerAbortController.abort()
-        }
+        this.$root.$off('read-nfc-data')
     },
     methods: {
         async handleClick () {
-            if (this.supported) {
-                this.startScan()
+            if (this.nfcSupported) {
+                this.$emit('start-nfc-scan')
             } else {
                 if (this.model.isUnsetTopUp) {
                     this.handleUnsetTopUp()
@@ -132,94 +101,29 @@ Vue.component("lnurl-withdraw-checkout", {
                 try {
                     this.amount = parseInt(amountStr)
                 } catch {
-                    alert("Please provide a valid number amount in sats");
+                    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');
+        async sendData (data) {
+            this.submitting = true
+            this.$emit('handle-nfc-data')
             
             // Post LNURL-Withdraw data to server
-            const body = JSON.stringify({ lnurl, invoiceId: this.model.invoiceId, amount: this.amount })
+            const body = JSON.stringify({ lnurl: data, 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);
-                }
+                const action = response.ok ? 'handle-nfc-result' : 'handle-nfc-error'
+                this.$emit(action, result)
             } catch (error) {
-                this.reportNfcError(error);
+                this.$emit('handle-nfc-error', error)
             }
-            this.submitting = false;
-        },
-        reportNfcError(message) {
-            this.errorMessage = message;
-            if (this.isV2) this.$root.playSound('error');
+            this.submitting = false
         }
     }
 });
diff --git a/BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent-v2.cshtml b/BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent-v2.cshtml
index a17c0d108..0ebcfaf3e 100644
--- a/BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent-v2.cshtml
+++ b/BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent-v2.cshtml
@@ -1 +1 @@
-<lnurl-withdraw-checkout :model="model" :is-v2="true" />
+<lnurl-withdraw-checkout :model="model" :is-v2="true" :nfc-supported="nfcSupported" :nfc-scanning="nfcScanning" :nfc-error-message="nfcErrorMessage" v-on="$listeners" />
diff --git a/BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent.cshtml b/BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent.cshtml
index 360be2da3..e13c875c9 100644
--- a/BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent.cshtml
+++ b/BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent.cshtml
@@ -1 +1 @@
-<lnurl-withdraw-checkout :model="srvModel" />
+<lnurl-withdraw-checkout :model="srvModel" :nfc-supported="nfcSupported" :nfc-scanning="nfcScanning" :nfc-error-message="nfcErrorMessage" v-on="$listeners" />
diff --git a/BTCPayServer/Views/UIInvoice/Checkout-Body.cshtml b/BTCPayServer/Views/UIInvoice/Checkout-Body.cshtml
index 2d738de6d..b9c1d9dc4 100644
--- a/BTCPayServer/Views/UIInvoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/UIInvoice/Checkout-Body.cshtml
@@ -184,11 +184,16 @@
     </div>
     <div v-if="showPaymentUI">
         <component v-if="srvModel.uiSettings && srvModel.uiSettings.checkoutBodyVueComponentName && srvModel.activated"
-                   v-bind:srv-model="srvModel"
-                   v-bind:is="srvModel.uiSettings.checkoutBodyVueComponentName">
-        </component>
+                   :is="srvModel.uiSettings.checkoutBodyVueComponentName"
+                   :srv-model="srvModel"
+                   :nfc-scanning="nfc.scanning"
+                   :nfc-supported="nfc.supported"
+                   :nfc-error-message="nfc.errorMessage"
+                   v-on:start-nfc-scan="startNFCScan"
+                   v-on:handle-nfc-data="handleNFCData"
+                   v-on:handle-nfc-error="handleNFCError"
+                   v-on:handle-nfc-result="handleNFCResult" />
     </div>
-
     <div class="bp-view" id="paid" v-bind:class="{ 'active': invoicePaid && !showEmailForm}">
         <div class="status-block">
             <div class="success-block">
diff --git a/BTCPayServer/Views/UIInvoice/Checkout.cshtml b/BTCPayServer/Views/UIInvoice/Checkout.cshtml
index 7716a59f4..713340d39 100644
--- a/BTCPayServer/Views/UIInvoice/Checkout.cshtml
+++ b/BTCPayServer/Views/UIInvoice/Checkout.cshtml
@@ -206,7 +206,15 @@
             lineItemsExpanded: false,
             changingCurrencies: false,
             loading: true,
-            isModal: initialSrvModel.isModal
+            isModal: initialSrvModel.isModal,
+            nfc: {
+                supported: 'NDEFReader' in window,
+                scanning: false,
+                submitting: false,
+                errorMessage: null,
+                permissionGranted: false,
+                readerAbortController: null
+            }
         },
         computed: {
             expiringSoon: function(){
@@ -233,7 +241,7 @@
                     : null;
             }
         },
-        mounted: function(){
+        mounted: async function(){
             this.startProgressTimer();
             this.listenIn();
             this.onDataCallback(this.srvModel);
@@ -244,6 +252,14 @@
             jQuery("invoice").fadeOut(0).fadeIn(300);
             window.closePaymentMethodDialog = this.closePaymentMethodDialog.bind(this);
             this.loading = false;
+            if (this.nfc.supported) {
+                this.setupNFC();
+            }
+        },
+        beforeDestroy () {
+            if (this.nfc.readerAbortController) {
+                this.nfc.readerAbortController.abort()
+            }
         },
         methods: {
             onlyExpandLineItems: function() {
@@ -403,6 +419,71 @@
                 } else {
                     this.emailAddressInputInvalid = true;
                 }
+            },
+            async setupNFC () {
+                try {
+                    this.$set(this.nfc, 'permissionGranted', navigator.permissions && (await navigator.permissions.query({ name: 'nfc' })).state === 'granted');
+                } catch (e) {}
+                if (this.nfc.permissionGranted) {
+                    await this.startNFCScan();
+                }
+            },
+            async startNFCScan () {
+                if (this.nfc.scanning) return;
+                this.$set(this.nfc, 'scanning', true);
+                try {
+                    const inModal = window.self !== window.top;
+                    const ndef = inModal ? new NDEFReaderWrapper() : new NDEFReader();
+                    this.nfc.readerAbortController = new AbortController()
+                    this.nfc.readerAbortController.signal.onabort = () => {
+                        this.$set(this.nfc, 'scanning', false);
+                    };
+            
+                    await ndef.scan({ signal: this.nfc.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 decoded = textDecoder.decode(record.data)
+                        this.$emit('read-nfc-data', decoded)
+                    }
+            
+                    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':
+                                    this.$emit('read-nfc-data', data)
+                                    break;
+                                case 'nfc:error':
+                                    this.handleNFCError('Could not read NFC tag')
+                                    break;
+                            }
+                        });
+                    }
+            
+                    // we came here, so the user must have allowed NFC access
+                    this.$set(this.nfc, 'permissionGranted', true);
+                } catch (error) {
+                    this.handleNFCError(`NFC scan failed: ${error}`);
+                }
+            },
+            handleNFCData() { // child component reports it is handling the data
+                this.$set(this.nfc, 'errorMessage', null);
+                this.$set(this.nfc, 'successMessage', null);
+                this.$set(this.nfc, 'submitting', true);
+            },
+            handleNFCResult(message) { // child component reports result for handling the data
+                this.$set(this.nfc, 'submitting', false);
+                this.$set(this.nfc, 'successMessage', message);
+            },
+            handleNFCError(message) { // internal or via child component reporting failure of handling the data
+                this.$set(this.nfc, 'submitting', false);
+                this.$set(this.nfc, 'errorMessage', message);
             }
         }
     });
diff --git a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
index 823ac0418..786c13362 100644
--- a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
+++ b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
@@ -109,7 +109,15 @@
                         </div>
                     </div>
                 }
-                <component v-if="paymentMethodComponent" :is="paymentMethodComponent" :model="srvModel" />
+                <component v-if="paymentMethodComponent" :is="paymentMethodComponent"
+                           :model="srvModel"
+                           :nfc-scanning="nfc.scanning"
+                           :nfc-supported="nfc.supported"
+                           :nfc-error-message="nfc.errorMessage"
+                           v-on:start-nfc-scan="startNFCScan"
+                           v-on:handle-nfc-data="handleNFCData"
+                           v-on:handle-nfc-error="handleNFCError"
+                           v-on:handle-nfc-result="handleNFCResult" />
             </section>
             <section id="result" v-else>
                 <div v-if="isProcessing" id="processing" key="processing">
diff --git a/BTCPayServer/wwwroot/checkout-v2/checkout.css b/BTCPayServer/wwwroot/checkout-v2/checkout.css
index b3b341ea7..c49e87a8e 100644
--- a/BTCPayServer/wwwroot/checkout-v2/checkout.css
+++ b/BTCPayServer/wwwroot/checkout-v2/checkout.css
@@ -175,3 +175,10 @@ section dl > div dd {
 .payment-box .plugins > .payment {
     margin-top: var(--btcpay-space-l);
 }
+
+@media (max-width: 400px) {
+    /* Pull it up if there's no store header */
+    #Checkout-v2 > main.tile:first-child {
+        margin-top: calc(var(--wrap-padding-vertical) * -1);
+    }
+}
diff --git a/BTCPayServer/wwwroot/checkout-v2/checkout.js b/BTCPayServer/wwwroot/checkout-v2/checkout.js
index 1f366dc55..0e0a60a1f 100644
--- a/BTCPayServer/wwwroot/checkout-v2/checkout.js
+++ b/BTCPayServer/wwwroot/checkout-v2/checkout.js
@@ -5,6 +5,22 @@ const STATUS_SETTLED = ['complete', 'confirmed'];
 const STATUS_INVALID =  ['expired', 'invalid'];
 const urlParams = new URLSearchParams(window.location.search);
 
+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', '*');
+    }
+}
+
 function computeStartingLanguage() {
     const lang = urlParams.get('lang')
     if (lang && isLanguageAvailable(lang)) return lang;
@@ -45,7 +61,6 @@ Vue.use(VueI18next);
 const fallbackLanguage = 'en';
 const startingLanguage = computeStartingLanguage();
 const i18n = new VueI18next(i18next);
-const eventBus = new Vue();
 
 const PaymentDetails = {
     template: '#payment-details',
@@ -82,6 +97,14 @@ function initApp() {
                 paymentSound: null,
                 nfcReadSound: null,
                 errorSound: null,
+                nfc: {
+                    supported: 'NDEFReader' in window,
+                    scanning: false,
+                    submitting: false,
+                    errorMessage: null,
+                    permissionGranted: false,
+                    readerAbortController: null
+                }
             }
         },
         computed: {
@@ -192,7 +215,7 @@ function initApp() {
                 }
             }
         },
-        mounted () {
+        async mounted () {
             this.updateData(this.srvModel);
             this.updateTimer();
             if (this.isActive || this.isProcessing) {
@@ -206,9 +229,18 @@ function initApp() {
                 this.prepareSound(this.srvModel.nfcReadSoundUrl).then(sound => this.nfcReadSound = sound);
                 this.prepareSound(this.srvModel.errorSoundUrl).then(sound => this.errorSound = sound);
             }
+            if (this.nfc.supported) {
+                await this.setupNFC();
+            }
             updateLanguageSelect();
+            
             window.parent.postMessage('loaded', '*');
         },
+        beforeDestroy () {
+            if (this.nfc.readerAbortController) {
+                this.nfc.readerAbortController.abort()
+            }
+        },
         methods: {
             changePaymentMethod (id) { // payment method or plugin id
                 if (this.pmId !== id) {
@@ -303,7 +335,6 @@ function initApp() {
     
                 // updating ui
                 this.srvModel = data;
-                eventBus.$emit('data-fetched', this.srvModel);
             },
             replaceNewlines (value) {
                 return value ? value.replace(/\n/ig, '<br>') : '';
@@ -345,6 +376,75 @@ function initApp() {
                 const arrayBuffer = await response.arrayBuffer();
                 const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
                 return { audioContext, audioBuffer, playing: false };
+            },
+            async setupNFC () {
+                try {
+                    this.$set(this.nfc, 'permissionGranted', navigator.permissions && (await navigator.permissions.query({ name: 'nfc' })).state === 'granted');
+                } catch (e) {}
+                if (this.nfc.permissionGranted) {
+                    await this.startNFCScan();
+                }
+            },
+            async startNFCScan () {
+                if (this.nfc.scanning) return;
+                this.$set(this.nfc, 'scanning', true);
+                try {
+                    const inModal = window.self !== window.top;
+                    const ndef = inModal ? new NDEFReaderWrapper() : new NDEFReader();
+                    this.nfc.readerAbortController = new AbortController()
+                    this.nfc.readerAbortController.signal.onabort = () => {
+                        this.$set(this.nfc, 'scanning', false);
+                    };
+
+                    await ndef.scan({ signal: this.nfc.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 decoded = textDecoder.decode(record.data)
+                        this.$emit('read-nfc-data', decoded)
+                    }
+
+                    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':
+                                    this.$emit('read-nfc-data', data)
+                                    break;
+                                case 'nfc:error':
+                                    this.handleNFCError('Could not read NFC tag')
+                                    break;
+                            }
+                        });
+                    }
+
+                    // we came here, so the user must have allowed NFC access
+                    this.$set(this.nfc, 'permissionGranted', true);
+                } catch (error) {
+                    this.handleNFCError(`NFC scan failed: ${error}`);
+                }
+            },
+            handleNFCData() { // child component reports it is handling the data
+                this.playSound('nfcRead');
+                this.$set(this.nfc, 'submitting', true);
+                this.$set(this.nfc, 'errorMessage', null);
+            },
+            handleNFCResult() { // child component reports result for handling the data
+                this.$set(this.nfc, 'submitting', false);
+            },
+            handleNFCError(message) { // internal or via child component reporting failure of handling the data
+                this.playSound('error');
+                this.$set(this.nfc, 'submitting', false);
+                this.$set(this.nfc, 'errorMessage', message);
+                const $nfc = document.getElementById('NFC');
+                if ($nfc) {
+                    $nfc.scrollIntoView({ block: 'end', inline: 'center', behavior: 'smooth' });
+                }
             }
         }
     });
diff --git a/BTCPayServer/wwwroot/checkout/js/checkout.js b/BTCPayServer/wwwroot/checkout/js/checkout.js
index 62262ffb6..5b8d72df6 100644
--- a/BTCPayServer/wwwroot/checkout/js/checkout.js
+++ b/BTCPayServer/wwwroot/checkout/js/checkout.js
@@ -1,5 +1,21 @@
+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', '*');
+    }
+}
+
 delegate('click', '.payment-method', e => {
     const el = e.target.closest('.payment-method')
     closePaymentMethodDialog(el.dataset.paymentMethod);
     return false;
-})
\ No newline at end of file
+})