fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP#6754

coderabbitai · 2025-09-11T15:09:31Z

💡 Verification agent
🧩 Analysis chain
Avoid “dead-end” checkout when RHC is disabled and there are no payment sources.
With __BUILD_DISABLE_RHC__ true, state initializes to 'existing'. If paymentSources.length === 0, users can't add a method and the submit path will likely fail (empty payment_source_id). Provide an empty-state/fallback or disable the submit path.
Minimal in-scope guard (render a localized notice instead of a broken form):
- const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>- paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',- );+ const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>+ (paymentSources.length > 0 || __BUILD_DISABLE_RHC__) ? 'existing' : 'new',+ );
And adjust rendering (below, see 231–239 diff) to show an empty-state when __BUILD_DISABLE_RHC__ && paymentSources.length === 0.
Additionally, make paymentSourceId optional on submit so free-trial/zero-due flows don’t break:
// outside changed range: lines 162–171constpayWithExistingPaymentSource=(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault();constdata=newFormData(e.currentTarget);constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {},);};
If ConfirmCheckoutParams requires a discriminator, please confirm and adapt accordingly.
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"FILE: $target"echo"---- full file (numbered) ----" nl -ba "$target"| sed -n '1,400p'echo"---- context lines 160-260 ----" nl -ba "$target"| sed -n '160,260p'echo"---- repo-wide grep for related symbols ----" rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||true
Length of output: 140
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"=== head (1-240) ===" sed -n '1,240p'"$target"echoecho"=== context (160-260) ===" sed -n '160,260p'"$target"echoecho"=== repo-wide search for related symbols ==="ifcommand -v rg >/dev/null 2>&1;then rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||trueelse grep -nR --exclude-dir=node_modules -E "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource".||truefi
Length of output: 28472
Fix dead-end checkout when RHC is disabled and no payment sources
Render an explicit empty-state / disable submit when BUILD_DISABLE_RHC && paymentSources.length === 0 so users aren’t stuck on the “existing” path. (packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx — CheckoutFormElements; state init ~lines 193–195; segmented-control/rendering ~lines 207–239)
Make payWithExistingPaymentSource tolerate a missing payment_source_id before calling confirm:
constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {});
(location: payWithExistingPaymentSource, ~lines 162–171). ConfirmCheckoutParams accepts optional fields; passing {} is safe.
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx around lines 193–195 and the segmented-control/rendering block ~207–239, currently state initializes paymentMethodSource to "existing" when __BUILD_DISABLE_RHC__ is true even if paymentSources.length === 0 which leads to a dead-end; change the render path to show an explicit empty state or disable the submit control when __BUILD_DISABLE_RHC__ && paymentSources.length === 0 so users cannot select the non-existent "existing" path (update the JSX for CheckoutFormElements to render a disabled submit or an empty-state message and prevent choosing the existing option). Also update payWithExistingPaymentSource (~lines 162–171) to tolerate a missing payment_source_id by reading it as string | null and calling confirmCheckout with an empty object when absent (i.e., if paymentSourceId is present pass { paymentSourceId } else pass {}), since ConfirmCheckoutParams accepts optional fields.

panteliselef · 2025-09-15T14:16:34Z

I consider introducing a <RHCSafe/> component but this impacts dead code elimination negatively.

coderabbitai · 2025-09-11T15:09:31Z

