chore(clerk-js): Refactor CheckoutForm and AddPaymentSource by panteliselef · Pull Request #5980 · clerk/javascript

.changeset/plenty-files-sit.md

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+---
+'@clerk/testing': patch
+---
+Update checkoutObject with `waitForStipeElements` method and `root` property.

-Original file line number
+Diff line change
@@ Expand Up @@
  await fakeUser.deleteIfExists();
  });
+ test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({
+ page,
+ context,
+ }) => {
+ const u = createTestUtils({ app, page, context });
+ const fakeUser = u.services.users.createFakeUser();
+ await u.services.users.createBapiUser(fakeUser);
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+ await u.po.page.goToRelative('/user');
+ await u.po.userProfile.waitForMounted();
+ await u.po.userProfile.switchToBillingTab();
+ await u.po.page.getByRole('button', { name: 'Switch plans' }).click();
+ await u.po.pricingTable.startCheckout({ planSlug: 'pro', period: 'monthly' });
+ await u.po.checkout.waitForMounted();
+ await u.po.checkout.fillCard({
+ number: '4100000000000019', // fraud card - always declines
+ expiration: '1234',
+ cvc: '123',
+ country: 'United States',
+ zip: '12345',
+ });
+ 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();
+ await u.po.checkout.fillTestCard();
+ await u.po.checkout.clickPayOrSubscribe();
+ await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible();
+ await fakeUser.deleteIfExists();
+ });
  });
 });

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "599kB" },
+ { "path": "./dist/clerk.js", "maxSize": "599.3kB" },
  { "path": "./dist/clerk.browser.js", "maxSize": "69KB" },
  { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" },
  { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
@@ Expand All / @@ -21,8 +21,8 @@ @@
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
  { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
  { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
- { "path": "./dist/checkout*.js", "maxSize": "6.83KB" },
- { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "7.1KB" },
+ { "path": "./dist/paymentSources*.js", "maxSize": "9.09KB" },
  { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
  { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
  { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" }
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,11 @@
+import { useClerk } from '@clerk/shared/react/index';
+import type { PropsWithChildren } from 'react';
+export const DevOnly = ({ children }: PropsWithChildren) => {
+ const clerk = useClerk();
+ if (clerk.instanceType !== 'development') {
+ return null;
+ }
+ return children;
+};

blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + ' Skip to contentNavigation Menu Sign inAppearance settings AI CODE CREATIONGitHub CopilotWrite better code with AI GitHub Copilot appDirect agents from issue to merge MCP RegistryIntegrate external tools DEVELOPER WORKFLOWSActionsAutomate any workflow CodespacesInstant dev environments IssuesPlan and track work Code ReviewManage code changes Code QualityEnforce quality at merge APPLICATION SECURITYGitHub Advanced SecurityFind and fix vulnerabilities Code securitySecure your code as you build Secret protectionStop leaks before they start EXPLOREWhy GitHub Documentation Blog Changelog Marketplace View all features BY COMPANY SIZEEnterprises Small and medium teams Startups Nonprofits BY USE CASEApp Modernization DevSecOps DevOps CI/CD View all use cases BY INDUSTRYHealthcare Financial services Manufacturing Government View all industries View all solutions EXPLORE BY TOPICAI Software Development DevOps Security View all topics EXPLORE BY TYPECustomer stories Events & webinars Ebooks & reports Business insights GitHub Skills SUPPORT & SERVICESDocumentation Customer support Community forum Trust center Partners View all resources COMMUNITYGitHub SponsorsFund open source developers PROGRAMSSecurity Lab Maintainer Community GitHub Stars Archive Program REPOSITORIESTopics Trending Collections ENTERPRISE SOLUTIONSEnterprise platformAI-powered developer platform AVAILABLE ADD-ONSGitHub Advanced SecurityEnterprise-grade security features Copilot for BusinessEnterprise-grade AI features Premium SupportEnterprise-grade 24/7 support Pricing Sign in Sign upAppearance settings You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert Uh oh! There was an error while loading. Please reload this page. clerk /javascriptPublic Notifications You must be signed in to change notification settings Fork 470 Star 1.7k Code Issues33 Pull requests107 Discussions Actions Security and quality5 Insights Additional navigation options Code Issues Pull requests Discussions Actions Security and quality Insights chore(clerk-js): Refactor CheckoutForm and AddPaymentSource#5980 New issue Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account Merged panteliselef merged 39 commits into main from elef/refactor-checkout-formJun 2, 2025 Conversation 3 Commits 39 Checks 0 Files changed Uh oh! There was an error while loading. Please reload this page. Merged chore(clerk-js): Refactor CheckoutForm and AddPaymentSource #5980 Show file tree Hide file tree Changes from all commits Commits Show all changes 39 commits Select commit Hold shift + click to select a range 907c32a fix(clerk-js): Invalidate checkout data on unmount panteliselef May 14, 2025b8d31fd Merge branch 'main' into elef/com-798-pre-work panteliselef May 14, 202591e6163 remove previous fix panteliselef May 14, 2025dd845e7 wip panteliselef May 15, 2025e89f157 wip 2 panteliselef May 15, 202526e90af Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 202585e06ee changeset panteliselef May 15, 202512e41e6 wip 3 panteliselef May 15, 2025a094866 lock swr version panteliselef May 15, 2025d769723 delete user panteliselef May 15, 20251b71877 Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 2025f0d058a dedupe panteliselef May 15, 202598d7e94 Merge remote-tracking branch 'origin/elef/com-798-create-checkout' in… panteliselef May 15, 2025175ff64 Update .changeset/floppy-bananas-itch.md panteliselef May 15, 2025443be93 chore(clerk-js): Use SWR for commerce queries panteliselef May 15, 2025f504dda wip changeset panteliselef May 15, 20255bb68b5 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 15, 2025269d458 remove any useFetch for commerce panteliselef May 16, 202550ff538 Merge remote-tracking branch 'origin/elef/com-798-use-swr-for-queries… panteliselef May 16, 20256dcc0e4 load stripe once panteliselef May 16, 202556bdb7d Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 2025ad8ea86 update comments panteliselef May 16, 202572c06f8 use swr for initializing a payment resource panteliselef May 16, 2025ce46051 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 20251e8528d chore(clerk-js): Refactor CheckoutPage panteliselef May 16, 20254965e11 Update .changeset/cuddly-needles-say.md panteliselef May 19, 202554fcc79 chore(clerk-js): Use a single component panteliselef May 19, 20251c861c0 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 21, 202572418b7 fix merge conflict panteliselef May 21, 202581f0cef reset payment intent in stripe elements panteliselef May 21, 2025eedb76b Merge branch 'elef/com-798-use-swr-for-queries-commerce' into elef/re… panteliselef May 21, 2025105334f chore(clerk-js): Refactor CheckoutForm and AddPaymentSource panteliselef May 22, 202581553fc Merge branch 'refs/heads/main' into elef/refactor-checkout-form panteliselef May 28, 2025c396498 bump bundle panteliselef May 28, 20256a9f96d remove appearance from context panteliselef May 28, 202567365c1 improve splitting of logic and add a test panteliselef May 28, 20254e72e04 add changeset panteliselef May 28, 20250eee3ed Merge branch 'main' into elef/refactor-checkout-form panteliselef May 28, 2025085606f Merge branch 'main' into elef/refactor-checkout-form panteliselef Jun 2, 2025 File filter Filter by extension Filter by extension .json (1) .md (1) .ts (2) .tsx (6) All 4 file types selected Viewed files Clear filters Conversations Failed to load comments. Loading Uh oh! There was an error while loading. Please reload this page. Jump to Jump to file Failed to load files. Loading Uh oh! There was an error while loading. Please reload this page. Diff view Unified Split Hide whitespace Diff view Unified Split Hide whitespace .changeset/plenty-files-sit.md plenty-files-sit.md integration/tests/pricing-table.test.ts pricing-table.test.ts packages/clerk-js/bundlewatch.config.json bundlewatch.config.json packages/clerk-js/src/ui/common/DevOnly.tsx DevOnly.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx CheckoutForm.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx CheckoutPage.tsx packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx AddPaymentSource.tsx packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx PaymentSources.tsx packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx TestPaymentSource.tsx packages/testing/src/playwright/unstable/page-objects/checkout.ts checkout.ts There are no files selected for viewing 5 changes: 5 additions & 0 deletions 5 .changeset/plenty-files-sit.md Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,5 @@ --- '@clerk/testing': patch --- Update checkoutObject with `waitForStipeElements` method and `root` property. 35 changes: 35 additions & 0 deletions 35 integration/tests/pricing-table.test.ts Show comments View file Open in desktop Original file line number Diff line number Diff line change Expand Up @@ -248,5 +248,40 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await fakeUser.deleteIfExists(); }); test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({ page, context, }) => { const u = createTestUtils({ app, page, context }); const fakeUser = u.services.users.createFakeUser(); await u.services.users.createBapiUser(fakeUser); await u.po.signIn.goTo(); await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); await u.po.page.goToRelative('/user'); await u.po.userProfile.waitForMounted(); await u.po.userProfile.switchToBillingTab(); await u.po.page.getByRole('button', { name: 'Switch plans' }).click(); await u.po.pricingTable.startCheckout({ planSlug: 'pro', period: 'monthly' }); await u.po.checkout.waitForMounted(); await u.po.checkout.fillCard({ number: '4100000000000019', // fraud card - always declines expiration: '1234', cvc: '123', country: 'United States', zip: '12345', }); 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(); await u.po.checkout.fillTestCard(); await u.po.checkout.clickPayOrSubscribe(); await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible(); await fakeUser.deleteIfExists(); }); }); }); 6 changes: 3 additions & 3 deletions 6 packages/clerk-js/bundlewatch.config.json Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -1,6 +1,6 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "599kB" }, { "path": "./dist/clerk.js", "maxSize": "599.3kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "69KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" }, Expand All @@ -21,8 +21,8 @@ { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, { "path": "./dist/checkout*.js", "maxSize": "6.83KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" }, { "path": "./dist/checkout*.js", "maxSize": "7.1KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.09KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" } Expand Down 11 changes: 11 additions & 0 deletions 11 packages/clerk-js/src/ui/common/DevOnly.tsx Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,11 @@ import { useClerk } from '@clerk/shared/react/index'; import type { PropsWithChildren } from 'react'; export const DevOnly = ({ children }: PropsWithChildren) => { const clerk = useClerk(); if (clerk.instanceType !== 'development') { return null; } return children; }; Loading Oops, something went wrong. Uh oh! There was an error while loading. Please reload this page. Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later. Footer © 2026 GitHub, Inc. Footer navigation Terms Privacy Security Status Community Docs Contact You can’t perform that action at this time. , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Skip to contentNavigation Menu Sign inAppearance settings AI CODE CREATIONGitHub CopilotWrite better code with AI GitHub Copilot appDirect agents from issue to merge MCP RegistryIntegrate external tools DEVELOPER WORKFLOWSActionsAutomate any workflow CodespacesInstant dev environments IssuesPlan and track work Code ReviewManage code changes Code QualityEnforce quality at merge APPLICATION SECURITYGitHub Advanced SecurityFind and fix vulnerabilities Code securitySecure your code as you build Secret protectionStop leaks before they start EXPLOREWhy GitHub Documentation Blog Changelog Marketplace View all features BY COMPANY SIZEEnterprises Small and medium teams Startups Nonprofits BY USE CASEApp Modernization DevSecOps DevOps CI/CD View all use cases BY INDUSTRYHealthcare Financial services Manufacturing Government View all industries View all solutions EXPLORE BY TOPICAI Software Development DevOps Security View all topics EXPLORE BY TYPECustomer stories Events & webinars Ebooks & reports Business insights GitHub Skills SUPPORT & SERVICESDocumentation Customer support Community forum Trust center Partners View all resources COMMUNITYGitHub SponsorsFund open source developers PROGRAMSSecurity Lab Maintainer Community GitHub Stars Archive Program REPOSITORIESTopics Trending Collections ENTERPRISE SOLUTIONSEnterprise platformAI-powered developer platform AVAILABLE ADD-ONSGitHub Advanced SecurityEnterprise-grade security features Copilot for BusinessEnterprise-grade AI features Premium SupportEnterprise-grade 24/7 support Pricing Sign in Sign upAppearance settings You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert Uh oh! There was an error while loading. Please reload this page. clerk /javascriptPublic Notifications You must be signed in to change notification settings Fork 470 Star 1.7k Code Issues33 Pull requests107 Discussions Actions Security and quality5 Insights Additional navigation options Code Issues Pull requests Discussions Actions Security and quality Insights chore(clerk-js): Refactor CheckoutForm and AddPaymentSource#5980 New issue Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account Merged panteliselef merged 39 commits into main from elef/refactor-checkout-formJun 2, 2025 Conversation 3 Commits 39 Checks 0 Files changed Uh oh! There was an error while loading. Please reload this page. Merged chore(clerk-js): Refactor CheckoutForm and AddPaymentSource #5980 Show file tree Hide file tree Changes from all commits Commits Show all changes 39 commits Select commit Hold shift + click to select a range 907c32a fix(clerk-js): Invalidate checkout data on unmount panteliselef May 14, 2025b8d31fd Merge branch 'main' into elef/com-798-pre-work panteliselef May 14, 202591e6163 remove previous fix panteliselef May 14, 2025dd845e7 wip panteliselef May 15, 2025e89f157 wip 2 panteliselef May 15, 202526e90af Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 202585e06ee changeset panteliselef May 15, 202512e41e6 wip 3 panteliselef May 15, 2025a094866 lock swr version panteliselef May 15, 2025d769723 delete user panteliselef May 15, 20251b71877 Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 2025f0d058a dedupe panteliselef May 15, 202598d7e94 Merge remote-tracking branch 'origin/elef/com-798-create-checkout' in… panteliselef May 15, 2025175ff64 Update .changeset/floppy-bananas-itch.md panteliselef May 15, 2025443be93 chore(clerk-js): Use SWR for commerce queries panteliselef May 15, 2025f504dda wip changeset panteliselef May 15, 20255bb68b5 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 15, 2025269d458 remove any useFetch for commerce panteliselef May 16, 202550ff538 Merge remote-tracking branch 'origin/elef/com-798-use-swr-for-queries… panteliselef May 16, 20256dcc0e4 load stripe once panteliselef May 16, 202556bdb7d Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 2025ad8ea86 update comments panteliselef May 16, 202572c06f8 use swr for initializing a payment resource panteliselef May 16, 2025ce46051 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 20251e8528d chore(clerk-js): Refactor CheckoutPage panteliselef May 16, 20254965e11 Update .changeset/cuddly-needles-say.md panteliselef May 19, 202554fcc79 chore(clerk-js): Use a single component panteliselef May 19, 20251c861c0 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 21, 202572418b7 fix merge conflict panteliselef May 21, 202581f0cef reset payment intent in stripe elements panteliselef May 21, 2025eedb76b Merge branch 'elef/com-798-use-swr-for-queries-commerce' into elef/re… panteliselef May 21, 2025105334f chore(clerk-js): Refactor CheckoutForm and AddPaymentSource panteliselef May 22, 202581553fc Merge branch 'refs/heads/main' into elef/refactor-checkout-form panteliselef May 28, 2025c396498 bump bundle panteliselef May 28, 20256a9f96d remove appearance from context panteliselef May 28, 202567365c1 improve splitting of logic and add a test panteliselef May 28, 20254e72e04 add changeset panteliselef May 28, 20250eee3ed Merge branch 'main' into elef/refactor-checkout-form panteliselef May 28, 2025085606f Merge branch 'main' into elef/refactor-checkout-form panteliselef Jun 2, 2025 File filter Filter by extension Filter by extension .json (1) .md (1) .ts (2) .tsx (6) All 4 file types selected Viewed files Clear filters Conversations Failed to load comments. Loading Uh oh! There was an error while loading. Please reload this page. Jump to Jump to file Failed to load files. Loading Uh oh! There was an error while loading. Please reload this page. Diff view Unified Split Hide whitespace Diff view Unified Split Hide whitespace .changeset/plenty-files-sit.md plenty-files-sit.md integration/tests/pricing-table.test.ts pricing-table.test.ts packages/clerk-js/bundlewatch.config.json bundlewatch.config.json packages/clerk-js/src/ui/common/DevOnly.tsx DevOnly.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx CheckoutForm.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx CheckoutPage.tsx packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx AddPaymentSource.tsx packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx PaymentSources.tsx packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx TestPaymentSource.tsx packages/testing/src/playwright/unstable/page-objects/checkout.ts checkout.ts There are no files selected for viewing 5 changes: 5 additions & 0 deletions 5 .changeset/plenty-files-sit.md Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,5 @@ --- '@clerk/testing': patch --- Update checkoutObject with `waitForStipeElements` method and `root` property. 35 changes: 35 additions & 0 deletions 35 integration/tests/pricing-table.test.ts Show comments View file Open in desktop Original file line number Diff line number Diff line change Expand Up @@ -248,5 +248,40 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await fakeUser.deleteIfExists(); }); test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({ page, context, }) => { const u = createTestUtils({ app, page, context }); const fakeUser = u.services.users.createFakeUser(); await u.services.users.createBapiUser(fakeUser); await u.po.signIn.goTo(); await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); await u.po.page.goToRelative('/user'); await u.po.userProfile.waitForMounted(); await u.po.userProfile.switchToBillingTab(); await u.po.page.getByRole('button', { name: 'Switch plans' }).click(); await u.po.pricingTable.startCheckout({ planSlug: 'pro', period: 'monthly' }); await u.po.checkout.waitForMounted(); await u.po.checkout.fillCard({ number: '4100000000000019', // fraud card - always declines expiration: '1234', cvc: '123', country: 'United States', zip: '12345', }); 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(); await u.po.checkout.fillTestCard(); await u.po.checkout.clickPayOrSubscribe(); await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible(); await fakeUser.deleteIfExists(); }); }); }); 6 changes: 3 additions & 3 deletions 6 packages/clerk-js/bundlewatch.config.json Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -1,6 +1,6 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "599kB" }, { "path": "./dist/clerk.js", "maxSize": "599.3kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "69KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" }, Expand All @@ -21,8 +21,8 @@ { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, { "path": "./dist/checkout*.js", "maxSize": "6.83KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" }, { "path": "./dist/checkout*.js", "maxSize": "7.1KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.09KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" } Expand Down 11 changes: 11 additions & 0 deletions 11 packages/clerk-js/src/ui/common/DevOnly.tsx Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,11 @@ import { useClerk } from '@clerk/shared/react/index'; import type { PropsWithChildren } from 'react'; export const DevOnly = ({ children }: PropsWithChildren) => { const clerk = useClerk(); if (clerk.instanceType !== 'development') { return null; } return children; }; Loading Oops, something went wrong. Uh oh! There was an error while loading. Please reload this page. Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later. Footer © 2026 GitHub, Inc. Footer navigation Terms Privacy Security Status Community Docs Contact You can’t perform that action at this time. , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Skip to contentNavigation Menu Sign inAppearance settings AI CODE CREATIONGitHub CopilotWrite better code with AI GitHub Copilot appDirect agents from issue to merge MCP RegistryIntegrate external tools DEVELOPER WORKFLOWSActionsAutomate any workflow CodespacesInstant dev environments IssuesPlan and track work Code ReviewManage code changes Code QualityEnforce quality at merge APPLICATION SECURITYGitHub Advanced SecurityFind and fix vulnerabilities Code securitySecure your code as you build Secret protectionStop leaks before they start EXPLOREWhy GitHub Documentation Blog Changelog Marketplace View all features BY COMPANY SIZEEnterprises Small and medium teams Startups Nonprofits BY USE CASEApp Modernization DevSecOps DevOps CI/CD View all use cases BY INDUSTRYHealthcare Financial services Manufacturing Government View all industries View all solutions EXPLORE BY TOPICAI Software Development DevOps Security View all topics EXPLORE BY TYPECustomer stories Events & webinars Ebooks & reports Business insights GitHub Skills SUPPORT & SERVICESDocumentation Customer support Community forum Trust center Partners View all resources COMMUNITYGitHub SponsorsFund open source developers PROGRAMSSecurity Lab Maintainer Community GitHub Stars Archive Program REPOSITORIESTopics Trending Collections ENTERPRISE SOLUTIONSEnterprise platformAI-powered developer platform AVAILABLE ADD-ONSGitHub Advanced SecurityEnterprise-grade security features Copilot for BusinessEnterprise-grade AI features Premium SupportEnterprise-grade 24/7 support Pricing Sign in Sign upAppearance settings You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert Uh oh! There was an error while loading. Please reload this page. clerk /javascriptPublic Notifications You must be signed in to change notification settings Fork 470 Star 1.7k Code Issues33 Pull requests107 Discussions Actions Security and quality5 Insights Additional navigation options Code Issues Pull requests Discussions Actions Security and quality Insights chore(clerk-js): Refactor CheckoutForm and AddPaymentSource#5980 New issue Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account Merged panteliselef merged 39 commits into main from elef/refactor-checkout-formJun 2, 2025 Conversation 3 Commits 39 Checks 0 Files changed Uh oh! There was an error while loading. Please reload this page. Merged chore(clerk-js): Refactor CheckoutForm and AddPaymentSource #5980 Show file tree Hide file tree Changes from all commits Commits Show all changes 39 commits Select commit Hold shift + click to select a range 907c32a fix(clerk-js): Invalidate checkout data on unmount panteliselef May 14, 2025b8d31fd Merge branch 'main' into elef/com-798-pre-work panteliselef May 14, 202591e6163 remove previous fix panteliselef May 14, 2025dd845e7 wip panteliselef May 15, 2025e89f157 wip 2 panteliselef May 15, 202526e90af Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 202585e06ee changeset panteliselef May 15, 202512e41e6 wip 3 panteliselef May 15, 2025a094866 lock swr version panteliselef May 15, 2025d769723 delete user panteliselef May 15, 20251b71877 Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 2025f0d058a dedupe panteliselef May 15, 202598d7e94 Merge remote-tracking branch 'origin/elef/com-798-create-checkout' in… panteliselef May 15, 2025175ff64 Update .changeset/floppy-bananas-itch.md panteliselef May 15, 2025443be93 chore(clerk-js): Use SWR for commerce queries panteliselef May 15, 2025f504dda wip changeset panteliselef May 15, 20255bb68b5 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 15, 2025269d458 remove any useFetch for commerce panteliselef May 16, 202550ff538 Merge remote-tracking branch 'origin/elef/com-798-use-swr-for-queries… panteliselef May 16, 20256dcc0e4 load stripe once panteliselef May 16, 202556bdb7d Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 2025ad8ea86 update comments panteliselef May 16, 202572c06f8 use swr for initializing a payment resource panteliselef May 16, 2025ce46051 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 20251e8528d chore(clerk-js): Refactor CheckoutPage panteliselef May 16, 20254965e11 Update .changeset/cuddly-needles-say.md panteliselef May 19, 202554fcc79 chore(clerk-js): Use a single component panteliselef May 19, 20251c861c0 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 21, 202572418b7 fix merge conflict panteliselef May 21, 202581f0cef reset payment intent in stripe elements panteliselef May 21, 2025eedb76b Merge branch 'elef/com-798-use-swr-for-queries-commerce' into elef/re… panteliselef May 21, 2025105334f chore(clerk-js): Refactor CheckoutForm and AddPaymentSource panteliselef May 22, 202581553fc Merge branch 'refs/heads/main' into elef/refactor-checkout-form panteliselef May 28, 2025c396498 bump bundle panteliselef May 28, 20256a9f96d remove appearance from context panteliselef May 28, 202567365c1 improve splitting of logic and add a test panteliselef May 28, 20254e72e04 add changeset panteliselef May 28, 20250eee3ed Merge branch 'main' into elef/refactor-checkout-form panteliselef May 28, 2025085606f Merge branch 'main' into elef/refactor-checkout-form panteliselef Jun 2, 2025 File filter Filter by extension Filter by extension .json (1) .md (1) .ts (2) .tsx (6) All 4 file types selected Viewed files Clear filters Conversations Failed to load comments. Loading Uh oh! There was an error while loading. Please reload this page. Jump to Jump to file Failed to load files. Loading Uh oh! There was an error while loading. Please reload this page. Diff view Unified Split Hide whitespace Diff view Unified Split Hide whitespace .changeset/plenty-files-sit.md plenty-files-sit.md integration/tests/pricing-table.test.ts pricing-table.test.ts packages/clerk-js/bundlewatch.config.json bundlewatch.config.json packages/clerk-js/src/ui/common/DevOnly.tsx DevOnly.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx CheckoutForm.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx CheckoutPage.tsx packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx AddPaymentSource.tsx packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx PaymentSources.tsx packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx TestPaymentSource.tsx packages/testing/src/playwright/unstable/page-objects/checkout.ts checkout.ts There are no files selected for viewing 5 changes: 5 additions & 0 deletions 5 .changeset/plenty-files-sit.md Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,5 @@ --- '@clerk/testing': patch --- Update checkoutObject with `waitForStipeElements` method and `root` property. 35 changes: 35 additions & 0 deletions 35 integration/tests/pricing-table.test.ts Show comments View file Open in desktop Original file line number Diff line number Diff line change Expand Up @@ -248,5 +248,40 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await fakeUser.deleteIfExists(); }); test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({ page, context, }) => { const u = createTestUtils({ app, page, context }); const fakeUser = u.services.users.createFakeUser(); await u.services.users.createBapiUser(fakeUser); await u.po.signIn.goTo(); await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); await u.po.page.goToRelative('/user'); await u.po.userProfile.waitForMounted(); await u.po.userProfile.switchToBillingTab(); await u.po.page.getByRole('button', { name: 'Switch plans' }).click(); await u.po.pricingTable.startCheckout({ planSlug: 'pro', period: 'monthly' }); await u.po.checkout.waitForMounted(); await u.po.checkout.fillCard({ number: '4100000000000019', // fraud card - always declines expiration: '1234', cvc: '123', country: 'United States', zip: '12345', }); 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(); await u.po.checkout.fillTestCard(); await u.po.checkout.clickPayOrSubscribe(); await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible(); await fakeUser.deleteIfExists(); }); }); }); 6 changes: 3 additions & 3 deletions 6 packages/clerk-js/bundlewatch.config.json Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -1,6 +1,6 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "599kB" }, { "path": "./dist/clerk.js", "maxSize": "599.3kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "69KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" }, Expand All @@ -21,8 +21,8 @@ { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, { "path": "./dist/checkout*.js", "maxSize": "6.83KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" }, { "path": "./dist/checkout*.js", "maxSize": "7.1KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.09KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" } Expand Down 11 changes: 11 additions & 0 deletions 11 packages/clerk-js/src/ui/common/DevOnly.tsx Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,11 @@ import { useClerk } from '@clerk/shared/react/index'; import type { PropsWithChildren } from 'react'; export const DevOnly = ({ children }: PropsWithChildren) => { const clerk = useClerk(); if (clerk.instanceType !== 'development') { return null; } return children; }; Loading Oops, something went wrong. Uh oh! There was an error while loading. Please reload this page. Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later. Footer © 2026 GitHub, Inc. Footer navigation Terms Privacy Security Status Community Docs Contact You can’t perform that action at this time. , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Skip to contentNavigation Menu Sign inAppearance settings AI CODE CREATIONGitHub CopilotWrite better code with AI GitHub Copilot appDirect agents from issue to merge MCP RegistryIntegrate external tools DEVELOPER WORKFLOWSActionsAutomate any workflow CodespacesInstant dev environments IssuesPlan and track work Code ReviewManage code changes Code QualityEnforce quality at merge APPLICATION SECURITYGitHub Advanced SecurityFind and fix vulnerabilities Code securitySecure your code as you build Secret protectionStop leaks before they start EXPLOREWhy GitHub Documentation Blog Changelog Marketplace View all features BY COMPANY SIZEEnterprises Small and medium teams Startups Nonprofits BY USE CASEApp Modernization DevSecOps DevOps CI/CD View all use cases BY INDUSTRYHealthcare Financial services Manufacturing Government View all industries View all solutions EXPLORE BY TOPICAI Software Development DevOps Security View all topics EXPLORE BY TYPECustomer stories Events & webinars Ebooks & reports Business insights GitHub Skills SUPPORT & SERVICESDocumentation Customer support Community forum Trust center Partners View all resources COMMUNITYGitHub SponsorsFund open source developers PROGRAMSSecurity Lab Maintainer Community GitHub Stars Archive Program REPOSITORIESTopics Trending Collections ENTERPRISE SOLUTIONSEnterprise platformAI-powered developer platform AVAILABLE ADD-ONSGitHub Advanced SecurityEnterprise-grade security features Copilot for BusinessEnterprise-grade AI features Premium SupportEnterprise-grade 24/7 support Pricing Sign in Sign upAppearance settings You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert Uh oh! There was an error while loading. Please reload this page. clerk /javascriptPublic Notifications You must be signed in to change notification settings Fork 470 Star 1.7k Code Issues33 Pull requests107 Discussions Actions Security and quality5 Insights Additional navigation options Code Issues Pull requests Discussions Actions Security and quality Insights chore(clerk-js): Refactor CheckoutForm and AddPaymentSource#5980 New issue Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account Merged panteliselef merged 39 commits into main from elef/refactor-checkout-formJun 2, 2025 Conversation 3 Commits 39 Checks 0 Files changed Uh oh! There was an error while loading. Please reload this page. Merged chore(clerk-js): Refactor CheckoutForm and AddPaymentSource #5980 Show file tree Hide file tree Changes from all commits Commits Show all changes 39 commits Select commit Hold shift + click to select a range 907c32a fix(clerk-js): Invalidate checkout data on unmount panteliselef May 14, 2025b8d31fd Merge branch 'main' into elef/com-798-pre-work panteliselef May 14, 202591e6163 remove previous fix panteliselef May 14, 2025dd845e7 wip panteliselef May 15, 2025e89f157 wip 2 panteliselef May 15, 202526e90af Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 202585e06ee changeset panteliselef May 15, 202512e41e6 wip 3 panteliselef May 15, 2025a094866 lock swr version panteliselef May 15, 2025d769723 delete user panteliselef May 15, 20251b71877 Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 2025f0d058a dedupe panteliselef May 15, 202598d7e94 Merge remote-tracking branch 'origin/elef/com-798-create-checkout' in… panteliselef May 15, 2025175ff64 Update .changeset/floppy-bananas-itch.md panteliselef May 15, 2025443be93 chore(clerk-js): Use SWR for commerce queries panteliselef May 15, 2025f504dda wip changeset panteliselef May 15, 20255bb68b5 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 15, 2025269d458 remove any useFetch for commerce panteliselef May 16, 202550ff538 Merge remote-tracking branch 'origin/elef/com-798-use-swr-for-queries… panteliselef May 16, 20256dcc0e4 load stripe once panteliselef May 16, 202556bdb7d Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 2025ad8ea86 update comments panteliselef May 16, 202572c06f8 use swr for initializing a payment resource panteliselef May 16, 2025ce46051 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 20251e8528d chore(clerk-js): Refactor CheckoutPage panteliselef May 16, 20254965e11 Update .changeset/cuddly-needles-say.md panteliselef May 19, 202554fcc79 chore(clerk-js): Use a single component panteliselef May 19, 20251c861c0 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 21, 202572418b7 fix merge conflict panteliselef May 21, 202581f0cef reset payment intent in stripe elements panteliselef May 21, 2025eedb76b Merge branch 'elef/com-798-use-swr-for-queries-commerce' into elef/re… panteliselef May 21, 2025105334f chore(clerk-js): Refactor CheckoutForm and AddPaymentSource panteliselef May 22, 202581553fc Merge branch 'refs/heads/main' into elef/refactor-checkout-form panteliselef May 28, 2025c396498 bump bundle panteliselef May 28, 20256a9f96d remove appearance from context panteliselef May 28, 202567365c1 improve splitting of logic and add a test panteliselef May 28, 20254e72e04 add changeset panteliselef May 28, 20250eee3ed Merge branch 'main' into elef/refactor-checkout-form panteliselef May 28, 2025085606f Merge branch 'main' into elef/refactor-checkout-form panteliselef Jun 2, 2025 File filter Filter by extension Filter by extension .json (1) .md (1) .ts (2) .tsx (6) All 4 file types selected Viewed files Clear filters Conversations Failed to load comments. Loading Uh oh! There was an error while loading. Please reload this page. Jump to Jump to file Failed to load files. Loading Uh oh! There was an error while loading. Please reload this page. Diff view Unified Split Hide whitespace Diff view Unified Split Hide whitespace .changeset/plenty-files-sit.md plenty-files-sit.md integration/tests/pricing-table.test.ts pricing-table.test.ts packages/clerk-js/bundlewatch.config.json bundlewatch.config.json packages/clerk-js/src/ui/common/DevOnly.tsx DevOnly.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx CheckoutForm.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx CheckoutPage.tsx packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx AddPaymentSource.tsx packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx PaymentSources.tsx packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx TestPaymentSource.tsx packages/testing/src/playwright/unstable/page-objects/checkout.ts checkout.ts There are no files selected for viewing 5 changes: 5 additions & 0 deletions 5 .changeset/plenty-files-sit.md Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,5 @@ --- '@clerk/testing': patch --- Update checkoutObject with `waitForStipeElements` method and `root` property. 35 changes: 35 additions & 0 deletions 35 integration/tests/pricing-table.test.ts Show comments View file Open in desktop Original file line number Diff line number Diff line change Expand Up @@ -248,5 +248,40 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await fakeUser.deleteIfExists(); }); test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({ page, context, }) => { const u = createTestUtils({ app, page, context }); const fakeUser = u.services.users.createFakeUser(); await u.services.users.createBapiUser(fakeUser); await u.po.signIn.goTo(); await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); await u.po.page.goToRelative('/user'); await u.po.userProfile.waitForMounted(); await u.po.userProfile.switchToBillingTab(); await u.po.page.getByRole('button', { name: 'Switch plans' }).click(); await u.po.pricingTable.startCheckout({ planSlug: 'pro', period: 'monthly' }); await u.po.checkout.waitForMounted(); await u.po.checkout.fillCard({ number: '4100000000000019', // fraud card - always declines expiration: '1234', cvc: '123', country: 'United States', zip: '12345', }); 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(); await u.po.checkout.fillTestCard(); await u.po.checkout.clickPayOrSubscribe(); await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible(); await fakeUser.deleteIfExists(); }); }); }); 6 changes: 3 additions & 3 deletions 6 packages/clerk-js/bundlewatch.config.json Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -1,6 +1,6 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "599kB" }, { "path": "./dist/clerk.js", "maxSize": "599.3kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "69KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" }, Expand All @@ -21,8 +21,8 @@ { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, { "path": "./dist/checkout*.js", "maxSize": "6.83KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" }, { "path": "./dist/checkout*.js", "maxSize": "7.1KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.09KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" } Expand Down 11 changes: 11 additions & 0 deletions 11 packages/clerk-js/src/ui/common/DevOnly.tsx Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,11 @@ import { useClerk } from '@clerk/shared/react/index'; import type { PropsWithChildren } from 'react'; export const DevOnly = ({ children }: PropsWithChildren) => { const clerk = useClerk(); if (clerk.instanceType !== 'development') { return null; } return children; }; Loading Oops, something went wrong. Uh oh! There was an error while loading. Please reload this page. Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later. Footer © 2026 GitHub, Inc. Footer navigation Terms Privacy Security Status Community Docs Contact You can’t perform that action at this time. , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Skip to contentNavigation Menu Sign inAppearance settings AI CODE CREATIONGitHub CopilotWrite better code with AI GitHub Copilot appDirect agents from issue to merge MCP RegistryIntegrate external tools DEVELOPER WORKFLOWSActionsAutomate any workflow CodespacesInstant dev environments IssuesPlan and track work Code ReviewManage code changes Code QualityEnforce quality at merge APPLICATION SECURITYGitHub Advanced SecurityFind and fix vulnerabilities Code securitySecure your code as you build Secret protectionStop leaks before they start EXPLOREWhy GitHub Documentation Blog Changelog Marketplace View all features BY COMPANY SIZEEnterprises Small and medium teams Startups Nonprofits BY USE CASEApp Modernization DevSecOps DevOps CI/CD View all use cases BY INDUSTRYHealthcare Financial services Manufacturing Government View all industries View all solutions EXPLORE BY TOPICAI Software Development DevOps Security View all topics EXPLORE BY TYPECustomer stories Events & webinars Ebooks & reports Business insights GitHub Skills SUPPORT & SERVICESDocumentation Customer support Community forum Trust center Partners View all resources COMMUNITYGitHub SponsorsFund open source developers PROGRAMSSecurity Lab Maintainer Community GitHub Stars Archive Program REPOSITORIESTopics Trending Collections ENTERPRISE SOLUTIONSEnterprise platformAI-powered developer platform AVAILABLE ADD-ONSGitHub Advanced SecurityEnterprise-grade security features Copilot for BusinessEnterprise-grade AI features Premium SupportEnterprise-grade 24/7 support Pricing Sign in Sign upAppearance settings You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert Uh oh! There was an error while loading. Please reload this page. clerk /javascriptPublic Notifications You must be signed in to change notification settings Fork 470 Star 1.7k Code Issues33 Pull requests107 Discussions Actions Security and quality5 Insights Additional navigation options Code Issues Pull requests Discussions Actions Security and quality Insights chore(clerk-js): Refactor CheckoutForm and AddPaymentSource#5980 New issue Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account Merged panteliselef merged 39 commits into main from elef/refactor-checkout-formJun 2, 2025 Conversation 3 Commits 39 Checks 0 Files changed Uh oh! There was an error while loading. Please reload this page. Merged chore(clerk-js): Refactor CheckoutForm and AddPaymentSource #5980 Show file tree Hide file tree Changes from all commits Commits Show all changes 39 commits Select commit Hold shift + click to select a range 907c32a fix(clerk-js): Invalidate checkout data on unmount panteliselef May 14, 2025b8d31fd Merge branch 'main' into elef/com-798-pre-work panteliselef May 14, 202591e6163 remove previous fix panteliselef May 14, 2025dd845e7 wip panteliselef May 15, 2025e89f157 wip 2 panteliselef May 15, 202526e90af Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 202585e06ee changeset panteliselef May 15, 202512e41e6 wip 3 panteliselef May 15, 2025a094866 lock swr version panteliselef May 15, 2025d769723 delete user panteliselef May 15, 20251b71877 Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 2025f0d058a dedupe panteliselef May 15, 202598d7e94 Merge remote-tracking branch 'origin/elef/com-798-create-checkout' in… panteliselef May 15, 2025175ff64 Update .changeset/floppy-bananas-itch.md panteliselef May 15, 2025443be93 chore(clerk-js): Use SWR for commerce queries panteliselef May 15, 2025f504dda wip changeset panteliselef May 15, 20255bb68b5 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 15, 2025269d458 remove any useFetch for commerce panteliselef May 16, 202550ff538 Merge remote-tracking branch 'origin/elef/com-798-use-swr-for-queries… panteliselef May 16, 20256dcc0e4 load stripe once panteliselef May 16, 202556bdb7d Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 2025ad8ea86 update comments panteliselef May 16, 202572c06f8 use swr for initializing a payment resource panteliselef May 16, 2025ce46051 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 20251e8528d chore(clerk-js): Refactor CheckoutPage panteliselef May 16, 20254965e11 Update .changeset/cuddly-needles-say.md panteliselef May 19, 202554fcc79 chore(clerk-js): Use a single component panteliselef May 19, 20251c861c0 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 21, 202572418b7 fix merge conflict panteliselef May 21, 202581f0cef reset payment intent in stripe elements panteliselef May 21, 2025eedb76b Merge branch 'elef/com-798-use-swr-for-queries-commerce' into elef/re… panteliselef May 21, 2025105334f chore(clerk-js): Refactor CheckoutForm and AddPaymentSource panteliselef May 22, 202581553fc Merge branch 'refs/heads/main' into elef/refactor-checkout-form panteliselef May 28, 2025c396498 bump bundle panteliselef May 28, 20256a9f96d remove appearance from context panteliselef May 28, 202567365c1 improve splitting of logic and add a test panteliselef May 28, 20254e72e04 add changeset panteliselef May 28, 20250eee3ed Merge branch 'main' into elef/refactor-checkout-form panteliselef May 28, 2025085606f Merge branch 'main' into elef/refactor-checkout-form panteliselef Jun 2, 2025 File filter Filter by extension Filter by extension .json (1) .md (1) .ts (2) .tsx (6) All 4 file types selected Viewed files Clear filters Conversations Failed to load comments. Loading Uh oh! There was an error while loading. Please reload this page. Jump to Jump to file Failed to load files. Loading Uh oh! There was an error while loading. Please reload this page. Diff view Unified Split Hide whitespace Diff view Unified Split Hide whitespace .changeset/plenty-files-sit.md plenty-files-sit.md integration/tests/pricing-table.test.ts pricing-table.test.ts packages/clerk-js/bundlewatch.config.json bundlewatch.config.json packages/clerk-js/src/ui/common/DevOnly.tsx DevOnly.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx CheckoutForm.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx CheckoutPage.tsx packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx AddPaymentSource.tsx packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx PaymentSources.tsx packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx TestPaymentSource.tsx packages/testing/src/playwright/unstable/page-objects/checkout.ts checkout.ts There are no files selected for viewing 5 changes: 5 additions & 0 deletions 5 .changeset/plenty-files-sit.md Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,5 @@ --- '@clerk/testing': patch --- Update checkoutObject with `waitForStipeElements` method and `root` property. 35 changes: 35 additions & 0 deletions 35 integration/tests/pricing-table.test.ts Show comments View file Open in desktop Original file line number Diff line number Diff line change Expand Up @@ -248,5 +248,40 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await fakeUser.deleteIfExists(); }); test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({ page, context, }) => { const u = createTestUtils({ app, page, context }); const fakeUser = u.services.users.createFakeUser(); await u.services.users.createBapiUser(fakeUser); await u.po.signIn.goTo(); await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); await u.po.page.goToRelative('/user'); await u.po.userProfile.waitForMounted(); await u.po.userProfile.switchToBillingTab(); await u.po.page.getByRole('button', { name: 'Switch plans' }).click(); await u.po.pricingTable.startCheckout({ planSlug: 'pro', period: 'monthly' }); await u.po.checkout.waitForMounted(); await u.po.checkout.fillCard({ number: '4100000000000019', // fraud card - always declines expiration: '1234', cvc: '123', country: 'United States', zip: '12345', }); 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(); await u.po.checkout.fillTestCard(); await u.po.checkout.clickPayOrSubscribe(); await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible(); await fakeUser.deleteIfExists(); }); }); }); 6 changes: 3 additions & 3 deletions 6 packages/clerk-js/bundlewatch.config.json Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -1,6 +1,6 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "599kB" }, { "path": "./dist/clerk.js", "maxSize": "599.3kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "69KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" }, Expand All @@ -21,8 +21,8 @@ { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, { "path": "./dist/checkout*.js", "maxSize": "6.83KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" }, { "path": "./dist/checkout*.js", "maxSize": "7.1KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.09KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" } Expand Down 11 changes: 11 additions & 0 deletions 11 packages/clerk-js/src/ui/common/DevOnly.tsx Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,11 @@ import { useClerk } from '@clerk/shared/react/index'; import type { PropsWithChildren } from 'react'; export const DevOnly = ({ children }: PropsWithChildren) => { const clerk = useClerk(); if (clerk.instanceType !== 'development') { return null; } return children; }; Loading Oops, something went wrong. Uh oh! There was an error while loading. Please reload this page. Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later. Footer © 2026 GitHub, Inc. Footer navigation Terms Privacy Security Status Community Docs Contact You can’t perform that action at this time. , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Skip to contentNavigation Menu Sign inAppearance settings AI CODE CREATIONGitHub CopilotWrite better code with AI GitHub Copilot appDirect agents from issue to merge MCP RegistryIntegrate external tools DEVELOPER WORKFLOWSActionsAutomate any workflow CodespacesInstant dev environments IssuesPlan and track work Code ReviewManage code changes Code QualityEnforce quality at merge APPLICATION SECURITYGitHub Advanced SecurityFind and fix vulnerabilities Code securitySecure your code as you build Secret protectionStop leaks before they start EXPLOREWhy GitHub Documentation Blog Changelog Marketplace View all features BY COMPANY SIZEEnterprises Small and medium teams Startups Nonprofits BY USE CASEApp Modernization DevSecOps DevOps CI/CD View all use cases BY INDUSTRYHealthcare Financial services Manufacturing Government View all industries View all solutions EXPLORE BY TOPICAI Software Development DevOps Security View all topics EXPLORE BY TYPECustomer stories Events & webinars Ebooks & reports Business insights GitHub Skills SUPPORT & SERVICESDocumentation Customer support Community forum Trust center Partners View all resources COMMUNITYGitHub SponsorsFund open source developers PROGRAMSSecurity Lab Maintainer Community GitHub Stars Archive Program REPOSITORIESTopics Trending Collections ENTERPRISE SOLUTIONSEnterprise platformAI-powered developer platform AVAILABLE ADD-ONSGitHub Advanced SecurityEnterprise-grade security features Copilot for BusinessEnterprise-grade AI features Premium SupportEnterprise-grade 24/7 support Pricing Sign in Sign upAppearance settings You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert Uh oh! There was an error while loading. Please reload this page. clerk /javascriptPublic Notifications You must be signed in to change notification settings Fork 470 Star 1.7k Code Issues33 Pull requests107 Discussions Actions Security and quality5 Insights Additional navigation options Code Issues Pull requests Discussions Actions Security and quality Insights chore(clerk-js): Refactor CheckoutForm and AddPaymentSource#5980 New issue Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account Merged panteliselef merged 39 commits into main from elef/refactor-checkout-formJun 2, 2025 Conversation 3 Commits 39 Checks 0 Files changed Uh oh! There was an error while loading. Please reload this page. Merged chore(clerk-js): Refactor CheckoutForm and AddPaymentSource #5980 Show file tree Hide file tree Changes from all commits Commits Show all changes 39 commits Select commit Hold shift + click to select a range 907c32a fix(clerk-js): Invalidate checkout data on unmount panteliselef May 14, 2025b8d31fd Merge branch 'main' into elef/com-798-pre-work panteliselef May 14, 202591e6163 remove previous fix panteliselef May 14, 2025dd845e7 wip panteliselef May 15, 2025e89f157 wip 2 panteliselef May 15, 202526e90af Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 202585e06ee changeset panteliselef May 15, 202512e41e6 wip 3 panteliselef May 15, 2025a094866 lock swr version panteliselef May 15, 2025d769723 delete user panteliselef May 15, 20251b71877 Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 2025f0d058a dedupe panteliselef May 15, 202598d7e94 Merge remote-tracking branch 'origin/elef/com-798-create-checkout' in… panteliselef May 15, 2025175ff64 Update .changeset/floppy-bananas-itch.md panteliselef May 15, 2025443be93 chore(clerk-js): Use SWR for commerce queries panteliselef May 15, 2025f504dda wip changeset panteliselef May 15, 20255bb68b5 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 15, 2025269d458 remove any useFetch for commerce panteliselef May 16, 202550ff538 Merge remote-tracking branch 'origin/elef/com-798-use-swr-for-queries… panteliselef May 16, 20256dcc0e4 load stripe once panteliselef May 16, 202556bdb7d Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 2025ad8ea86 update comments panteliselef May 16, 202572c06f8 use swr for initializing a payment resource panteliselef May 16, 2025ce46051 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 20251e8528d chore(clerk-js): Refactor CheckoutPage panteliselef May 16, 20254965e11 Update .changeset/cuddly-needles-say.md panteliselef May 19, 202554fcc79 chore(clerk-js): Use a single component panteliselef May 19, 20251c861c0 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 21, 202572418b7 fix merge conflict panteliselef May 21, 202581f0cef reset payment intent in stripe elements panteliselef May 21, 2025eedb76b Merge branch 'elef/com-798-use-swr-for-queries-commerce' into elef/re… panteliselef May 21, 2025105334f chore(clerk-js): Refactor CheckoutForm and AddPaymentSource panteliselef May 22, 202581553fc Merge branch 'refs/heads/main' into elef/refactor-checkout-form panteliselef May 28, 2025c396498 bump bundle panteliselef May 28, 20256a9f96d remove appearance from context panteliselef May 28, 202567365c1 improve splitting of logic and add a test panteliselef May 28, 20254e72e04 add changeset panteliselef May 28, 20250eee3ed Merge branch 'main' into elef/refactor-checkout-form panteliselef May 28, 2025085606f Merge branch 'main' into elef/refactor-checkout-form panteliselef Jun 2, 2025 File filter Filter by extension Filter by extension .json (1) .md (1) .ts (2) .tsx (6) All 4 file types selected Viewed files Clear filters Conversations Failed to load comments. Loading Uh oh! There was an error while loading. Please reload this page. Jump to Jump to file Failed to load files. Loading Uh oh! There was an error while loading. Please reload this page. Diff view Unified Split Hide whitespace Diff view Unified Split Hide whitespace .changeset/plenty-files-sit.md plenty-files-sit.md integration/tests/pricing-table.test.ts pricing-table.test.ts packages/clerk-js/bundlewatch.config.json bundlewatch.config.json packages/clerk-js/src/ui/common/DevOnly.tsx DevOnly.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx CheckoutForm.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx CheckoutPage.tsx packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx AddPaymentSource.tsx packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx PaymentSources.tsx packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx TestPaymentSource.tsx packages/testing/src/playwright/unstable/page-objects/checkout.ts checkout.ts There are no files selected for viewing 5 changes: 5 additions & 0 deletions 5 .changeset/plenty-files-sit.md Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,5 @@ --- '@clerk/testing': patch --- Update checkoutObject with `waitForStipeElements` method and `root` property. 35 changes: 35 additions & 0 deletions 35 integration/tests/pricing-table.test.ts Show comments View file Open in desktop Original file line number Diff line number Diff line change Expand Up @@ -248,5 +248,40 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await fakeUser.deleteIfExists(); }); test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({ page, context, }) => { const u = createTestUtils({ app, page, context }); const fakeUser = u.services.users.createFakeUser(); await u.services.users.createBapiUser(fakeUser); await u.po.signIn.goTo(); await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); await u.po.page.goToRelative('/user'); await u.po.userProfile.waitForMounted(); await u.po.userProfile.switchToBillingTab(); await u.po.page.getByRole('button', { name: 'Switch plans' }).click(); await u.po.pricingTable.startCheckout({ planSlug: 'pro', period: 'monthly' }); await u.po.checkout.waitForMounted(); await u.po.checkout.fillCard({ number: '4100000000000019', // fraud card - always declines expiration: '1234', cvc: '123', country: 'United States', zip: '12345', }); 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(); await u.po.checkout.fillTestCard(); await u.po.checkout.clickPayOrSubscribe(); await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible(); await fakeUser.deleteIfExists(); }); }); }); 6 changes: 3 additions & 3 deletions 6 packages/clerk-js/bundlewatch.config.json Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -1,6 +1,6 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "599kB" }, { "path": "./dist/clerk.js", "maxSize": "599.3kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "69KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" }, Expand All @@ -21,8 +21,8 @@ { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, { "path": "./dist/checkout*.js", "maxSize": "6.83KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" }, { "path": "./dist/checkout*.js", "maxSize": "7.1KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.09KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" } Expand Down 11 changes: 11 additions & 0 deletions 11 packages/clerk-js/src/ui/common/DevOnly.tsx Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,11 @@ import { useClerk } from '@clerk/shared/react/index'; import type { PropsWithChildren } from 'react'; export const DevOnly = ({ children }: PropsWithChildren) => { const clerk = useClerk(); if (clerk.instanceType !== 'development') { return null; } return children; }; Loading Oops, something went wrong. Uh oh! There was an error while loading. Please reload this page. Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later. Footer © 2026 GitHub, Inc. Footer navigation Terms Privacy Security Status Community Docs Contact You can’t perform that action at this time. , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Skip to contentNavigation Menu Sign inAppearance settings AI CODE CREATIONGitHub CopilotWrite better code with AI GitHub Copilot appDirect agents from issue to merge MCP RegistryIntegrate external tools DEVELOPER WORKFLOWSActionsAutomate any workflow CodespacesInstant dev environments IssuesPlan and track work Code ReviewManage code changes Code QualityEnforce quality at merge APPLICATION SECURITYGitHub Advanced SecurityFind and fix vulnerabilities Code securitySecure your code as you build Secret protectionStop leaks before they start EXPLOREWhy GitHub Documentation Blog Changelog Marketplace View all features BY COMPANY SIZEEnterprises Small and medium teams Startups Nonprofits BY USE CASEApp Modernization DevSecOps DevOps CI/CD View all use cases BY INDUSTRYHealthcare Financial services Manufacturing Government View all industries View all solutions EXPLORE BY TOPICAI Software Development DevOps Security View all topics EXPLORE BY TYPECustomer stories Events & webinars Ebooks & reports Business insights GitHub Skills SUPPORT & SERVICESDocumentation Customer support Community forum Trust center Partners View all resources COMMUNITYGitHub SponsorsFund open source developers PROGRAMSSecurity Lab Maintainer Community GitHub Stars Archive Program REPOSITORIESTopics Trending Collections ENTERPRISE SOLUTIONSEnterprise platformAI-powered developer platform AVAILABLE ADD-ONSGitHub Advanced SecurityEnterprise-grade security features Copilot for BusinessEnterprise-grade AI features Premium SupportEnterprise-grade 24/7 support Pricing Sign in Sign upAppearance settings You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert Uh oh! There was an error while loading. Please reload this page. clerk /javascriptPublic Notifications You must be signed in to change notification settings Fork 470 Star 1.7k Code Issues33 Pull requests107 Discussions Actions Security and quality5 Insights Additional navigation options Code Issues Pull requests Discussions Actions Security and quality Insights chore(clerk-js): Refactor CheckoutForm and AddPaymentSource#5980 New issue Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account Merged panteliselef merged 39 commits into main from elef/refactor-checkout-formJun 2, 2025 Conversation 3 Commits 39 Checks 0 Files changed Uh oh! There was an error while loading. Please reload this page. Merged chore(clerk-js): Refactor CheckoutForm and AddPaymentSource #5980 Show file tree Hide file tree Changes from all commits Commits Show all changes 39 commits Select commit Hold shift + click to select a range 907c32a fix(clerk-js): Invalidate checkout data on unmount panteliselef May 14, 2025b8d31fd Merge branch 'main' into elef/com-798-pre-work panteliselef May 14, 202591e6163 remove previous fix panteliselef May 14, 2025dd845e7 wip panteliselef May 15, 2025e89f157 wip 2 panteliselef May 15, 202526e90af Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 202585e06ee changeset panteliselef May 15, 202512e41e6 wip 3 panteliselef May 15, 2025a094866 lock swr version panteliselef May 15, 2025d769723 delete user panteliselef May 15, 20251b71877 Merge branch 'main' into elef/com-798-create-checkout panteliselef May 15, 2025f0d058a dedupe panteliselef May 15, 202598d7e94 Merge remote-tracking branch 'origin/elef/com-798-create-checkout' in… panteliselef May 15, 2025175ff64 Update .changeset/floppy-bananas-itch.md panteliselef May 15, 2025443be93 chore(clerk-js): Use SWR for commerce queries panteliselef May 15, 2025f504dda wip changeset panteliselef May 15, 20255bb68b5 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 15, 2025269d458 remove any useFetch for commerce panteliselef May 16, 202550ff538 Merge remote-tracking branch 'origin/elef/com-798-use-swr-for-queries… panteliselef May 16, 20256dcc0e4 load stripe once panteliselef May 16, 202556bdb7d Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 2025ad8ea86 update comments panteliselef May 16, 202572c06f8 use swr for initializing a payment resource panteliselef May 16, 2025ce46051 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 16, 20251e8528d chore(clerk-js): Refactor CheckoutPage panteliselef May 16, 20254965e11 Update .changeset/cuddly-needles-say.md panteliselef May 19, 202554fcc79 chore(clerk-js): Use a single component panteliselef May 19, 20251c861c0 Merge branch 'main' into elef/com-798-use-swr-for-queries-commerce panteliselef May 21, 202572418b7 fix merge conflict panteliselef May 21, 202581f0cef reset payment intent in stripe elements panteliselef May 21, 2025eedb76b Merge branch 'elef/com-798-use-swr-for-queries-commerce' into elef/re… panteliselef May 21, 2025105334f chore(clerk-js): Refactor CheckoutForm and AddPaymentSource panteliselef May 22, 202581553fc Merge branch 'refs/heads/main' into elef/refactor-checkout-form panteliselef May 28, 2025c396498 bump bundle panteliselef May 28, 20256a9f96d remove appearance from context panteliselef May 28, 202567365c1 improve splitting of logic and add a test panteliselef May 28, 20254e72e04 add changeset panteliselef May 28, 20250eee3ed Merge branch 'main' into elef/refactor-checkout-form panteliselef May 28, 2025085606f Merge branch 'main' into elef/refactor-checkout-form panteliselef Jun 2, 2025 File filter Filter by extension Filter by extension .json (1) .md (1) .ts (2) .tsx (6) All 4 file types selected Viewed files Clear filters Conversations Failed to load comments. Loading Uh oh! There was an error while loading. Please reload this page. Jump to Jump to file Failed to load files. Loading Uh oh! There was an error while loading. Please reload this page. Diff view Unified Split Hide whitespace Diff view Unified Split Hide whitespace .changeset/plenty-files-sit.md plenty-files-sit.md integration/tests/pricing-table.test.ts pricing-table.test.ts packages/clerk-js/bundlewatch.config.json bundlewatch.config.json packages/clerk-js/src/ui/common/DevOnly.tsx DevOnly.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx CheckoutForm.tsx packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx CheckoutPage.tsx packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx AddPaymentSource.tsx packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx PaymentSources.tsx packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx TestPaymentSource.tsx packages/testing/src/playwright/unstable/page-objects/checkout.ts checkout.ts There are no files selected for viewing 5 changes: 5 additions & 0 deletions 5 .changeset/plenty-files-sit.md Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,5 @@ --- '@clerk/testing': patch --- Update checkoutObject with `waitForStipeElements` method and `root` property. 35 changes: 35 additions & 0 deletions 35 integration/tests/pricing-table.test.ts Show comments View file Open in desktop Original file line number Diff line number Diff line change Expand Up @@ -248,5 +248,40 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl await fakeUser.deleteIfExists(); }); test('adds payment source via checkout and resets stripe setup intent after failed payment', async ({ page, context, }) => { const u = createTestUtils({ app, page, context }); const fakeUser = u.services.users.createFakeUser(); await u.services.users.createBapiUser(fakeUser); await u.po.signIn.goTo(); await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); await u.po.page.goToRelative('/user'); await u.po.userProfile.waitForMounted(); await u.po.userProfile.switchToBillingTab(); await u.po.page.getByRole('button', { name: 'Switch plans' }).click(); await u.po.pricingTable.startCheckout({ planSlug: 'pro', period: 'monthly' }); await u.po.checkout.waitForMounted(); await u.po.checkout.fillCard({ number: '4100000000000019', // fraud card - always declines expiration: '1234', cvc: '123', country: 'United States', zip: '12345', }); 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(); await u.po.checkout.fillTestCard(); await u.po.checkout.clickPayOrSubscribe(); await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible(); await fakeUser.deleteIfExists(); }); }); }); 6 changes: 3 additions & 3 deletions 6 packages/clerk-js/bundlewatch.config.json Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -1,6 +1,6 @@ { "files": [ { "path": "./dist/clerk.js", "maxSize": "599kB" }, { "path": "./dist/clerk.js", "maxSize": "599.3kB" }, { "path": "./dist/clerk.browser.js", "maxSize": "69KB" }, { "path": "./dist/clerk.legacy.browser.js", "maxSize": "113KB" }, { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" }, Expand All @@ -21,8 +21,8 @@ { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" }, { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" }, { "path": "./dist/checkout*.js", "maxSize": "6.83KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" }, { "path": "./dist/checkout*.js", "maxSize": "7.1KB" }, { "path": "./dist/paymentSources*.js", "maxSize": "9.09KB" }, { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" }, { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" } Expand Down 11 changes: 11 additions & 0 deletions 11 packages/clerk-js/src/ui/common/DevOnly.tsx Show comments View file Open in desktop Original file line number Diff line number Diff line change @@ -0,0 +1,11 @@ import { useClerk } from '@clerk/shared/react/index'; import type { PropsWithChildren } from 'react'; export const DevOnly = ({ children }: PropsWithChildren) => { const clerk = useClerk(); if (clerk.instanceType !== 'development') { return null; } return children; }; Loading Oops, something went wrong. Uh oh! There was an error while loading. Please reload this page. Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later. Footer © 2026 GitHub, Inc. Footer navigation Terms Privacy Security Status Community Docs Contact You can’t perform that action at this time.