fix: prevent Stripe checkout popup blocking in default frontend

[stone16]

⚠️ 提交说明 / PR Notice

Important

• This description was organized specifically for this PR. The change was AI-assisted and manually reviewed and tested.

📝 变更描述 / Description

Stripe Checkout was opened with window.open(..., '_blank') only after the asynchronous Checkout Session request completed. At that point browsers such as mobile Safari may no longer consider the call part of the original user gesture and can block the new tab.

This change sends both Default UI Stripe entry points—the wallet top-up flow and subscription purchase flow—to Checkout in the active tab. It keeps the fix frontend-only and does not change Stripe customer IDs, database schema, or backend payment behavior.

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix) - 请关联对应 Issue，避免将设计取舍、理解偏差或预期不一致直接归类为 bug
• ✨ 新功能 (New feature) - 重大特性建议先通过 Issue 沟通
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

• Related to 修正 Stripe Checkout 在 Safari 被封鎖與 test/live customer id 混用問題 #4484
• This intentionally covers only the Default UI popup-blocking portion. fix: improve Stripe checkout handling #4477 also includes Classic UI and test/live Customer ID changes, while this PR contains no schema or backend changes.

✅ 提交前检查项 / Checklist

• 人工确认: This description was organized for this PR. The change was AI-assisted and manually reviewed and tested.
• 非重复提交: I searched existing Issues and PRs. fix: improve Stripe checkout handling #4477 has overlapping intent but a broader, currently conflicting scope; this PR isolates the Default UI navigation fix.
• Bug fix 说明: This PR is associated with 修正 Stripe Checkout 在 Safari 被封鎖與 test/live customer id 混用問題 #4484 and addresses the reported browser popup blocking behavior.
• 变更理解: The change replaces an asynchronous new-tab attempt with active-tab navigation after Stripe returns its hosted Checkout URL.
• 范围聚焦: The PR changes only the two Default UI Stripe entry points and their shared Stripe-specific navigation helper.
• 本地验证: Type checking, changed-code lint/format checks, and the production frontend build pass. The flow was also manually verified on a live deployment.
• 安全合规: No credentials or payment data are included in the code or this PR.

📸 运行证明 / Proof of Work

• cd web && bun run typecheck — passed
• cd web && bunx oxlint -c .oxlintrc.json src/features/wallet/hooks/use-payment.ts src/lib/stripe-checkout.ts — passed
• cd web && bunx oxfmt -c .oxfmtrc.json --check src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx src/features/wallet/hooks/use-payment.ts src/lib/stripe-checkout.ts — passed
• cd web && bun run build — passed
• Live manual verification: creating a Stripe Checkout Session navigated the top-level browser tab to Stripe Checkout and rendered the US$1.00 payment page. No payment was submitted.

Repository-wide baseline checks currently report unrelated pre-existing files:

• oxlint on the full subscription dialog: its unchanged EPay list at line 409 triggers unicorn(no-useless-spread)
• bun run format:check: channel-mutate-drawer.tsx, channel-form.ts, api-key-group-cell.tsx, and redemption-form.ts
• bun run copyright:check: oauth-callback-mode.ts, channel-field-update.ts, and model-categories.ts

Known boundary: this navigation targets the active browsing context. Deployments that intentionally embed the dashboard in a cross-origin iframe should open it as a top-level page before starting Stripe Checkout, because Stripe Checkout cannot render inside that iframe.

Summary by CodeRabbit

• New Features

  • Stripe payments now open in the current browser tab through a streamlined checkout redirect.
  • Added a “Redirecting to payment page…” notification while checkout loads.
  • Added confirmation feedback when the payment page opens.

• Bug Fixes

  • Improved payment navigation by avoiding separate browser tabs during Stripe checkout.
  • Simplified payment-method selection behavior in the purchase dialog.
  • Purchase dialogs now close after checkout begins.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 44507f4f-c93f-4d88-a6a0-278c7cf30138

📥 Commits

Reviewing files that changed from the base of the PR and between 34e2510 and 78a2513.

📒 Files selected for processing (1)

• web/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• web/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx

---

Walkthrough

Stripe payment flows now use a shared helper to redirect the active browser tab to Stripe Checkout. The subscription flow displays a redirect notification before navigation.

Changes

Stripe checkout navigation

Layer / File(s)	Summary
Add checkout redirect helper web/src/lib/stripe-checkout.ts	Adds redirectToStripeCheckout, which assigns the checkout URL to window.location.href.
Adopt redirect in payment flows web/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx, web/src/features/wallet/hooks/use-payment.ts	Subscription and wallet Stripe flows use the shared redirect helper. The subscription flow shows a redirect notification before navigation.

Estimated code review effort: 2 (Simple) | ~10 minutes

Poem

A rabbit hops where checkouts gleam,
Redirects guide the payment stream.
One active tab follows the way,
A toast appears before away.
Stripe now starts its journey bright,
With fewer tabs in sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: preventing Stripe Checkout popup blocking in the Default UI frontend.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}