btcpayserver/BTCPayServer/Views/Shared/ShowQR.cshtml

<div id="scan-qr-modal-app">
    <div class="modal" tabindex="-1" role="dialog" :id="modalId">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{title}} <template v-if="fragments && fragments.length > 1">({{index+1}}/{{fragments.length}})</template></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="@StringLocalizer["Close"]">
                        <vc:icon symbol="close"/>
                    </button>
                </div>
                <div class="modal-body pt-0">
                    <div class="payment-box m-0">
                        <div class="qr-container justify-content-start">
                            <component v-if="currentFragment" :is="currentMode.href ? 'a': 'div'" class="qr-container d-inline-block" :href="currentMode.href">
                                <qrcode :value="currentFragment" :options="qrOptions"></qrcode>
                            </component>
                        </div>
                        <div v-if="currentFragment" class="input-group mt-3">
                            <div class="form-floating">
                                <vc:truncate-center text="currentFragment" padding="15" elastic="true" is-vue="true" classes="form-control-plaintext"/>
                                <label>{{title}}</label>
                            </div>
                        </div>
                    </div>
                    <ul class="nav btcpay-pills justify-content-center mt-4 mb-3" v-if="modes && Object.keys(modes).length > 1">
                        <li class="nav-item" v-for="(item, key) in modes">
                            <a class="btcpay-pill" :class="{ 'active': key === mode }" href="#" v-on:click="mode = key">{{item.title}}</a>
                        </li>
                    </ul>
                    <div class="input-group input-group-sm mt-3" v-if="currentFragment && currentMode.showData">
                        <input type="text" class="form-control" readonly :value="currentFragment" id="qr-code-data-input">
                        <button type="button" class="btn btn-outline-secondary px-3" data-clipboard-target="#qr-code-data-input">
                            <vc:icon symbol="actions-copy" />
                        </button>
                    </div>
                    <div v-if="note" v-html="note" class="text-muted mt-3" id="scan-qr-modal-note"></div>
                </div>
                <div class="mb-4 text-center" v-if="continueCallback">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" v-on:click="continueCallback()">{{ continueTitle || 'Continue' }}</button>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    #scan-qr-modal-note :last-child { margin-bottom: 0; }
</style>
<script>
function initQRShow(data) {
 	return new Vue({
 		el: '#scan-qr-modal-app',
 		components: {
 			qrcode: VueQrcode
 		},
 		data() {
             const res = Object.assign({}, {
                 title: "Scan QR",
                 modalId: "scan-qr-modal",
                 modes: {},
                 index: -1,
                 speed: 500,
                 active: false,
                 note: null,
                 continueTitle: null,
                 continueCallback: null,
                 qrOptions: {
                     width: 256,
                     height: 256,
                     margin: 1,
                     color: {
                         dark: '#000',
                         light: '#f5f5f7'
                     }
                 }
             }, data || {});
             
             if (!Object.values(res.modes || {}).length) {
                 res.modes = { default: { title: 'Default', fragments: [res.data] } };
             }
             
             if (!res.mode) {
                res.mode = Object.keys(res.modes)[0];
             }
   
             return res;
 		},
 		computed: {
             fragments() {
                 return this.currentMode && this.currentMode.fragments;
             },
             currentMode() {
                 return this.modes[this.mode];
             },
             currentFragment() {
                 return this.fragments && this.fragments[this.index];
             }
 		},
 		mounted() {
 			$(`#${this.modalId}`)
 				.on("shown.bs.modal", () => { this.start(); })
 				.on("hide.bs.modal", () => { this.active = false; });
 		},
 		methods: {
 			start() {
                 this.active = true;
                 this.index = -1;
                 this.playNext();
 			},
 			playNext() {
                 if (!this.active) return;
                 
                 this.index++;
                 if (this.index > (this.fragments.length - 1)) {
                     this.index = 0;
                 }
                 setTimeout(this.playNext, this.speed);
 			},
 			showData(data, title) {
 			    if (title) this.title = title;
                this.modes = { default: { title: title || 'Default', fragments: [data] } };
                this.mode = "default";
                this.show();
            },
            show() {
                $(`#${this.modalId}`).modal("show");
            }
 		}
 	});
 }
 </script>