💡 Verification agent
🧩 Analysis chain
Avoid “dead-end” checkout when RHC is disabled and there are no payment sources.
With __BUILD_DISABLE_RHC__ true, state initializes to 'existing'. If paymentSources.length === 0, users can't add a method and the submit path will likely fail (empty payment_source_id). Provide an empty-state/fallback or disable the submit path.
Minimal in-scope guard (render a localized notice instead of a broken form):
- const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>- paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',- );+ const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>+ (paymentSources.length > 0 || __BUILD_DISABLE_RHC__) ? 'existing' : 'new',+ );
And adjust rendering (below, see 231–239 diff) to show an empty-state when __BUILD_DISABLE_RHC__ && paymentSources.length === 0.
Additionally, make paymentSourceId optional on submit so free-trial/zero-due flows don’t break:
// outside changed range: lines 162–171constpayWithExistingPaymentSource=(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault();constdata=newFormData(e.currentTarget);constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {},);};
If ConfirmCheckoutParams requires a discriminator, please confirm and adapt accordingly.
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"FILE: $target"echo"---- full file (numbered) ----" nl -ba "$target"| sed -n '1,400p'echo"---- context lines 160-260 ----" nl -ba "$target"| sed -n '160,260p'echo"---- repo-wide grep for related symbols ----" rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||true
Length of output: 140
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"=== head (1-240) ===" sed -n '1,240p'"$target"echoecho"=== context (160-260) ===" sed -n '160,260p'"$target"echoecho"=== repo-wide search for related symbols ==="ifcommand -v rg >/dev/null 2>&1;then rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||trueelse grep -nR --exclude-dir=node_modules -E "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource".||truefi
Length of output: 28472
Fix dead-end checkout when RHC is disabled and no payment sources
Render an explicit empty-state / disable submit when BUILD_DISABLE_RHC && paymentSources.length === 0 so users aren’t stuck on the “existing” path. (packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx — CheckoutFormElements; state init ~lines 193–195; segmented-control/rendering ~lines 207–239)
Make payWithExistingPaymentSource tolerate a missing payment_source_id before calling confirm:
constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {});
(location: payWithExistingPaymentSource, ~lines 162–171). ConfirmCheckoutParams accepts optional fields; passing {} is safe.
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx around lines 193–195 and the segmented-control/rendering block ~207–239, currently state initializes paymentMethodSource to "existing" when __BUILD_DISABLE_RHC__ is true even if paymentSources.length === 0 which leads to a dead-end; change the render path to show an explicit empty state or disable the submit control when __BUILD_DISABLE_RHC__ && paymentSources.length === 0 so users cannot select the non-existent "existing" path (update the JSX for CheckoutFormElements to render a disabled submit or an empty-state message and prevent choosing the existing option). Also update payWithExistingPaymentSource (~lines 162–171) to tolerate a missing payment_source_id by reading it as string | null and calling confirmCheckout with an empty object when absent (i.e., if paymentSourceId is present pass { paymentSourceId } else pass {}), since ConfirmCheckoutParams accepts optional fields.

panteliselef · 2025-09-15T14:16:34Z

I consider introducing a <RHCSafe/> component but this impacts dead code elimination negatively.

coderabbitai · 2025-09-11T15:09:31Z

