Stripe Subscriptions with Coupons/Discounts using MERN (Node.js & React.js)

Share it with your friends Like

Thanks! Share it with your friends!

Close

STARTING CODE: https://github.com/keithweaver/MERN-boilerplate
YOUR STRIPE DASHBOARD: https://dashboard.stripe.com/
SUBSCRIPTIONS QUICKSTART: https://stripe.com/docs/subscriptions/quickstart
DISCOUNT DOCS: https://stripe.com/docs/subscriptions/discounts
CREATE CUSTOMER FULL API: https://stripe.com/docs/api#create_customer
REACT STRIPE ELEMENTS: https://github.com/stripe/react-stripe-elements
STRIPE ELEMENTS QUICKSTART: https://stripe.com/docs/stripe-js/elements/quickstart
STRIPE NODE SDK: https://github.com/stripe/stripe-node
GITHUB FETCH DOCS: https://github.com/github/fetch

In this video, I show you how to setup a subscription plan for your website and provide users with the ability to use coupons.

Support the channel by buying a t-shirt:
Keith, the Coder: https://teespring.com/keith-the-coder-iconon-left#pid=2&cid=2122&sid=front
Programmer: https://teespring.com/programmer-organism-software#pid=2&cid=2397&sid=back

Equipment:
Canon T5i – http://amzn.to/2vOS61Y
New Headphones – http://amzn.to/2zDTucs
Old Headphones – http://amzn.to/2tpRthn

Please subscribe!
Check me out:
Contact here: https://earn.com/keithweaver/
My email: me@keithweaver.ca
Web: http://keithweaver.ca
Twitter: https://twitter.com/keithweaver_
Github: https://github.com/keithweaver
Instagram #1: https://www.instagram.com/keiththecoder/
Instagram #2: https://www.instagram.com/keithweaver_/
Product Hunt: https://www.producthunt.com/@kweaver0

Comments

Ahmed Musawir says:

is this code somewhere in Github? … I went your GitHub page and cannot find it …

Ahmed Musawir says:

Bro, you need to show the result of your code as you are dumping on the page from time to time … otherwise, this is as good as reading some documentation … why make a video? Plz, learn from other screen casts …

Deadeye says:

So what do you prefer Node or PHP for this kind of stuff?

Jonathan Greene says:

Hello Keith, I am struggling to understand how you find that token, so i had stripe implemented in my project but without subscriptions. Now i am switching to a subscription model and would like to know if you have a better way of explaining how to grab the source? Currently I have a post coming from the backend and am calling customer create from there. It is indeed creating a customer but i am unsure of how to grab that customers Id/source so i can subscribe them to a plan. Any help is greatly appreciated. Let me know if you need more explanation or need the github repo to see my current code? Thx 😀

Albert Mars says:

hey keith can you do a tutorial on how to user stripe with firebase cloud functions and react?

brent marquez says:

Does anyone else find styling the stripe elements frustrating? I can't seem to find a good tutorial or example of styling the elements in a react app using react-stripe-elements. The docs are moderately helpful. If I start trying to improve the style of the default <CardElement />, I lose certain parts of the form like the VISA logo, etc. It appears there is a .StripeElement class you can access (to set a border for ex.) in addition and separately in a css file from the builtin classes using a styles object (like base, invalid, etc.). It all seems very discombobulated.

I've tried implementing the basic Checkout element without using react-stripe-elements and even that is frustrating as validation seems to be broken on it when I try manually loading the checkout element in publicindex.html as a script tag (like the docs say to do).
There are many tutorials on using stripe with a basic setup or just skeletal integration, but I'm having trouble finding examples of more real world integrations to help me out, particularly with examples of styling and validating the forms (for instance when using the elements instead of the checkout form package).

If anyone can point me in the right direction, I'd appreciate it. Thanks for the video as well.

Juandres Yepes Narvaez says:

You are the best.

SogMosee says:

also you can use an inline ternary to check if coupon is null:
coupon: coupon ? coupon : null

great video and thanks for all your tutorials!!!

SogMosee says:

toLowerCase() and trim() can be concanated like so: plan.toLowerCase().trim()

Write a comment

*