Improve payments modal

[ItzNotABug]

What does this PR do?

1. Reset Stripe state on modal open
2. Fix Enter hits on State picker closing modal and reopen causing invalid Stripe state

Test Plan

Manual.

Related PRs and Issues

N/A.

Have you read the Contributing Guidelines on issues?

Yes.

Summary by CodeRabbit

• New Features

  • Added state collection for US card transactions in the payment modal.

• Improvements

  • Enhanced payment modal accessibility with improved backdrop and keyboard behavior handling.
  • Strengthened payment element cleanup and state management for more reliable payment processing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL

Tip

Dynamic API keys are generated automatically for each function execution

[coderabbitai]

Walkthrough

This pull request refactors the payment modal system to replace event dispatcher patterns with callback-based props. The primary component paymentModal.svelte introduces an onCardSubmit callback prop and adds lifecycle cleanup via onDestroy(unmountPaymentElement). The fakeModal.svelte component receives a new skipEnterOnBackdrop prop to control keyboard accessibility behavior. The Stripe store adds robust cleanup logic to unmountPaymentElement() for proper state management. Related components (selectPaymentMethod.svelte, paymentMethods.svelte) are updated to work with the new callback-driven interface instead of event emissions. Minor refinements include initializing the error variable and removing a TODO comment.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Stripe cleanup logic in stripe.ts: Verify the try/catch error handling in unmountPaymentElement() properly cleans up payment elements without side effects
• Event-to-callback refactoring chain: Trace the pattern changes through paymentModal.svelte → selectPaymentMethod.svelte → paymentMethods.svelte to ensure data flow remains consistent
• Accessibility changes in fakeModal.svelte: Review the new skipEnterOnBackdrop logic and keyboard event handling for unintended accessibility regressions
• State management synchronization: Verify that showState logic in paymentModal.svelte properly coordinates with the new callback pattern and backdrop behavior
• Lifecycle cleanup interactions: Confirm that onDestroy(unmountPaymentElement) pairs correctly with component mounting and doesn't conflict with existing Stripe element lifecycle

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check	❓ Inconclusive	The title 'Improve payments modal' is too vague and generic. While it relates to the payment modal changes, it does not clearly convey the specific improvements made (Stripe state reset, Enter key handling fix).	Consider a more descriptive title such as 'Reset Stripe state and fix state picker Enter key handling in payment modal' to better reflect the specific issues being addressed.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch improve-payment-modal

---

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 and usage tips.}