From 568de3e6993425418d0b6078040ffb3678e3f3db Mon Sep 17 00:00:00 2001
From: Alessandro Casazza <alessandro@commercelayer.io>
Date: Tue, 7 Jul 2026 19:03:43 +0200
Subject: [PATCH 1/2] fix: defer setOrder to avoid render-phase state update
 warning

OrderContainer invokes the fetchOrder callback during render, so
updating AppProvider state synchronously triggers React's "cannot
update a component while rendering a different component" warning.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 components/data/AppProvider/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/data/AppProvider/index.tsx b/components/data/AppProvider/index.tsx
index 2e8731aa..e2cc64f5 100644
--- a/components/data/AppProvider/index.tsx
+++ b/components/data/AppProvider/index.tsx
@@ -113,7 +113,11 @@ export const AppProvider: React.FC<AppProviderProps> = ({
 
   const getOrder = (order: Order) => {
     orderRef.current = order
-    setOrder(order)
+    // OrderContainer (react-components) invokes this callback during render,
+    // so defer the state update to avoid a render-phase setState warning.
+    setTimeout(() => {
+      setOrder(order)
+    }, 0)
   }
 
   const fetchInitialOrder = async (orderId?: string, accessToken?: string) => {

From e48b665830151f078fbd9774ab2b0644d56e4295 Mon Sep 17 00:00:00 2001
From: Alessandro Casazza <alessandro@commercelayer.io>
Date: Tue, 7 Jul 2026 19:03:43 +0200
Subject: [PATCH 2/2] fix: scroll Stripe payment tab into view before clicking

Playwright can't auto-scroll the outer page for elements inside the
cross-origin Stripe iframe, so scroll manually only when the tab is
below the fold instead of always wheeling by a fixed amount.
---
 specs/fixtures/CheckoutPage.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/specs/fixtures/CheckoutPage.ts b/specs/fixtures/CheckoutPage.ts
index 473011af..da41818c 100644
--- a/specs/fixtures/CheckoutPage.ts
+++ b/specs/fixtures/CheckoutPage.ts
@@ -1327,14 +1327,23 @@ export class CheckoutPage {
       ).toBeVisible()
     }).toPass()
 
-    await this.page.mouse.wheel(0, 300)
-
     // Stripe may render tabs as <button> elements or as generic elements depending on
     // how many payment methods are available. Click only when it is a button.
     const cardButton = stripeFrameLocator.getByRole("button", {
       name: label,
     })
     if (await cardButton.isVisible()) {
+      const box = await cardButton.boundingBox()
+      const viewport = this.page.viewportSize()
+      if (
+        box != null &&
+        viewport != null &&
+        box.y + box.height > viewport.height
+      ) {
+        // Element inside the cross-origin Stripe iframe is below the fold:
+        // Playwright can't scroll the outer page for it, so do it ourselves.
+        await this.page.mouse.wheel(0, box.y + box.height - viewport.height + 100)
+      }
       await cardButton.click({ force: true })
     }
     return stripeFrameLocator