Day 6 - Adding a button for users to manage their subscription in VannaCharm

This post is part of the 'The 12 Days of Full Stack Dev' series, an adventure through full stack fintech app development. Join me through the first 12 days of December as we develop a variety of new features, fixes, and components within the Full Stack Craft fintech family. For the full list of days and topics in this series, see the original post: The 12 Days of Full Stack Dev.

Manage Subscription Button

In the push to get VannaCharm launched, I missed a small but important feature - a "manage subscription" button on the account page that links to Stripe's built-in customer portal for managing subscriptions. This is super important, as it allows users to update their payment methods, change plans, or cancel their subscriptions without needing to contact support.

This can be done pretty easily in Stripe's GUI, simply go to Settings -> Billing -> Customer portal, and enable it. Stripe gives you a link you can add to your site:

After that, it's just about adding a link to our account page:

<a href="https://billing.stripe.com/p/login/00w6oA951akgd2HgXpbfO00" className="block w-full text-left border border-gray-400 dark:border-gray-600 px-6 py-3 rounded-lg font-medium hover:border-gray-300 dark:hover:border-gray-400 transition-colors text-black dark:text-white">
Manage Subscription →
</a>