No Justice. No Peace. #BlackLivesMatter

Blog:Product Subscriptions with React, Stripe & Node

Manny Becerra as a child

November 2017

Note: Since this post's original write-up, I've updated the full-fledged subscription feature code, demo-ed below, to leverage React Hooks and Next.js's framework API routes improvements. Naturally, I'll continue to make make improvements as things progress.

If you're looking to offer users a secure way to purchase your products using a custom, online store solution, my initial recommendation would be to look into a combined technological package that consists of at least Stripe, React, and Node.js.

Demo

The following is an animated GIF that demos a full-fledged, custom, subscription UI/X feature I created that leverages all three of these — Stripe, React, and Node.js — among a few other things, such as MongoDb, SendGrid for email communications, and a custom design system for UI/X consistency.

Overview of Tech Stack

Stripe effectively allows you to tap into their well-documented API so you can create and manage customers and products, along with pricing plans (that can be based on metered usage and trial periods). There's quite a bit more that Stripe offers developers and product leaders, like invoicing, and it doesn't seem like their list of enhancements is stopping anytime soon.

React is my go-to for creating interactive user interfaces. I've really enjoyed using it for the last 2-years or so. React's not only good for creating rich, user-friendly F/E solutions for your users, it also lends itself in creating a more positive developer experience, which is invaluable, especially when working with others on a digital product.

Note: the demo uses my test sandbox data in Stripe. When you're ready to go 'live', it's a straightforward 1-2-3 process to copy your test data to a production environment.

Node.js is great for creating server-side solutions, such as an in-house API architecture, like I created for the above full-fledged subscription payment feature. In our case, and although Stripe has its own API that we can tap into, we also need (or benefit from) our own API solution that does several things, like, 1) acts as our primary entry-point from the frontend UI/X (app) to "talk" to Stripe, 2) gives us the ability to save and update our customer and product data in our own database solution (e.g. MongoDb), and much more.


If you're exploring the best way to create a custom order flow of the sorts, like offering your users a way to securely subscribe to your product, or make a single purchase, definitely give the tech stack I outlined above a consideration—they're a powerful combination. As always, I'm happy to connect with folks to talk through things if it's helpful, and I'd love to hear from others on what stack they're using for building order and purchase flows.

Manny


I am human, a father, and a problem solver: a tech and people leader with a passion and proven track-record in building and leading compassionate, productive teams—remote and on-site—within a continuous learning culture. My teams and I champion usable, inclusive digital products and online experiences. My work, passion and intentions also intersect with advising small businesses and political campaigns, life-long learning, outdoor advocacy, community building, and uplifting others. Learn more about Manny