💡 Verification agent
🧩 Analysis chain
Avoid “dead-end” checkout when RHC is disabled and there are no payment sources.
With __BUILD_DISABLE_RHC__ true, state initializes to 'existing'. If paymentSources.length === 0, users can't add a method and the submit path will likely fail (empty payment_source_id). Provide an empty-state/fallback or disable the submit path.
Minimal in-scope guard (render a localized notice instead of a broken form):
- const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>- paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',- );+ const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>+ (paymentSources.length > 0 || __BUILD_DISABLE_RHC__) ? 'existing' : 'new',+ );
And adjust rendering (below, see 231–239 diff) to show an empty-state when __BUILD_DISABLE_RHC__ && paymentSources.length === 0.
Additionally, make paymentSourceId optional on submit so free-trial/zero-due flows don’t break:
// outside changed range: lines 162–171constpayWithExistingPaymentSource=(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault();constdata=newFormData(e.currentTarget);constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {},);};
If ConfirmCheckoutParams requires a discriminator, please confirm and adapt accordingly.
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"FILE: $target"echo"---- full file (numbered) ----" nl -ba "$target"| sed -n '1,400p'echo"---- context lines 160-260 ----" nl -ba "$target"| sed -n '160,260p'echo"---- repo-wide grep for related symbols ----" rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||true
Length of output: 140
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"=== head (1-240) ===" sed -n '1,240p'"$target"echoecho"=== context (160-260) ===" sed -n '160,260p'"$target"echoecho"=== repo-wide search for related symbols ==="ifcommand -v rg >/dev/null 2>&1;then rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||trueelse grep -nR --exclude-dir=node_modules -E "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource".||truefi
Length of output: 28472
Fix dead-end checkout when RHC is disabled and no payment sources
Render an explicit empty-state / disable submit when BUILD_DISABLE_RHC && paymentSources.length === 0 so users aren’t stuck on the “existing” path. (packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx — CheckoutFormElements; state init ~lines 193–195; segmented-control/rendering ~lines 207–239)
Make payWithExistingPaymentSource tolerate a missing payment_source_id before calling confirm:
constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {});
(location: payWithExistingPaymentSource, ~lines 162–171). ConfirmCheckoutParams accepts optional fields; passing {} is safe.
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx around lines 193–195 and the segmented-control/rendering block ~207–239, currently state initializes paymentMethodSource to "existing" when __BUILD_DISABLE_RHC__ is true even if paymentSources.length === 0 which leads to a dead-end; change the render path to show an explicit empty state or disable the submit control when __BUILD_DISABLE_RHC__ && paymentSources.length === 0 so users cannot select the non-existent "existing" path (update the JSX for CheckoutFormElements to render a disabled submit or an empty-state message and prevent choosing the existing option). Also update payWithExistingPaymentSource (~lines 162–171) to tolerate a missing payment_source_id by reading it as string | null and calling confirmCheckout with an empty object when absent (i.e., if paymentSourceId is present pass { paymentSourceId } else pass {}), since ConfirmCheckoutParams accepts optional fields.

panteliselef · 2025-09-15T14:16:34Z

I consider introducing a <RHCSafe/> component but this impacts dead code elimination negatively.

coderabbitai · 2025-09-11T15:09:31Z

💡 Verification agent
🧩 Analysis chain
Avoid “dead-end” checkout when RHC is disabled and there are no payment sources.
With __BUILD_DISABLE_RHC__ true, state initializes to 'existing'. If paymentSources.length === 0, users can't add a method and the submit path will likely fail (empty payment_source_id). Provide an empty-state/fallback or disable the submit path.
Minimal in-scope guard (render a localized notice instead of a broken form):
- const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>- paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',- );+ const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>+ (paymentSources.length > 0 || __BUILD_DISABLE_RHC__) ? 'existing' : 'new',+ );
And adjust rendering (below, see 231–239 diff) to show an empty-state when __BUILD_DISABLE_RHC__ && paymentSources.length === 0.
Additionally, make paymentSourceId optional on submit so free-trial/zero-due flows don’t break:
// outside changed range: lines 162–171constpayWithExistingPaymentSource=(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault();constdata=newFormData(e.currentTarget);constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {},);};
If ConfirmCheckoutParams requires a discriminator, please confirm and adapt accordingly.
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"FILE: $target"echo"---- full file (numbered) ----" nl -ba "$target"| sed -n '1,400p'echo"---- context lines 160-260 ----" nl -ba "$target"| sed -n '160,260p'echo"---- repo-wide grep for related symbols ----" rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||true
Length of output: 140
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"=== head (1-240) ===" sed -n '1,240p'"$target"echoecho"=== context (160-260) ===" sed -n '160,260p'"$target"echoecho"=== repo-wide search for related symbols ==="ifcommand -v rg >/dev/null 2>&1;then rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||trueelse grep -nR --exclude-dir=node_modules -E "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource".||truefi
Length of output: 28472
Fix dead-end checkout when RHC is disabled and no payment sources
Render an explicit empty-state / disable submit when BUILD_DISABLE_RHC && paymentSources.length === 0 so users aren’t stuck on the “existing” path. (packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx — CheckoutFormElements; state init ~lines 193–195; segmented-control/rendering ~lines 207–239)
Make payWithExistingPaymentSource tolerate a missing payment_source_id before calling confirm:
constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {});
(location: payWithExistingPaymentSource, ~lines 162–171). ConfirmCheckoutParams accepts optional fields; passing {} is safe.
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx around lines 193–195 and the segmented-control/rendering block ~207–239, currently state initializes paymentMethodSource to "existing" when __BUILD_DISABLE_RHC__ is true even if paymentSources.length === 0 which leads to a dead-end; change the render path to show an explicit empty state or disable the submit control when __BUILD_DISABLE_RHC__ && paymentSources.length === 0 so users cannot select the non-existent "existing" path (update the JSX for CheckoutFormElements to render a disabled submit or an empty-state message and prevent choosing the existing option). Also update payWithExistingPaymentSource (~lines 162–171) to tolerate a missing payment_source_id by reading it as string | null and calling confirmCheckout with an empty object when absent (i.e., if paymentSourceId is present pass { paymentSourceId } else pass {}), since ConfirmCheckoutParams accepts optional fields.

