How does it handle subscription trials?

It provides specific messaging guidelines and UI banner patterns for 'credit card upfront' trial models to ensure users are clearly informed of billing dates.

Does this skill help with PCI compliance?

Yes, by advocating for the use of Stripe's hosted Customer Portal for payment method updates, it helps developers minimize their PCI compliance burden.

What is the recommended approach for Stripe management UI?

The skill recommends a hybrid approach: using custom components to display subscription data for branding consistency, while redirecting to the Stripe Customer Portal for sensitive mutations like updating payment methods.

Can I use this with backend frameworks other than Convex?

While the examples use Convex, the logic for schema requirements, webhook handling, and API integration is applicable to any backend including Node.js, Python, or Go.

Stripe Subscription UX

Name: Stripe Subscription UX
Author: phrazzld

byphrazzld

•

전자상거래 솔루션

Implements high-quality user interfaces and best practices for Stripe subscription management and billing flows.

소개

This skill provides a comprehensive framework for building world-class subscription management experiences within Stripe integrations. It guides developers through essential UI requirements—including plan status, billing cycles, payment methods, and invoice history—while recommending a hybrid implementation approach that balances custom branding with the ease of the Stripe Customer Portal. By following these patterns, developers can ensure users never have questions about their billing status while maintaining a seamless, production-ready checkout and management workflow.

주요 기능

Hybrid implementation patterns combining custom UI with the Stripe Customer Portal
UX best practices for trial messaging, failed payments, and cancellation states
3 GitHub stars
Standardized UI requirements for plan status, billing cycles, and payment methods
Comprehensive verification checklist for billing UX completeness and compliance
Ready-to-use component structures for React, Next.js, and Convex integrations

사용 사례

Building a SaaS settings dashboard with self-service subscription management
Configuring the Stripe Customer Portal session logic for secure billing updates
Implementing backend schemas and webhooks to synchronize payment status

소개

주요 기능

Hybrid implementation patterns combining custom UI with the Stripe Customer Portal
UX best practices for trial messaging, failed payments, and cancellation states
3 GitHub stars
Standardized UI requirements for plan status, billing cycles, and payment methods
Comprehensive verification checklist for billing UX completeness and compliance
Ready-to-use component structures for React, Next.js, and Convex integrations

사용 사례

Building a SaaS settings dashboard with self-service subscription management
Configuring the Stripe Customer Portal session logic for secure billing updates
Implementing backend schemas and webhooks to synchronize payment status