Node.js Express Stripe Charges API Payment Gateway Integration to Setup Online Payments Full Tutorial 2020

Welcome folks today in this blog post we will be using the stripe charges api to setup online payments in node.js and express in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new node.js project by using the below command as shown below

npm init -y

npm i express

npm i ejs

npm i stripe

And now we need to make a index.js file and copy paste the following code

index.js

const express = require('express') 
const bodyparser = require('body-parser') 
const path = require('path') 
const app = express() 

var Publishable_Key = ''
var Secret_Key = ''

const stripe = require('stripe')(Secret_Key) 

const port = process.env.PORT || 3000 

app.use(bodyparser.urlencoded({extended:false})) 
app.use(bodyparser.json()) 

// View Engine Setup 
app.set('views', path.join(__dirname, 'views')) 
app.set('view engine', 'ejs') 

app.get('/', function(req, res){ 
	res.render('Home', { 
	key: Publishable_Key 
	}) 
}) 

app.listen(port, function(error){ 
	if(error) throw error 
	console.log("Server created Successfully") 
})

const express = require('express')

const bodyparser = require('body-parser')

const path = require('path')

const app = express()

var Publishable_Key = ''

var Secret_Key = ''

const stripe = require('stripe')(Secret_Key)

const port = process.env.PORT || 3000

app.use(bodyparser.urlencoded({extended:false}))

app.use(bodyparser.json())

// View Engine Setup

app.set('views', path.join(__dirname, 'views'))

app.set('view engine', 'ejs')

app.get('/', function(req, res){

res.render('Home', {

key: Publishable_Key

})

app.listen(port, function(error){

if(error) throw error

console.log("Server created Successfully")

})

As you can see in the above code we are importing the required libraries which are express and stripe. And after that we are setting the stripe publishable key and secret key. These two things are required for this application. After you create your account you need to go to test mode in stripe and get these details here as shown below

After getting this information simply replace the keys in the above code. As you can see in the above code we are rendering an ejs template when we open the index page. Now we need to make the views folder inside the root directory and inside it make the home.ejs file and copy paste the below code

views/Home.ejs

<!DOCTYPE html> 
<html> 
<title>Stripe Payment Demo</title> 
<body> 
	<h3>Welcome to Payment Gateway</h3> 
	<form action="payment" method="POST"> 
	<script
		src="//checkout.stripe.com/v2/checkout.js"
		class="stripe-button"
		data-key="<%= key %>" 
		data-amount="7000" 
		data-currency="usd" 
		data-name="Gautam Sharma" 
		data-description="Buy React.js Complete Course" 
		data-locale="auto" > 
		</script> 
	</form> 
</body> 
</html>

<!DOCTYPE html>

<html>

<title>Stripe Payment Demo</title>

<body>

<h3>Welcome to Payment Gateway</h3>

<script

src="//checkout.stripe.com/v2/checkout.js"

class="stripe-button"

data-key="<%= key %>"

data-amount="7000"

data-currency="usd"

data-name="Gautam Sharma"

data-description="Buy React.js Complete Course"

data-locale="auto" >

</script>

</form>

</body>

</html>

As you can see we are using the stripe charges api and then we are rendering a simple button inside the html. Here we are attaching the different properties such as the class to the stripe button. And then the amount of money,currency and the name of the person. And now if you open the browser you will see the below stripe payment button

Now when we hit this pay with card button then automatically this will open the popup window where the user can pay with visa or master card automatically as shown below

app.post('/payment', function(req, res){ 

	// Moreover you can take more details from user 
	// like Address, Name, etc from form 
	stripe.customers.create({ 
		email: req.body.stripeEmail, 
		source: req.body.stripeToken, 
		name: 'Gautam Sharma', 
		address: { 
			line1: 'TC 9/4 Old MES colony', 
			postal_code: '110092', 
			city: 'New Delhi', 
			state: 'Delhi', 
			country: 'India', 
		} 
	}) 
	.then((customer) => { 

		return stripe.charges.create({ 
			amount: 7000,	 // Charing Rs 25 
			description: 'Web Development Product', 
			currency: 'USD', 
			customer: customer.id 
		}); 
	}) 
	.then((charge) => { 
		res.send("Success") // If no error occurs 
	}) 
	.catch((err) => { 
		res.send(err)	 // If some error occurs 
	}); 
})

app.post('/payment', function(req, res){

// Moreover you can take more details from user

// like Address, Name, etc from form

stripe.customers.create({

email: req.body.stripeEmail,

source: req.body.stripeToken,

name: 'Gautam Sharma',

address: {

line1: 'TC 9/4 Old MES colony',

postal_code: '110092',

city: 'New Delhi',

state: 'Delhi',

country: 'India',

}

})

.then((customer) => {

return stripe.charges.create({

amount: 7000, // Charing Rs 25

description: 'Web Development Product',

currency: 'USD',

customer: customer.id

});

})

.then((charge) => {

res.send("Success") // If no error occurs

})

.catch((err) => {

res.send(err) // If some error occurs

});

})

As you can see that inside this post request we are taking the information which is submitted by the user at the time of payment and then constructing a new customer object using the stripe customer api. After creating the customer we charge the user using the charge api method which is called charges.create() and here inside this method we are providing the amount that the user has to pay and also the name and description about the product. The currency in which the user is paying and also the customer id. And after successful payment we are showing the success message and if any error takes place we are showing the error message