panteliselef · 2025-09-15T14:16:34Z

I consider introducing a <RHCSafe/> component but this impacts dead code elimination negatively.

coderabbitai · 2025-09-11T15:09:31Z

💡 Verification agent
🧩 Analysis chain
Avoid “dead-end” checkout when RHC is disabled and there are no payment sources.
With __BUILD_DISABLE_RHC__ true, state initializes to 'existing'. If paymentSources.length === 0, users can't add a method and the submit path will likely fail (empty payment_source_id). Provide an empty-state/fallback or disable the submit path.
Minimal in-scope guard (render a localized notice instead of a broken form):
- const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>- paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',- );+ const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>+ (paymentSources.length > 0 || __BUILD_DISABLE_RHC__) ? 'existing' : 'new',+ );
And adjust rendering (below, see 231–239 diff) to show an empty-state when __BUILD_DISABLE_RHC__ && paymentSources.length === 0.
Additionally, make paymentSourceId optional on submit so free-trial/zero-due flows don’t break:
// outside changed range: lines 162–171constpayWithExistingPaymentSource=(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault();constdata=newFormData(e.currentTarget);constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {},);};
If ConfirmCheckoutParams requires a discriminator, please confirm and adapt accordingly.
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"FILE: $target"echo"---- full file (numbered) ----" nl -ba "$target"| sed -n '1,400p'echo"---- context lines 160-260 ----" nl -ba "$target"| sed -n '160,260p'echo"---- repo-wide grep for related symbols ----" rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||true
Length of output: 140
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"=== head (1-240) ===" sed -n '1,240p'"$target"echoecho"=== context (160-260) ===" sed -n '160,260p'"$target"echoecho"=== repo-wide search for related symbols ==="ifcommand -v rg >/dev/null 2>&1;then rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||trueelse grep -nR --exclude-dir=node_modules -E "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource".||truefi
Length of output: 28472
Fix dead-end checkout when RHC is disabled and no payment sources
Render an explicit empty-state / disable submit when BUILD_DISABLE_RHC && paymentSources.length === 0 so users aren’t stuck on the “existing” path. (packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx — CheckoutFormElements; state init ~lines 193–195; segmented-control/rendering ~lines 207–239)
Make payWithExistingPaymentSource tolerate a missing payment_source_id before calling confirm:
constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {});
(location: payWithExistingPaymentSource, ~lines 162–171). ConfirmCheckoutParams accepts optional fields; passing {} is safe.
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx around lines 193–195 and the segmented-control/rendering block ~207–239, currently state initializes paymentMethodSource to "existing" when __BUILD_DISABLE_RHC__ is true even if paymentSources.length === 0 which leads to a dead-end; change the render path to show an explicit empty state or disable the submit control when __BUILD_DISABLE_RHC__ && paymentSources.length === 0 so users cannot select the non-existent "existing" path (update the JSX for CheckoutFormElements to render a disabled submit or an empty-state message and prevent choosing the existing option). Also update payWithExistingPaymentSource (~lines 162–171) to tolerate a missing payment_source_id by reading it as string | null and calling confirmCheckout with an empty object when absent (i.e., if paymentSourceId is present pass { paymentSourceId } else pass {}), since ConfirmCheckoutParams accepts optional fields.

