From 3929d7611de9b3674bb073416d68e623e2f4ce12 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 27 Jun 2025 15:09:05 +0300
Subject: [PATCH 1/2] update `waitForStipeElements`

---
 .changeset/eleven-days-sniff.md                            | 5 +++++
 integration/tests/pricing-table.test.ts                    | 4 +++-
 .../src/playwright/unstable/page-objects/checkout.ts       | 7 ++-----
 3 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/eleven-days-sniff.md

diff --git a/.changeset/eleven-days-sniff.md b/.changeset/eleven-days-sniff.md
new file mode 100644
index 00000000000..59e990f932d
--- /dev/null
+++ b/.changeset/eleven-days-sniff.md
@@ -0,0 +1,5 @@
+---
+'@clerk/testing': patch
+---
+
+Allow for `waitForStripeElements` helper to accept a `state` of `visible` or `hidden`.
diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts
index bbd70bf845c..ee4c7bcaace 100644
--- a/integration/tests/pricing-table.test.ts
+++ b/integration/tests/pricing-table.test.ts
@@ -309,7 +309,9 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
       });
       await u.po.checkout.clickPayOrSubscribe();
       await expect(u.po.page.locator('.cl-checkout-root').getByText('The card was declined.').first()).toBeVisible();
-      await u.po.checkout.waitForStipeElements();
+      // It should unmount and remount the payment element
+      await u.po.checkout.waitForStipeElements({ state: 'hidden' });
+      await u.po.checkout.waitForStipeElements({ state: 'visible' });
       await u.po.checkout.fillTestCard();
       await u.po.checkout.clickPayOrSubscribe();
       await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible();
diff --git a/packages/testing/src/playwright/unstable/page-objects/checkout.ts b/packages/testing/src/playwright/unstable/page-objects/checkout.ts
index 07e8b75e496..3aa123ee3d1 100644
--- a/packages/testing/src/playwright/unstable/page-objects/checkout.ts
+++ b/packages/testing/src/playwright/unstable/page-objects/checkout.ts
@@ -28,11 +28,8 @@ export const createCheckoutPageObject = (testArgs: { page: EnhancedPage }) => {
       await frame.getByLabel('Country').selectOption(card.country);
       await frame.getByLabel('ZIP code').fill(card.zip);
     },
-    waitForStipeElements: async () => {
-      return page
-        .frameLocator('iframe[src*="elements-inner-payment"]')
-        .getByLabel('Card number')
-        .waitFor({ state: 'visible' });
+    waitForStipeElements: async ({ state = 'visible' }: { state?: 'visible' | 'hidden' } = {}) => {
+      return page.frameLocator('iframe[src*="elements-inner-payment"]').getByLabel('Card number').waitFor({ state });
     },
     clickPayOrSubscribe: async () => {
       await self.root.getByRole('button', { name: /subscribe|pay\s\$/i }).click();

From 099c59131134814c754db43bead20162a821aa3e Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 27 Jun 2025 15:22:20 +0300
Subject: [PATCH 2/2] Apply suggestions from code review

---
 integration/tests/pricing-table.test.ts                       | 4 ++--
 .../testing/src/playwright/unstable/page-objects/checkout.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts
index ee4c7bcaace..e204957339b 100644
--- a/integration/tests/pricing-table.test.ts
+++ b/integration/tests/pricing-table.test.ts
@@ -310,8 +310,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
       await u.po.checkout.clickPayOrSubscribe();
       await expect(u.po.page.locator('.cl-checkout-root').getByText('The card was declined.').first()).toBeVisible();
       // It should unmount and remount the payment element
-      await u.po.checkout.waitForStipeElements({ state: 'hidden' });
-      await u.po.checkout.waitForStipeElements({ state: 'visible' });
+      await u.po.checkout.waitForStripeElements({ state: 'hidden' });
+      await u.po.checkout.waitForStripeElements({ state: 'visible' });
       await u.po.checkout.fillTestCard();
       await u.po.checkout.clickPayOrSubscribe();
       await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible();
diff --git a/packages/testing/src/playwright/unstable/page-objects/checkout.ts b/packages/testing/src/playwright/unstable/page-objects/checkout.ts
index 3aa123ee3d1..42a021722dc 100644
--- a/packages/testing/src/playwright/unstable/page-objects/checkout.ts
+++ b/packages/testing/src/playwright/unstable/page-objects/checkout.ts
@@ -28,7 +28,7 @@ export const createCheckoutPageObject = (testArgs: { page: EnhancedPage }) => {
       await frame.getByLabel('Country').selectOption(card.country);
       await frame.getByLabel('ZIP code').fill(card.zip);
     },
-    waitForStipeElements: async ({ state = 'visible' }: { state?: 'visible' | 'hidden' } = {}) => {
+    waitForStripeElements: async ({ state = 'visible' }: { state?: 'visible' | 'hidden' } = {}) => {
       return page.frameLocator('iframe[src*="elements-inner-payment"]').getByLabel('Card number').waitFor({ state });
     },
     clickPayOrSubscribe: async () => {