├── .gitignore
├── README.md
├── api
└── stripe-functions.js
├── app.js
├── package.json
├── styles
├── adminView.css
├── app.css
└── customerView.css
├── utils
└── format-numbers.js
├── views
├── adminView.html
├── base.html
├── createPlan.html
├── createProduct.html
├── customerView.html
└── signUp.html
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | /node_modules
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # stripe-recurring-subscriptions
2 |
3 | ## Important Note 📌
4 |
5 | An updated version of this codebase is available here: [stripe-subscriptions-sca](https://github.com/code-nebula/stripe-subscriptions-sca)
6 |
7 | The updated version shows you how to set up recurring subscriptions that support SCA (Strong Customer Authentication).
8 |
9 | We recommend checking out the following tutorials, which complement the new codebase:
10 |
11 | 🌟[How to Set up a Basic Node Application with Stripe](https://codenebula.io/node.js/stripe/2020/03/03/how-to-set-up-a-basic-node-application-with-stripe/)
12 |
13 | 🌟[How to use Stripe’s new Payment Intents API with Node.js to create subscriptions with built-in SCA](https://codenebula.io/node.js/stripe/sca/2020/03/03/how-to-use-stripes-new-payment-intents-api-with-node-js-to-create-subscriptions-with-built-in-sca/)
14 |
15 |
16 | ## Overview
17 |
18 | This repository shows you how to create recurring subscriptions with Stripe and Node.js.
19 |
20 | It uses Express for creating a simple server, Nunjucks for templating, and the Stripe API.
21 |
22 | It features
23 |
24 | 1. An **Admin View** when you can create Stripe Products and Plans via the Stripe API.
25 | 2. A **Client View** where your users can view and pay for your subscription plans.
26 |
27 |
28 | ## Demo Video
29 |
30 | 
31 |
32 |
33 | ## Tutorial
34 |
35 | We’ve written a detailed, 3-part tutorial about this code on the :star2: CodeNebula blog:
36 | [Creating Monthly Recurring Subscriptions in Stripe using Node.js](https://codenebula.io/stripe/node.js/2019/04/11/creating-monthly-recurring-subscriptions-in-stripe-using-node-js-part-1/)
37 |
38 |
39 | ## Instructions
40 |
41 | 1. Clone this repository
42 | 2. Run `npm install` to install all dependencies
43 | 3. Create a `.env` file to house your Stripe Secret Key (this repo includes `.env` in its `.gitignore`)
44 | 4. In the `.env` file, set your secret key as STRIPE_API_KEY (`STRIPE_API_KEY="sk_test_************************"`)
45 | 5. In the Javascript section of the `views/signUp.html` file, replace `var stripe = Stripe("pk_test_************************")` with your Stripe Publishable Key
46 | 6. Run the app via `npm start`
47 | 7. Navigate to [localhost:3000](localhost:3000)
48 |
--------------------------------------------------------------------------------
/api/stripe-functions.js:
--------------------------------------------------------------------------------
1 | /* Server Side -- Stripe API calls */
2 | require('dotenv').config();
3 | const stripe = require('stripe')(process.env.STRIPE_API_KEY);
4 | const UTILS = require('../utils/format-numbers.js');
5 |
6 | function getAllProductsAndPlans() {
7 | return Promise.all(
8 | [
9 | stripe.products.list({}),
10 | stripe.plans.list({})
11 | ]
12 | ).then(stripeData => {
13 | var products = stripeData[0].data;
14 | var plans = stripeData[1].data;
15 |
16 | plans = plans.sort((a, b) => {
17 | /* Sort plans in ascending order of price (amount)
18 | * Ref: https://www.w3schools.com/js/js_array_sort.asp */
19 | return a.amount - b.amount;
20 | }).map(plan => {
21 | /* Format plan price (amount) */
22 | amount = UTILS.formatUSD(plan.amount)
23 | return {...plan, amount};
24 | });
25 |
26 | products.forEach(product => {
27 | const filteredPlans = plans.filter(plan => {
28 | return plan.product === product.id;
29 | });
30 |
31 | product.plans = filteredPlans;
32 | });
33 |
34 | return products;
35 | });
36 | }
37 |
38 |
39 | function createProduct(requestBody) {
40 | return stripe.products.create({
41 | name: requestBody.productName,
42 | type: 'service'
43 | });
44 | }
45 |
46 |
47 | function createPlan(requestBody) {
48 | return stripe.plans.create({
49 | nickname: requestBody.planName,
50 | amount: UTILS.formatStripeAmount(requestBody.planAmount),
51 | interval: requestBody.planInterval,
52 | interval_count: parseInt(requestBody.planIntervalNumber),
53 | product: requestBody.productId,
54 | currency: 'USD'
55 | });
56 | }
57 |
58 |
59 | function createCustomerAndSubscription(requestBody) {
60 | return stripe.customers.create({
61 | source: requestBody.stripeToken,
62 | email: requestBody.customerEmail
63 | }).then(customer => {
64 | stripe.subscriptions.create({
65 | customer: customer.id,
66 | items: [
67 | {
68 | plan: requestBody.planId
69 | }
70 | ]
71 | });
72 | });
73 | }
74 |
75 |
76 | module.exports = {
77 | getAllProductsAndPlans,
78 | createProduct,
79 | createPlan,
80 | createCustomerAndSubscription
81 | };
82 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const bodyParser = require('body-parser');
3 | const nunjucks = require('nunjucks');
4 |
5 | const app = express();
6 | const port = 3000;
7 | const router = express.Router();
8 |
9 | const STRIPE_API = require('./api/stripe-functions.js');
10 |
11 |
12 | /* Set up Express to serve HTML files using "res.render" with help of Nunjucks */
13 | app.set('view engine', 'html');
14 | app.engine('html', nunjucks.render);
15 | nunjucks.configure('views', { noCache: true });
16 |
17 | app.use(express.static(__dirname));
18 | app.use('/styles', express.static('styles'));
19 | app.use(bodyParser());
20 | app.use('/', router);
21 |
22 |
23 | /* Place all routes here */
24 | router.get('/', (req, res) => {
25 | STRIPE_API.getAllProductsAndPlans().then(products => {
26 | res.render('adminView.html', {products: products});
27 | });
28 | });
29 |
30 |
31 | /* Create Product */
32 | router.get('/createProduct', (req, res) => {
33 | res.render('createProduct.html');
34 | });
35 |
36 |
37 | router.post('/createProduct', (req, res) => {
38 | STRIPE_API.createProduct(req.body).then(() => {
39 | res.render('createProduct.html', { success: true });
40 | });
41 | });
42 |
43 |
44 | /* Create Plan */
45 | router.post('/createPlan', (req, res) => {
46 | res.render('createPlan.html', {
47 | productId: req.body.productId,
48 | productName: req.body.productName
49 | });
50 | });
51 |
52 |
53 | router.post('/createPlanForReal', (req, res) => {
54 | STRIPE_API.createPlan(req.body).then(() => {
55 | res.render('createPlan.html', { success: true });
56 | });
57 | });
58 |
59 | router.get('/customerView', (req, res) => {
60 | STRIPE_API.getAllProductsAndPlans().then(products => {
61 | products = products.filter(product => {
62 | return product.plans.length > 0;
63 | });
64 |
65 | res.render('customerView.html', {products: products});
66 | });
67 | });
68 |
69 |
70 | router.post('/signUp', (req, res) => {
71 | var product = {
72 | name: req.body.productName
73 | };
74 |
75 | var plan = {
76 | id: req.body.planId,
77 | name: req.body.planName,
78 | amount: req.body.planAmount,
79 | interval: req.body.planInterval,
80 | interval_count: req.body.planIntervalCount
81 | }
82 |
83 | res.render('signUp.html', {product: product, plan: plan});
84 | });
85 |
86 |
87 | router.post('/processPayment', (req, res) => {
88 | var product = {
89 | name: req.body.productName
90 | };
91 |
92 | var plan = {
93 | id: req.body.planId,
94 | name: req.body.planName,
95 | amount: req.body.planAmount,
96 | interval: req.body.planInterval,
97 | interval_count: req.body.planIntervalCount
98 | }
99 |
100 | STRIPE_API.createCustomerAndSubscription(req.body).then(() => {
101 | res.render('signup.html', {product: product, plan: plan, success: true});
102 | }).catch(err => {
103 | res.render('signup.html', {product: product, plan: plan, error: true});
104 | });
105 | });
106 |
107 |
108 | /* Start listening on specified port */
109 | app.listen(port, () => {
110 | console.info('Example app listening on port', port)
111 | });
112 |
113 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "stripe-recurring-subscriptions",
3 | "version": "1.0.0",
4 | "description": "A tutorial on setting up recurring subscriptions with Stripe.",
5 | "main": "app.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "node app.js"
9 | },
10 | "keywords": [
11 | "stripe",
12 | "recurring",
13 | "billing",
14 | "subscriptions"
15 | ],
16 | "author": "Amy Sitwala",
17 | "license": "ISC",
18 | "dependencies": {
19 | "body-parser": "^1.18.3",
20 | "dotenv": "^6.2.0",
21 | "express": "^4.16.4",
22 | "nunjucks": "^3.1.7",
23 | "stripe": "^6.25.1"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/styles/adminView.css:
--------------------------------------------------------------------------------
1 | /* Admin View */
2 | .admin-view,
3 | .create-product,
4 | .create-plan {
5 | width: 50%;
6 | margin: 0 auto;
7 | min-width: 280px;
8 | }
9 |
10 | .admin-view-title {
11 | display: flex;
12 | align-items: center;
13 | justify-content: space-between;
14 | }
15 |
16 | .admin-view-title h2 {
17 | margin-right: 24px;
18 | }
19 |
20 | .admin-view-product {
21 | padding: 16px;
22 | background-color: #eee;
23 | border-radius: 3px;
24 | width: 100%;
25 | margin-bottom: 24px;
26 | }
27 |
28 | .admin-view-product-title {
29 | display: flex;
30 | align-items: center;
31 | justify-content: space-between;
32 | }
33 |
34 | .admin-view-product-name {
35 | margin: 0 8px 0 0;
36 | }
37 |
38 |
39 | /* Create product */
40 | .create-product-container, .create-plan-container {
41 | padding: 24px;
42 | background-color: #eee;
43 | border-radius: 3px;
44 | }
45 |
--------------------------------------------------------------------------------
/styles/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Open Sans", "Helvetica", sans-serif;
3 | margin: 0;
4 | padding: 0;
5 | width: 100%;
6 | -webkit-font-smoothing: antialiased;
7 | }
8 |
9 | body * {
10 | box-sizing: border-box
11 | }
12 |
13 | h1, h2, h3, h4, h5, h6 {
14 | font-weight: 600;
15 | }
16 |
17 | .app-container {
18 | padding: 32px;
19 | width: 100%;
20 | }
21 |
22 | .app-header {
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | }
27 |
28 | .app-header a {
29 | text-decoration: none;
30 | }
31 |
32 | .app-header p {
33 | margin: 0 6px;
34 | font-size: 12px;
35 | cursor: pointer;
36 | padding-bottom: 2px;
37 | border-bottom: 3px solid transparent;
38 | color: #a5a5a5;
39 | }
40 |
41 | .app-header p:hover {
42 | color: #576adb;
43 | }
44 |
45 | .app-header p.active {
46 | color: #576adb;
47 | border-color: #acb6f3;
48 | }
49 |
50 | .app-header span {
51 | display: inline-block;
52 | color: #aaa;
53 | font-size: 16px;
54 | padding-bottom: 2px;
55 | border-bottom: 3px solid transparent;
56 | }
57 |
58 | /* General */
59 | .btn {
60 | background-color: #576adb;
61 | color: #ffffff;
62 | padding: 8px 12px;
63 | border: 0px;
64 | border-radius: 4px;
65 | font-size: 14px;
66 | font-family: "Open Sans", "Helvetica", sans-serif;
67 | cursor: pointer;
68 | text-transform: uppercase;
69 | }
70 |
71 | .btn-small {
72 | font-size: 12px;
73 | padding: 6px 8px;
74 | }
75 |
76 | label {
77 | display: block;
78 | text-transform: uppercase;
79 | font-size: 14px;
80 | margin-bottom: 4px;
81 | font-weight: 600;
82 | }
83 |
84 | input {
85 | border: 0px;
86 | background-color: #fff;
87 | border-radius: 4px;
88 | color: black;
89 | padding: 8px 12px;
90 | font-size: 14px;
91 | margin-bottom: 24px;
92 | font-family: "Open Sans", "Helvetica", sans-serif;
93 | width: 100%;
94 |
95 | box-shadow: 0 1px 3px 0 #e6ebf1;
96 | -webkit-transition: box-shadow 150ms ease;
97 | transition: box-shadow 150ms ease;
98 | }
99 |
100 | input:focus {
101 | outline: 0 !important;
102 | box-shadow: 0 1px 3px 0 #cfd7df;
103 | }
104 |
105 | input::placeholder {
106 | color: #aab7c4;
107 | }
108 |
109 | input.btn {
110 | width: auto;
111 | display: inline-block;
112 | margin-bottom: 0px;
113 | }
114 |
115 | .label-input-container {
116 | position: relative;
117 | }
118 |
119 | .label-left-input {
120 | padding-left: 26px;
121 | }
122 |
123 | .label-currency {
124 | position: absolute;
125 | top: 7px;
126 | left: 12px;
127 | color: #777;
128 | }
129 |
130 | .success-message {
131 |
132 | }
133 |
134 | .error-message {
135 |
136 | }
137 |
--------------------------------------------------------------------------------
/styles/customerView.css:
--------------------------------------------------------------------------------
1 | /* Customer View */
2 | .customer-view h2 {
3 | margin-left: 12px;
4 | }
5 |
6 | .customer-view-plans {
7 | display: flex;
8 | align-items: center;
9 | flex-wrap: wrap;
10 | }
11 |
12 | .customer-view-plan {
13 | background-color: #eee;
14 | padding: 24px;
15 | border-radius: 4px;
16 | flex: 1;
17 | margin: 0 12px 24px;
18 | min-width: 280px;
19 | }
20 |
21 | .customer-view-plan h3 {
22 | margin-top: 0px;
23 | }
24 |
25 | /* Sign Up Page */
26 | .sign-up {
27 | width: 50%;
28 | margin: 0 auto;
29 | min-width: 280px;
30 | }
31 |
32 | .sign-up h2 {
33 | margin-top: 6px;
34 | }
35 |
36 | .sign-up-product {
37 | margin-top: 24px;
38 | }
39 |
40 | .sign-up-container {
41 | padding: 24px;
42 | background-color: #eee;
43 | border-radius: 3px;
44 | }
45 |
46 | .sign-up .btn {
47 | margin-top: 16px;
48 | }
49 |
50 | #card-errors {
51 | margin-top: 6px;
52 | font-size: 14px;
53 | }
54 |
--------------------------------------------------------------------------------
/utils/format-numbers.js:
--------------------------------------------------------------------------------
1 | function formatUSD(stripeAmount) {
2 | return `$${(stripeAmount / 100).toFixed(2)}`;
3 | }
4 |
5 | function formatStripeAmount(USDString) {
6 | return parseFloat(USDString) * 100;
7 | }
8 |
9 | module.exports = {
10 | formatUSD,
11 | formatStripeAmount
12 | };
--------------------------------------------------------------------------------
/views/adminView.html:
--------------------------------------------------------------------------------
1 | {% set title = 'Admin View' %}
2 | {% set admin = true %}
3 | {% extends 'base.html' %}
4 |
5 | {% block content %}
6 |
7 |
11 | {% for product in products %}
12 |
36 | {% endfor %}
37 |
17 |
22 | {% block content %}
23 | {% endblock %}
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/views/createPlan.html:
--------------------------------------------------------------------------------
1 | {% set title = 'Create Plan' %}
2 | {% set admin = true %}
3 | {% extends 'base.html' %}
4 |
5 | {% block content %}
6 |
7 |
8 |
{{ productName }}: Create New Plan
9 | {% if success %}
10 |
13 | {% elif error %}
14 |
17 | {% else %}
18 |
50 | {% endif %}
51 |
8 |
Create New Product
9 | {% if success %}
10 |
13 | {% elif error %}
14 |
17 | {% else %}
18 |
35 | {% endif %}
36 |
37 |
9 | {% for product in products %}
10 |
11 |
{{product.name}}
12 |
13 | {% for plan in product.plans %}
14 |
15 |
32 |
33 | {% endfor %}
34 |
35 |
36 | {% endfor %}
37 |
7 |
10 |
Sign up for {{ plan.name }} — {{ plan.amount }} /
11 | {% if (plan.interval_count > 1) %}
12 | {{ plan.interval_count }} {{ plan.interval }}s
13 |
14 | {% else %}
15 | {{ plan.interval }}
16 | {% endif %}
17 |
18 | {% if success %}
19 |
20 |
Your payment was successful. Congrats, you've successfully signed up!
21 |
22 | {% elif error %}
23 |
24 |
Your payment was unsuccessful. Please try again.
25 |
26 | {% else %}
27 |
55 | {% endif %}
56 |
57 |