panteliselef · 2025-09-15T14:16:34Z

I consider introducing a <RHCSafe/> component but this impacts dead code elimination negatively.

coderabbitai · 2025-09-11T15:09:31Z

💡 Verification agent
🧩 Analysis chain
Avoid “dead-end” checkout when RHC is disabled and there are no payment sources.
With __BUILD_DISABLE_RHC__ true, state initializes to 'existing'. If paymentSources.length === 0, users can't add a method and the submit path will likely fail (empty payment_source_id). Provide an empty-state/fallback or disable the submit path.
Minimal in-scope guard (render a localized notice instead of a broken form):
- const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>- paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',- );+ const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>+ (paymentSources.length > 0 || __BUILD_DISABLE_RHC__) ? 'existing' : 'new',+ );
And adjust rendering (below, see 231–239 diff) to show an empty-state when __BUILD_DISABLE_RHC__ && paymentSources.length === 0.
Additionally, make paymentSourceId optional on submit so free-trial/zero-due flows don’t break:
// outside changed range: lines 162–171constpayWithExistingPaymentSource=(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault();constdata=newFormData(e.currentTarget);constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {},);};
If ConfirmCheckoutParams requires a discriminator, please confirm and adapt accordingly.
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"FILE: $target"echo"---- full file (numbered) ----" nl -ba "$target"| sed -n '1,400p'echo"---- context lines 160-260 ----" nl -ba "$target"| sed -n '160,260p'echo"---- repo-wide grep for related symbols ----" rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||true
Length of output: 140
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"=== head (1-240) ===" sed -n '1,240p'"$target"echoecho"=== context (160-260) ===" sed -n '160,260p'"$target"echoecho"=== repo-wide search for related symbols ==="ifcommand -v rg >/dev/null 2>&1;then rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||trueelse grep -nR --exclude-dir=node_modules -E "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource".||truefi
Length of output: 28472
Fix dead-end checkout when RHC is disabled and no payment sources
Render an explicit empty-state / disable submit when BUILD_DISABLE_RHC && paymentSources.length === 0 so users aren’t stuck on the “existing” path. (packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx — CheckoutFormElements; state init ~lines 193–195; segmented-control/rendering ~lines 207–239)
Make payWithExistingPaymentSource tolerate a missing payment_source_id before calling confirm:
constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {});
(location: payWithExistingPaymentSource, ~lines 162–171). ConfirmCheckoutParams accepts optional fields; passing {} is safe.
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx around lines 193–195 and the segmented-control/rendering block ~207–239, currently state initializes paymentMethodSource to "existing" when __BUILD_DISABLE_RHC__ is true even if paymentSources.length === 0 which leads to a dead-end; change the render path to show an explicit empty state or disable the submit control when __BUILD_DISABLE_RHC__ && paymentSources.length === 0 so users cannot select the non-existent "existing" path (update the JSX for CheckoutFormElements to render a disabled submit or an empty-state message and prevent choosing the existing option). Also update payWithExistingPaymentSource (~lines 162–171) to tolerate a missing payment_source_id by reading it as string | null and calling confirmCheckout with an empty object when absent (i.e., if paymentSourceId is present pass { paymentSourceId } else pass {}), since ConfirmCheckoutParams accepts optional fields.

panteliselef · 2025-09-15T14:16:34Z

I consider introducing a <RHCSafe/> component but this impacts dead code elimination negatively.

coderabbitai · 2025-09-11T15:09:31Z

