Adapt to checkout iframe changes

btcpayserver · Mar 3, 2025 · cd8c95b · cd8c95b
1 parent f73d964
commit cd8c95b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/BTCPayApp.UI/Pages/CheckoutPage.razor b/BTCPayApp.UI/Pages/CheckoutPage.razor
@@ -1,7 +1,8 @@
 @attribute [Route(Routes.Checkout)]
 @using BTCPayApp.Core.Auth
-@inherits Fluxor.Blazor.Web.Components.FluxorComponent
+@inject IJSRuntime JS
 @inject IAccountManager AccountManager
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
 
 <PageTitle>Checkout</PageTitle>
 
@@ -12,13 +13,20 @@
         <div class="fs-4">Loading</div>
     </section>
 }
-<iframe name="checkout" allow="clipboard-read;clipboard-write" allowfullscreen src="@CheckoutUrl" @onload="() => { _iframeLoaded = true; }"></iframe>
+<iframe id="AppCheckout" name="checkout" allow="clipboard-read;clipboard-write" allowfullscreen src="@CheckoutUrl" @onload="OnIframeLoad"></iframe>
 
 @code {
     [Parameter, EditorRequired]
     public string? InvoiceId { get; set; }
 
     private bool _iframeLoaded;
 
-    private string? CheckoutUrl => string.IsNullOrEmpty(InvoiceId) ? null : $"{AccountManager.Account!.BaseUri}i/{InvoiceId}";
+    private string BaseUri => AccountManager.Account!.BaseUri;
+    private string? CheckoutUrl => string.IsNullOrEmpty(InvoiceId) ? null : $"{BaseUri}i/{InvoiceId}";
+
+    private async Task OnIframeLoad()
+    {
+        _iframeLoaded = true;
+        await JS.InvokeVoidAsync("Interop.setContext", "#AppCheckout", BaseUri);
+    }
 }
diff --git a/BTCPayApp.UI/Pages/Settings/PairingPage.razor b/BTCPayApp.UI/Pages/Settings/PairingPage.razor
@@ -10,7 +10,6 @@
 @inject SyncService SyncService
 @inject IJSRuntime JS
 @inject ILogger<QrScanModal> Logger
-@implements IAsyncDisposable
 @inherits Fluxor.Blazor.Web.Components.FluxorComponent
 
 <PageTitle>@GetTitle()</PageTitle>

diff --git a/BTCPayApp.UI/wwwroot/js/global.js b/BTCPayApp.UI/wwwroot/js/global.js
@@ -4,6 +4,12 @@ Interop = {
   getWidth(el) {
     return el.clientWidth;
   },
+  setContext(selector, origin) {
+    const $el = document.querySelector(selector);
+    console.log(selector, origin, $el);
+    if (!$el) return console.warn('Selector does not exist:', selector);
+    $el.contentWindow.postMessage(JSON.stringify({ context: 'btcpayapp' }), origin);
+  },
   openModal(selector) {
     const $el = document.querySelector(selector);
     if (!$el) return console.warn('Selector does not exist:', selector);