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

@@ -82,15 +82,15 @@
                         @* Not working because of nsSeparator: false, keySeparator: false,
                             {{$t("nested.lang")}} >>
                         *@
-                    
-                        <select asp-for="DefaultLang"  
+
+                        <select asp-for="DefaultLang"
                                 class="cmblang reverse invisible"
-                            onchange="changeLanguage($(this).val())"
-                            asp-items="@langService.GetLanguages().Select((language) => new SelectListItem(language.DisplayName,language.Code, false))"></select>
-                    
+                                onchange="changeLanguage($(this).val())"
+                                asp-items="@langService.GetLanguages().Select((language) => new SelectListItem(language.DisplayName,language.Code, false))"></select>
+
                         <script>
                             var languageSelectorPrettyDropdown;
-                            $(function() {
+                            $(function () {
                                 // REVIEW: don't use initDropdown method but rather directly initialize select whenever you are using it
                                 $("#DefaultLang").val(startingLanguage);
                                 languageSelectorPrettyDropdown = initDropdown("#DefaultLang");
@@ -113,11 +113,8 @@
             </div>
         </div>
     </invoice>
-<script type="text/javascript">
-    var availableLanguages = @Html.Raw(Json.Serialize(
-                                     langService
-                                         .GetLanguages()
-                                         .Select((language) => language.Code)));;
+    <script type="text/javascript">
+    var availableLanguages = @Html.Raw(Json.Serialize(langService.GetLanguages().Select((language) => language.Code)));;
     var storeDefaultLang = "@Model.DefaultLang";
     var fallbackLanguage = "en";
     startingLanguage = computeStartingLanguage();
@@ -133,7 +130,7 @@
             nsSeparator: false,
             keySeparator: false
         });
-    
+
     function computeStartingLanguage() {
         if (urlParams.lang && isLanguageAvailable(urlParams.lang)) {
             return urlParams.lang;
@@ -150,11 +147,11 @@
             i18next.changeLanguage(lang);
         }
     }
-        
+
     function isLanguageAvailable(languageCode) {
         return availableLanguages.indexOf(languageCode) >= 0;
     }
-    
+
     const i18n = new VueI18next(i18next);
 
     // TODO: Move all logic from core.js to Vue controller
@@ -169,7 +166,7 @@
         i18n: i18n,
         el: '#checkoutCtrl',
         components: {
-            qrcode: VueQr,
+            qrcode: VueQrcode,
             changelly: ChangellyComponent,
             coinswitch: CoinSwitchComponent
         },
@@ -182,6 +179,6 @@
             selectedThirdPartyProcessor: ""
         }
     });
-</script>
+    </script>
 </body>
 </html>

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