✨ fix: Improve subscription payment handling and card layout consistency

[t0ng7u]

Unify Epay subscription response format with top-up flow, and harden frontend error handling to avoid object-to-string issues. Refine subscription plan cards layout to be wider, left-aligned, and visually consistent across breakpoints.

Summary by CodeRabbit

• Bug Fixes

  • Improved payment error message handling and consistency across payment methods.

• Style

  • Enhanced responsive layout for subscription plan cards with improved grid structure.
  • Refined card content organization and alignment for better readability.
  • Adjusted spacing and button positioning for improved user experience.

[coderabbitai]

Walkthrough

Changes to payment API response formatting in the backend subscription module, alongside frontend normalization of payment error handling across Stripe, Creem, and Epay methods. UI layout improvements to the subscription plans card component for better responsive grid alignment and card structuring. Minor formatting adjustments to filter functions in the render helper.

Changes

Cohort / File(s)	Summary
Backend Payment Response controller/subscription_payment_epay.go	Modified API success response to include explicit "message": "success" field alongside "data" and "url" fields, changing response structure from common.ApiSuccess pattern to direct JSON response.
Frontend Payment Error Handling web/src/components/topup/SubscriptionPlansCard.jsx, web/src/components/topup/index.jsx	Standardized error message extraction across payment methods (Stripe, Creem, Epay) to guard against non-string data by checking if res.data.data is a string before using it, with fallback to res.data?.message or localized "支付失败" string.
UI Layout & Card Structure web/src/components/topup/SubscriptionPlansCard.jsx	Expanded responsive grid from single columns to grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3; restructured card wrapper with flex layout (p-4 h-full flex flex-col); pushed purchase button to bottom using mt-auto; adjusted alignment from center to start/left in multiple sections; added full-width and height constraints.
Formatting Cleanup web/src/helpers/render.jsx	Reformatted filter arrow functions in getModelCategories (gemini, moonshot, zhipu, minimax, cohere, mistral) with no logic changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• 新增 creem 支付 #1823: Adds Creem payment endpoint integration on the backend, directly related to the frontend Creem payment error handling normalization in this PR.

Suggested reviewers

• seefs001

Poem

🐰 A payment response takes a new form,
Error messages now gracefully transform,
Cards reshape with flex and with grace,
Grids align in their perfect place!
One little formatting pass, clean and bright—
The topup flow now feels just right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title describes the main changes: improving subscription payment handling (Epay response format and error handling) and card layout consistency. It accurately reflects the primary objectives of the PR.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 fix/subscription-epay

---

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.}