mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-02-22 14:22:40 +01:00
Code Issues Projects Releases Packages Wiki Activity

NFC improvements (#5509)

Browse source 
* Move NFC code on Vue app level

* Update NFC result handling and display

* Save a bit of space

* Scroll NFC error into view
This commit is contained in:
d11n 2023-11-30 10:17:23 +01:00 • committed by GitHub
parent b0554bbf17
commit b9b3860e6b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 270 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml
View file

@ -32,7 +32,7 @@
<script>
Vue.component('BitcoinLikeMethodCheckout', {
props: ["model"],
props: ['model', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage'],
template: "#bitcoin-method-checkout-template",
components: {
qrcode: VueQrcode

4
BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml
View file

@ -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 {

2
BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout-v2.cshtml
View file

@ -24,7 +24,7 @@
<script>
Vue.component('LightningLikeMethodCheckout', {
props: ["model"],
props: ['model', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage'],
template: "#lightning-method-checkout-template",
components: {
qrcode: VueQrcode

2
BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml
View file

@ -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

166
BTCPayServer/Views/Shared/NFC/CheckoutEnd.cshtml
View file

@ -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
}
}
});

2
BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent-v2.cshtml
View file

@ -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" />

2
BTCPayServer/Views/Shared/NFC/LNURLNFCPostContent.cshtml
View file

@ -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" />

13
BTCPayServer/Views/UIInvoice/Checkout-Body.cshtml
View file

@ -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">

85
BTCPayServer/Views/UIInvoice/Checkout.cshtml
View file

@ -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);
}
}
});

10
BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
View file

@ -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">

7
BTCPayServer/wwwroot/checkout-v2/checkout.css
View file

@ -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);
}
}

106
BTCPayServer/wwwroot/checkout-v2/checkout.js
View file

@ -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' });
}
}
}
});

18
BTCPayServer/wwwroot/checkout/js/checkout.js
View file

@ -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;
})
})