💡 Verification agent
🧩 Analysis chain
Avoid “dead-end” checkout when RHC is disabled and there are no payment sources.
With __BUILD_DISABLE_RHC__ true, state initializes to 'existing'. If paymentSources.length === 0, users can't add a method and the submit path will likely fail (empty payment_source_id). Provide an empty-state/fallback or disable the submit path.
Minimal in-scope guard (render a localized notice instead of a broken form):
- const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>- paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',- );+ const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>+ (paymentSources.length > 0 || __BUILD_DISABLE_RHC__) ? 'existing' : 'new',+ );
And adjust rendering (below, see 231–239 diff) to show an empty-state when __BUILD_DISABLE_RHC__ && paymentSources.length === 0.
Additionally, make paymentSourceId optional on submit so free-trial/zero-due flows don’t break:
// outside changed range: lines 162–171constpayWithExistingPaymentSource=(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault();constdata=newFormData(e.currentTarget);constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {},);};
If ConfirmCheckoutParams requires a discriminator, please confirm and adapt accordingly.
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"FILE: $target"echo"---- full file (numbered) ----" nl -ba "$target"| sed -n '1,400p'echo"---- context lines 160-260 ----" nl -ba "$target"| sed -n '160,260p'echo"---- repo-wide grep for related symbols ----" rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||true
Length of output: 140
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"=== head (1-240) ===" sed -n '1,240p'"$target"echoecho"=== context (160-260) ===" sed -n '160,260p'"$target"echoecho"=== repo-wide search for related symbols ==="ifcommand -v rg >/dev/null 2>&1;then rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||trueelse grep -nR --exclude-dir=node_modules -E "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource".||truefi
Length of output: 28472
Fix dead-end checkout when RHC is disabled and no payment sources
Render an explicit empty-state / disable submit when BUILD_DISABLE_RHC && paymentSources.length === 0 so users aren’t stuck on the “existing” path. (packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx — CheckoutFormElements; state init ~lines 193–195; segmented-control/rendering ~lines 207–239)
Make payWithExistingPaymentSource tolerate a missing payment_source_id before calling confirm:
constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {});
(location: payWithExistingPaymentSource, ~lines 162–171). ConfirmCheckoutParams accepts optional fields; passing {} is safe.
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx around lines 193–195 and the segmented-control/rendering block ~207–239, currently state initializes paymentMethodSource to "existing" when __BUILD_DISABLE_RHC__ is true even if paymentSources.length === 0 which leads to a dead-end; change the render path to show an explicit empty state or disable the submit control when __BUILD_DISABLE_RHC__ && paymentSources.length === 0 so users cannot select the non-existent "existing" path (update the JSX for CheckoutFormElements to render a disabled submit or an empty-state message and prevent choosing the existing option). Also update payWithExistingPaymentSource (~lines 162–171) to tolerate a missing payment_source_id by reading it as string | null and calling confirmCheckout with an empty object when absent (i.e., if paymentSourceId is present pass { paymentSourceId } else pass {}), since ConfirmCheckoutParams accepts optional fields.

panteliselef · 2025-09-15T14:16:34Z

I consider introducing a <RHCSafe/> component but this impacts dead code elimination negatively.

coderabbitai · 2025-09-11T15:09:31Z

