New QR Code component, fixes scanning of long lightning invoices

BTCPayServer/Views/Invoice/Checkout-Body.cshtml

@@ -206,7 +206,7 @@
         </div>
         <div class="payment__scan">
             <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" />
-            <qrcode v-bind:val="scanDisplayQr" v-bind:size="256" bg-color="#f5f5f7" fg-color="#000">
+            <qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 0, color: {dark:'#000', light:'#f5f5f7'} }">
             </qrcode>
         </div>
         <div class="payment__details__instruction__open-wallet">

BTCPayServer/Views/Invoice/Checkout.cshtml

@@ -114,10 +114,7 @@
         </div>
     </invoice>
     <script type="text/javascript">
-    var availableLanguages = @Html.Raw(Json.Serialize(
+    var availableLanguages = @Html.Raw(Json.Serialize(langService.GetLanguages().Select((language) => language.Code)));;
-                                     langService
-                                         .GetLanguages()
-                                         .Select((language) => language.Code)));;
     var storeDefaultLang = "@Model.DefaultLang";
     var fallbackLanguage = "en";
     startingLanguage = computeStartingLanguage();
@@ -169,7 +166,7 @@
         i18n: i18n,
         el: '#checkoutCtrl',
         components: {
-            qrcode: VueQr,
+            qrcode: VueQrcode,
             changelly: ChangellyComponent,
             coinswitch: CoinSwitchComponent
         },

BTCPayServer/bundleconfig.json

@@ -44,7 +44,7 @@
             "wwwroot/vendor/clipboard.js/clipboard.js",
             "wwwroot/vendor/jquery/jquery.js",
             "wwwroot/vendor/vuejs/vue.min.js",
-            "wwwroot/vendor/vuejs/vue-qrcode.js",
+            "wwwroot/vendor/vue-qrcode/vue-qrcode.js",
             "wwwroot/vendor/i18next/i18next.js",
             "wwwroot/vendor/i18next/i18nextXHRBackend.js",
             "wwwroot/vendor/i18next/vue-i18next.js",