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.length > 1">({{index+1}}/{{fragments.length}})</template></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <vc:icon symbol="close"/>
                    </button>
                </div>
                <div class="modal-body ">
                    <div class="qr-container text-center" style="min-height: 256px;">
                        <qrcode v-bind:value="currentFragment" :options="{ width: 256,height:256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }">
                        </qrcode>
                    </div>
                    <ul class="nav justify-content-center bg-light text-dark mt-2" v-if="allowedModes.length > 1">
                        <li class="nav-item" v-for="allowedMode in allowedModes">
                            <a class="nav-link"
                               v-bind:class="{ 'active': allowedMode == currentMode}" href="#" v-on:click="currentMode = allowedMode">
                                {{allowedMode}}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
 function initQRShow(title, data, modalId)
 {
 	return new Vue(
 	{
 		el: '#scan-qr-modal-app',
 		components:
 		{
 			qrcode: VueQrcode
 		},
 		data:
 		{
 			index: -1,
 			title: title,
 			speed: 500,
 			data: data,
 			fragments: [],
 			active: false,
 			modalId: modalId,
 			currentMode: "bcur",
 			allowedModes: ["static","bcur"]
 		},
 		computed:
 		{
 			currentFragment: function ()
 			{
 				return this.fragments[this.index];
 			}
 		},
 		mounted: function ()
 		{
 			var self = this;
 			$("#" + this.modalId)
 				.on("shown.bs.modal", function ()
 				{
 					self.start();
 				})
 				.on("hide.bs.modal", function ()
 				{
 					self.active = false;
 				});
 			self.setFragments();
 		},
 		watch:
 		{
 		    currentMode: function(){
 				this.setFragments();
 		    },
 			data: function ()
 			{
 				this.setFragments();
 			}
 		},
 		methods:
 		{
 			setFragments: function ()
 			{
 				if (!this.data)
 				{
 					this.fragments = [];
 					return;
 				}
 				if (this.currentMode == "bcur"){
 				    this.fragments = window.bcur.encodeUR(this.data.toString(), 200);
 				}else{
 				    this.fragments = [this.data.toString()];
 				}
 			},
 			start: function ()
 			{
 				this.active = true;
 				this.index = -1;
 				this.playNext();
 			},
 			playNext: function ()
 			{
 				if (!this.active)
 				{
 					return;
 				}
 				this.index++;
 				if (this.index > (this.fragments.length - 1))
 				{
 					this.index = 0;
 				}
 				setTimeout(this.playNext, this.speed)
 			}
 		}
 	});
 }
 </script>