From 408783ff2ddc043b1161ad39c6e93cfef2cccce7 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 24 Jul 2025 17:32:18 +0300 Subject: [PATCH 1/8] chore(shared): Improve layout swift in payment element fallback --- .changeset/fair-bars-agree.md | 5 +++++ packages/shared/src/react/commerce.tsx | 1 + packages/shared/src/react/stripe-react/index.tsx | 2 ++ 3 files changed, 8 insertions(+) create mode 100644 .changeset/fair-bars-agree.md diff --git a/.changeset/fair-bars-agree.md b/.changeset/fair-bars-agree.md new file mode 100644 index 00000000000..63de9f4c299 --- /dev/null +++ b/.changeset/fair-bars-agree.md @@ -0,0 +1,5 @@ +--- +'@clerk/shared': patch +--- + +wip diff --git a/packages/shared/src/react/commerce.tsx b/packages/shared/src/react/commerce.tsx index 4239585d108..8411dd762d3 100644 --- a/packages/shared/src/react/commerce.tsx +++ b/packages/shared/src/react/commerce.tsx @@ -206,6 +206,7 @@ const PaymentElementInternalRoot = (props: PropsWithChildren) => { key={externalClientSecret} stripe={stripe} options={{ + loader: 'never', clientSecret: externalClientSecret, appearance: { variables: stripeAppearance, diff --git a/packages/shared/src/react/stripe-react/index.tsx b/packages/shared/src/react/stripe-react/index.tsx index 722237d53c4..65a296d6d5d 100644 --- a/packages/shared/src/react/stripe-react/index.tsx +++ b/packages/shared/src/react/stripe-react/index.tsx @@ -429,6 +429,8 @@ const createElementComponent = (type: StripeElementType, isServer: boolean): Fun {!isReady && fallback}
From c32abbca9f3eac36c76c53f403f8245e877bd913 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 24 Jul 2025 17:42:25 +0300 Subject: [PATCH 2/8] hide the element --- packages/shared/src/react/stripe-react/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/shared/src/react/stripe-react/index.tsx b/packages/shared/src/react/stripe-react/index.tsx index 65a296d6d5d..9327ce6f89a 100644 --- a/packages/shared/src/react/stripe-react/index.tsx +++ b/packages/shared/src/react/stripe-react/index.tsx @@ -430,7 +430,10 @@ const createElementComponent = (type: StripeElementType, isServer: boolean): Fun
From 7cb7775eeefce293afcd9b650287b7676b72b932 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 24 Jul 2025 18:05:47 +0300 Subject: [PATCH 3/8] wip --- packages/shared/src/react/commerce.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/shared/src/react/commerce.tsx b/packages/shared/src/react/commerce.tsx index 8411dd762d3..4239585d108 100644 --- a/packages/shared/src/react/commerce.tsx +++ b/packages/shared/src/react/commerce.tsx @@ -206,7 +206,6 @@ const PaymentElementInternalRoot = (props: PropsWithChildren) => { key={externalClientSecret} stripe={stripe} options={{ - loader: 'never', clientSecret: externalClientSecret, appearance: { variables: stripeAppearance, From 5f454f285cf8d8c7d8ad265dc6c0c4711cbf4125 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 24 Jul 2025 18:15:32 +0300 Subject: [PATCH 4/8] Revert "wip" This reverts commit 7cb7775eeefce293afcd9b650287b7676b72b932. --- packages/shared/src/react/commerce.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/shared/src/react/commerce.tsx b/packages/shared/src/react/commerce.tsx index 4239585d108..8411dd762d3 100644 --- a/packages/shared/src/react/commerce.tsx +++ b/packages/shared/src/react/commerce.tsx @@ -206,6 +206,7 @@ const PaymentElementInternalRoot = (props: PropsWithChildren) => { key={externalClientSecret} stripe={stripe} options={{ + loader: 'never', clientSecret: externalClientSecret, appearance: { variables: stripeAppearance, From 0fcc947fea30644a3b3fbfeb6dd5b1ee8351d4d9 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 28 Jul 2025 12:04:33 +0300 Subject: [PATCH 5/8] Add skeleton to clerk-js --- .../PaymentSources/AddPaymentSource.tsx | 3 +- .../PaymentSources/PaymentElementSkeleton.tsx | 114 ++++++++++++++++++ 2 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 packages/clerk-js/src/ui/components/PaymentSources/PaymentElementSkeleton.tsx diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx index c6e04711752..cf91e1c8f7e 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx +++ b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx @@ -19,6 +19,7 @@ import { handleError } from '@/ui/utils/errorHandler'; import { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts'; import { descriptors, Flex, localizationKeys, Spinner, useAppearance, useLocalizations } from '../../customizables'; import type { LocalizationKey } from '../../localization'; +import { PaymentElementSkeleton } from './PaymentElementSkeleton'; const useStripeAppearance = (node: HTMLElement | null) => { const theme = useAppearance().parsedInternalTheme; @@ -231,7 +232,7 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => { })} > {children} - + } /> {card.error} [0]) => { + return ( + ({ + height: t.space.$2, + width: '100%', + borderRadius: t.radii.$md, + background: t.colors.$neutralAlpha100, + }), + props.sx, + ]} + /> + ); +}; + +const SkeletonInput = () => { + return ( + ({ + height: t.space.$10, + width: '100%', + })} + /> + ); +}; + +const LineGroup = (props: PropsWithChildren) => { + return ( + + {props.children} + + ); +}; + +const PaymentElementSkeleton = () => { + return ( + + + + ({ + height: t.space.$3, + width: t.sizes.$24, + })} + /> + + + + + + ({ + height: t.space.$3, + width: t.sizes.$20, + })} + /> + + + + + ({ + height: t.space.$3, + width: t.sizes.$24, + })} + /> + + + + + + + ({ + height: t.space.$3, + width: t.sizes.$16, + })} + /> + + + + + + + + + + + + ); +}; + +export { PaymentElementSkeleton }; From adec63e6902baf6a7c732b1042282619fa0327b5 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 28 Jul 2025 12:27:10 +0300 Subject: [PATCH 6/8] changesets --- .changeset/fair-bars-agree.md | 4 +++- .changeset/vast-hoops-teach.md | 5 +++++ 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/vast-hoops-teach.md diff --git a/.changeset/fair-bars-agree.md b/.changeset/fair-bars-agree.md index 63de9f4c299..3541756a911 100644 --- a/.changeset/fair-bars-agree.md +++ b/.changeset/fair-bars-agree.md @@ -2,4 +2,6 @@ '@clerk/shared': patch --- -wip + +Improve layout behaviour with ``. +- Disables Stripe's loader, and promotes the usage of the `fallback` prop. diff --git a/.changeset/vast-hoops-teach.md b/.changeset/vast-hoops-teach.md new file mode 100644 index 00000000000..e0b83a2caa0 --- /dev/null +++ b/.changeset/vast-hoops-teach.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Improve CLS when PaymentElement mounts in Checkout. From 17c49398232629667e9615cbfddd14c6e3f9e61b Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 28 Jul 2025 12:27:40 +0300 Subject: [PATCH 7/8] remove custom data attribute --- packages/shared/src/react/stripe-react/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/shared/src/react/stripe-react/index.tsx b/packages/shared/src/react/stripe-react/index.tsx index 9327ce6f89a..94006e3b21b 100644 --- a/packages/shared/src/react/stripe-react/index.tsx +++ b/packages/shared/src/react/stripe-react/index.tsx @@ -429,7 +429,6 @@ const createElementComponent = (type: StripeElementType, isServer: boolean): Fun {!isReady && fallback}
Date: Mon, 28 Jul 2025 19:30:57 +0300 Subject: [PATCH 8/8] add aria label --- .../src/ui/components/PaymentSources/PaymentElementSkeleton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentElementSkeleton.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentElementSkeleton.tsx index fa1611d727b..49a44c12c69 100644 --- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentElementSkeleton.tsx +++ b/packages/clerk-js/src/ui/components/PaymentSources/PaymentElementSkeleton.tsx @@ -43,6 +43,7 @@ const LineGroup = (props: PropsWithChildren) => { const PaymentElementSkeleton = () => { return (