Adding Products to Stripe
Let's create a product inside Stripe, so that our users can upgrade their accounts to become Premium Users.
Do not add products before your extension is done installing and the webhook is setup.
Adding a product calls the webhook, so if you add a product before it's done your product will not show up until you update it.
Back at the Stripe Dashboard, click on Products, and Add Product.
Enter the name of your product (something like "Premium Plan") and an optional description of the product.
Beneath that, open up the additional options section, and add a metadata field called firebaseRole with the value of premium.
This value will be attached to the user inside Firebase as a custom claim on the user.
This allows us to quickly see if a user is a premium customer or a free customer within the Firebase User itself. You can also extend your firebase rules to restrict access on the server-side, based on this custom claim.
The default SubscriptionCard components I wrote, really expect Two products, but you should customize it to fit your requirements.
NOTE My SubscriptionCard components also expect additional metadata for the products. You may want to skip this if you plan to customize how you display your products.
I add a buttonText metadata for the text on the purchase button and a popular metadata, to define if a product is popular or not (string of true or false)
Adjusting the Features Map
Finally, once your products are added you need to adjust the SubscriptionCard component's featuresMap.
// ./src/components/subscription/SubscriptionCard.tsx
const featuresMap: any = {
"Basic Plan": ["Feature 1", "Feature 2", "Feature 3"],
"Premium Plan": ["Feature 1", "Feature 2", "Feature 3", "Feature 4"],
};Adjust the plan names to match your product plan names exactly, and add the features you'd like to display on the Subscription card.