💡 Verification agent
🧩 Analysis chain
Avoid “dead-end” checkout when RHC is disabled and there are no payment sources.
With __BUILD_DISABLE_RHC__ true, state initializes to 'existing'. If paymentSources.length === 0, users can't add a method and the submit path will likely fail (empty payment_source_id). Provide an empty-state/fallback or disable the submit path.
Minimal in-scope guard (render a localized notice instead of a broken form):
- const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>- paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',- );+ const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>+ (paymentSources.length > 0 || __BUILD_DISABLE_RHC__) ? 'existing' : 'new',+ );
And adjust rendering (below, see 231–239 diff) to show an empty-state when __BUILD_DISABLE_RHC__ && paymentSources.length === 0.
Additionally, make paymentSourceId optional on submit so free-trial/zero-due flows don’t break:
// outside changed range: lines 162–171constpayWithExistingPaymentSource=(e: React.FormEvent<HTMLFormElement>)=>{e.preventDefault();constdata=newFormData(e.currentTarget);constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {},);};
If ConfirmCheckoutParams requires a discriminator, please confirm and adapt accordingly.
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"FILE: $target"echo"---- full file (numbered) ----" nl -ba "$target"| sed -n '1,400p'echo"---- context lines 160-260 ----" nl -ba "$target"| sed -n '160,260p'echo"---- repo-wide grep for related symbols ----" rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||true
Length of output: 140
🏁 Script executed:
#!/bin/bashset -euo pipefail target="packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx"if [ !-f"$target" ];thenecho"MISSING: $target"exit 0 fiecho"=== head (1-240) ===" sed -n '1,240p'"$target"echoecho"=== context (160-260) ===" sed -n '160,260p'"$target"echoecho"=== repo-wide search for related symbols ==="ifcommand -v rg >/dev/null 2>&1;then rg -n "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource"||trueelse grep -nR --exclude-dir=node_modules -E "__BUILD_DISABLE_RHC__|paymentSources|payment_source_id|confirmCheckout|ConfirmCheckoutParams|payWithExistingPaymentSource".||truefi
Length of output: 28472
Fix dead-end checkout when RHC is disabled and no payment sources
Render an explicit empty-state / disable submit when BUILD_DISABLE_RHC && paymentSources.length === 0 so users aren’t stuck on the “existing” path. (packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx — CheckoutFormElements; state init ~lines 193–195; segmented-control/rendering ~lines 207–239)
Make payWithExistingPaymentSource tolerate a missing payment_source_id before calling confirm:
constpaymentSourceId=data.get('payment_source_id')asstring|null;returnconfirmCheckout(paymentSourceId ? { paymentSourceId } : {});
(location: payWithExistingPaymentSource, ~lines 162–171). ConfirmCheckoutParams accepts optional fields; passing {} is safe.
🤖 Prompt for AI Agents
In packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx around lines 193–195 and the segmented-control/rendering block ~207–239, currently state initializes paymentMethodSource to "existing" when __BUILD_DISABLE_RHC__ is true even if paymentSources.length === 0 which leads to a dead-end; change the render path to show an explicit empty state or disable the submit control when __BUILD_DISABLE_RHC__ && paymentSources.length === 0 so users cannot select the non-existent "existing" path (update the JSX for CheckoutFormElements to render a disabled submit or an empty-state message and prevent choosing the existing option). Also update payWithExistingPaymentSource (~lines 162–171) to tolerate a missing payment_source_id by reading it as string | null and calling confirmCheckout with an empty object when absent (i.e., if paymentSourceId is present pass { paymentSourceId } else pass {}), since ConfirmCheckoutParams accepts optional fields.

panteliselef · 2025-09-15T14:16:34Z

I consider introducing a <RHCSafe/> component but this impacts dead code elimination negatively.

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/chrome-extension': patch
+---
+Hide flows inside UserProfile and OrganizationProfile that depend on Stripe.js when remotely hosted code is not permitted.

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,7 @@ const config = { @@
  __PKG_NAME__: '@clerk/clerk-js',
  __PKG_VERSION__: 'test',
  __BUILD_VARIANT_CHIPS__: false,
+ __BUILD_DISABLE_RHC__: false,
  },
  testEnvironment: '<rootDir>/jest.jsdom-with-timezone.ts',
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -191,7 +191,7 @@ const CheckoutFormElements = () => { @@
  const { data: paymentSources } = usePaymentMethods();
  const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>
- paymentSources.length > 0 ? 'existing' : 'new',
+ paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',
  );
  if (!id) {
@@ Expand All / @@ -204,24 +204,28 @@ const CheckoutFormElements = () => { @@
  gap={4}
  sx={t => ({ padding: t.space.$4 })}
  >
- {/* only show if there are payment sources and there is a total due now */}
- {paymentSources.length > 0 && (totals.totalDueNow.amount > 0 || !!freeTrialEndsAt) && (
- <SegmentedControl.Root
- aria-label='Payment method source'
- value={paymentMethodSource}
- onChange={value => setPaymentMethodSource(value as PaymentMethodSource)}
- size='lg'
- fullWidth
- >
- <SegmentedControl.Button
- value='existing'
- text={localizationKeys('commerce.paymentMethods')}
- />
- <SegmentedControl.Button
- value='new'
- text={localizationKeys('commerce.addPaymentMethod')}
- />
- </SegmentedControl.Root>
+ {__BUILD_DISABLE_RHC__ ? null : (
+ <>
+ {/* only show if there are payment sources and there is a total due now */}
+ {paymentSources.length > 0 && (totals.totalDueNow.amount > 0 || !!freeTrialEndsAt) && (
+ <SegmentedControl.Root
+ aria-label='Payment method source'
+ value={paymentMethodSource}
+ onChange={value => setPaymentMethodSource(value as PaymentMethodSource)}
+ size='lg'
+ fullWidth
+ >
+ <SegmentedControl.Button
+ value='existing'
+ text={localizationKeys('commerce.paymentMethods')}
+ />
+ <SegmentedControl.Button
+ value='new'
+ text={localizationKeys('commerce.addPaymentMethod')}
+ />
+ </SegmentedControl.Root>
+ )}
+ </>
  )}
  {paymentMethodSource === 'existing' && (
@@ Expand All / @@ -231,7 +235,7 @@ const CheckoutFormElements = () => { @@
  />
  )}
- {paymentMethodSource === 'new' && <AddPaymentSourceForCheckout />}
+ {__BUILD_DISABLE_RHC__ ? null : paymentMethodSource === 'new' && <AddPaymentSourceForCheckout />}
  </Col>
  );
 };
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
  return null;
  }
+ if (__BUILD_DISABLE_RHC__ && sortedPaymentSources.length === 0) {
+ return null;
+ }
  return (
  <ProfileSection.Root
  title={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.title`)}
@@ Expand DownExpand Up @@
  </Action.Open>
  </Fragment>
  ))}
- <Action.Trigger value='add'>
- <ProfileSection.ArrowButton
- id='paymentSources'
- localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
- />
- </Action.Trigger>
- <Action.Open value='add'>
- <Action.Card>
- <AddScreen onSuccess={revalidatePaymentMethods} />
- </Action.Card>
- </Action.Open>
+ {__BUILD_DISABLE_RHC__ ? null : (
+ <>
+ <Action.Trigger value='add'>
+ <ProfileSection.ArrowButton
+ id='paymentSources'
+ localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentSourcesSection.add`)}
+ />
+ </Action.Trigger>
+ <Action.Open value='add'>
+ <Action.Card>
+ <AddScreen onSuccess={revalidatePaymentMethods} />
+ </Action.Card>
+ </Action.Open>
+ </>
+ )}
  </>
  )}
  </ProfileSection.ItemList>
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/chrome-extension': patch
+---
+Hide flows inside UserProfile and OrganizationProfile that depend on Stripe.js when remotely hosted code is not permitted.

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP#6754

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP #6754

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitaiBotSep 11, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselefSep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP#6754

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP #6754

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitaiBotSep 11, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselefSep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP#6754

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP #6754

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitaiBotSep 11, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselefSep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP#6754

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP #6754

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitaiBotSep 11, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselefSep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP#6754

Uh oh!

fix(clerk-js, chrome-extension): Hide stripe.js dependant flows from UP and OP #6754

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitaiBotSep 11, 2025

Choose a reason for hiding this comment

Uh oh!