Stripe payment gateway integration in NodeJS
15 min readOct 28, 2020
#Introduction:
Payment gateway is one of most common need now days to process payments in the all the eCommerce and other applications accepting online payments.
There are several payment gateway providers available worldwide i.e. PayPal, CCAvenue, Stripe, AauthorizeNet etc. All the payment gateway providers provides SDK/API for almost all the common programming languages i.e. Java, NodeJS, Python, PHP, Ruby, .NET, GO etc
Stripe is another popular & widely used payment gateway. In this article we will learn how to integrate Stripe payment gateway with any NodeJS based application.
Generally there are two approaches to implement any payment gateway with your application.
- Create your own payment form to accept payment and use Payment Gateway provider’s SDK/API to process the payment.
- Or Use Payment Gateway provider’s payment form to process the payment. This approach is known as Hosted from OR checkout approach.
The hosted/checkout form approach is widely used because it’s secure and full fills all the requirement of PCI DSS compliance.
Click here for Demo
Click here to download the complete source code from my GitHub account.
#Prerequisites:
Before we start, make sure you have the following development environment.
- Stripe developers sandbox account.
- NPM 6.9.0
- NodeJS 10.16.3
- IDE (Atom or Visual Studio). I am using visual studio.
#Application Overview:
There are three main entities involve in this application
- Client application that submits payment amount.
- NodeJS backend application (developed in ExpressJS framework) to configure, create session and accept payment from Stripe checkout form.
- Stripe checkout server to generate hosted form to accept and process the payment.
#Steps to create the application:
Let’s divide the application development in following 4 major steps:
- Register for Stripe sandbox account & generate API Publishable key & Secret key
- Create NodeJS backend application, connect to Stripe using NodeJS SDK & create session and checkout form request.
- Create a client application using HTML5, Bootstrap 4 & JQuery to submit the payment amount.
- And complete payment with the Stripe chekcout form.
#Step 1: Create Stripe developers account and create Standard keys (Published key & Secret key)
If you don’t have Stripe sandbox account, go to Stripe registration page and create a new account.
On successful signup, navigate to Developer → Api Keys -> Standard keys
If you already have Stripe account, Login to your account, go to Developer → Api Keys -> Standard keys and get your API published and secret keys.
#Step 2: Create NodeJS project with ExpressJS to perform the backend payment operations
If you are a beginner in NodeJS. You may refer my another article here.
Following are the steps to accept the payment with NodeJS project.
- Install the Stripe Node library:
Install the package and import it in your code. Alternatively, if you are starting from scratch and need a package.json file
npm install --save stripe2. Initialise stripe & Create a Checkout Session:
Add an endpoint on your server that creates a Checkout Session. A Checkout Session controls what your customer sees in the Stripe-hosted payment page such as line items, the order amount and currency, and acceptable payment methods. Return the Checkout Session’s ID in the response to reference the Session on the client.
//Import Stripe
const stripe = require('stripe')('<your_stripe_secret_key_here>'); //Create session
const session = await stripe.checkout.sessions.create({
3. Specify payment methods:
Checkout supports several payment methods beyond cards. If multiple payment methods are passed, Checkout dynamically reorders them to prioritize the most relevant payment methods based on the customer’s location and other characteristics. If you accept cards as a payment method, Apple Pay and Google Pay are displayed in Stripe Checkout when applicable.
payment_method_types: ['card'],4. Billing and Shipping address (Optional):
Incase you want to capture customer’s billing and shipping address in the checkout form, add the following attributes in the request:
billing_address_collection: 'auto', shipping_address_collection: { allowed_countries: ['US', 'CA', 'MY', 'IN'], },
5. Define the line items:
Always keep sensitive information about your product inventory, like price and availability, on your server to prevent customer manipulation from the client. Define product information when you create the Checkout Session with price_data or alternatively use pre-defined prices and pass their IDs.
line_items: [
{
price_data: {
currency: 'usd',
product_data: {
name: 'Stubborn Attachments',
images: ['https://i.imgur.com/EHyR2nP.png'],
},
unit_amount: 2000,
},
quantity: 1,
},
],6. Choose the mode:
Checkout has three modes: payment, subscription, or setup. Use payment mode for one time purchases. Learn more about subscription and setup modes in the docs.
mode: 'payment',7. Supply the redirect URLs:
Specify URLs for success and cancel pages — make sure they are publicly accessible so Stripe can redirect customers to them. You can also handle both the success and canceled states with the same URL.
success_url: `${YOUR_DOMAIN}/success.html`,
cancel_url: `${YOUR_DOMAIN}/cancel.html`,8. Final code in NodeJS Server index.js file:
// Import Stripe
const stripe = require('stripe')('sk_test_51HeebsDPkWxsnwhp4TwRNIABpmDyEs5rnCgNUL0cY2fJhYig6CzVFB5cQANbHzIgEMPYy8KwzN6qQ7sDY9Yxq4da00Qk4yQVXZ');
// Import express
let express = require('express') // Import Body parser
let bodyParser = require('body-parser'); // Initialize the app
let app = express();
var cors = require('cors')
app.use(cors()) // Configure bodyparser to handle post requests
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json()); // Setup server port
var port = process.env.PORT || 8888;
// Send message for default URL const YOUR_DOMAIN = 'https://bhupeshpadiyar.com/poc/stripe'; app.get('/', (req, res) => res.send('Welcome to NodeJS, Express Application')); app.post('/create-session', async (req, res) => {
console.log(req.body); var iphoneType = req.body.iphone;
var productData = {name: '', images: []};
var unit_amount = 0; if(iphoneType === 'iphone12mini') {
productData.name = 'iPhone 12 Mini (64 GB)';
productData.images.push('https://i.ibb.co/z8YdmXC/iphone-12-mini.png');
unit_amount = 69900;
} else if(iphoneType === 'iphone12') {
productData.name = 'iPhone 12 (64 GB)';
productData.images.push('https://i.ibb.co/TDQjMSd/iphone-12-red.png');
unit_amount = 79900;
} else if(iphoneType === 'iphone12pro') {
productData.name = 'iPhone 12 Pro (128 GB)';
productData.images.push('https://i.ibb.co/Tcj0zy4/iphone-12-pro.png');
unit_amount = 99900;
} console.log(productData); const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
billing_address_collection: 'auto',
shipping_address_collection: {
allowed_countries: ['US', 'CA', 'MY', 'IN'],
},
line_items: [
{
price_data: {
currency: 'usd',
product_data: productData,
unit_amount: unit_amount,
},
quantity: 1,
},
],
mode: 'payment',
success_url: `${YOUR_DOMAIN}/success.html?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${YOUR_DOMAIN}/cancel.html?session_id={CHECKOUT_SESSION_ID}`,
});
res.json({ id: session.id });
}); // Fetch the Checkout Session to display the JSON result on the success page
app.get("/checkout-session", async (req, res) => {
const { sessionId } = req.query;
const session = await stripe.checkout.sessions.retrieve(sessionId);
res.send(session);
}); // Launch app to listen to specified port
app.listen(port, function () {
console.log("Running NodeJS, Express, Stripe checkout application on port " + port);
});
Here we created two REST API endpoints /create-session to initiate payment checkout and /checkout-session to get the successful transaction details by session_id attribute.
#Step 3: Build your checkout HTML pages
Our NodeJS backend RESTFull API is ready. Now let’s create an UI form to submit payment amount to the NodeJS server with the help of /create-session API.
Following are the detailed steps
- Add a success page, Initialize Stripe.js & Fetch a Checkout Session:
Create a success page success.html, that will be redirected after successful transaction & will retrieve the transaction details by session_id attribute in URL.
In order to retrieve the transaction details we will invoke /create-session API endpoint in our NodeJS backend application. * Load Stripe.js
<script src="https://js.stripe.com/v3/"></script>- Initialize Stripe.js
var stripe = Stripe("<your_stripe_public_key>");- Add a checkout button and call /create-session API:
- On click checkout button call /create-session API endpoint to create the session.
- Once session_id created, redirect to stripe checkout page as following
<button type="button" id="iphone12mini" onclick="checkout('iphone12mini', 699);" class="btn btn-lg btn-block btn-outline-primary"> Checkout </button> // Call /create-session API endpoint $.ajax('http://localhost:8888/create-session', { dataType: 'json', // type of response data method: 'POST', data: {price: price, 'iphone': iphoneName}, success: function (data,status,xhr) { // success callback function return stripe.redirectToCheckout({ sessionId: data.id }); }, error: function (jqXhr, textStatus, errorMessage) { // error callback console.log(errorMessage) } });- Final code in checkout page index.js is as follows
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico"> <title>Stripe Payment gateway integration example</title> <!-- Custom styles for this template -->
<link href="./css/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://js.stripe.com/v3/"></script>
</head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">
<a class="" href="https://www.bhupeshpadiyar.com">BHUPESHPADIYAR.COM</a> </h5>
<!-- <nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav> -->
<a class="btn btn-outline-primary" href="https://www.bhupeshpadiyar.com">Blogs</a>
</div> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Stripe Checkout Demo</h1>
<p class="lead">
This is a quick demonenstration of Stripe Payment gateway checkout integration in <b>Java</b> & <b>NodeJS</b>.
</p>
</div> <div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">iPhone 12 Mini</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$699</h1>
<img class="img-fluid" src="./images/iphone-12-mini.png">
<ul class="list-unstyled mt-3 mb-4">
<li>64 GB of storage</li>
</ul>
<button type="button" id="iphone12mini" onclick="checkout('iphone12mini', 699);" class="btn btn-lg btn-block btn-outline-primary">
Checkout
</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">iPhone 12</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$799</h1>
<img class="img-fluid" src="./images/iphone-12-red.png">
<ul class="list-unstyled mt-3 mb-4">
<li>64 GB of storage</li>
</ul>
<button type="button" id="iphone12" onclick="checkout('iphone12', 799);" class="btn btn-lg btn-block btn-outline-primary">Checkout</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">iPhone 12 Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$999</h1>
<img class="img-fluid" src="./images/iphone-12-pro.png">
<ul class="list-unstyled mt-3 mb-4">
<li>128 GB of storage</li>
</ul>
<button type="button" id="iphone12pro" onclick="checkout('iphone12pro', 999);"
class="btn btn-lg btn-block btn-outline-primary">Checkout</button>
</div>
</div>
</div> <footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md ml-1 mb-1">
Develped By :
</div>
</div>
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="favicon.ico" alt="" width="24" height="24">
<a href="https://www.bhupeshpadiyar.com">Bhupesh Singh Padiyar</a>
<small class="d-block mb-3 text-muted">© 2020-2021</small>
</div>
<!-- <div class="col-6 col-md">
<h5>Linkedin</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Bhupesh Singh Padiyar</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
</ul>
</div> -->
<div class="col-6 col-md">
<h5><a class="" target="_blank" href="http://aboutme.bhupeshpadiyar.com">About Me</a></h5>
<!-- <ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
</ul> -->
</div>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<script>window.jQuery || document.write('<script src="./js/jquery.min.js"><\/script>')</script>
<!-- <script src='./js/proper.min.js'></script>
<script src='./js/bootstrap.min.js'></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='./js/holder.min.js'></script> <script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script> <script type="text/javascript">
// Create an instance of the Stripe object with your publishable API key
var stripe = Stripe("pk_test_51HeebsDPkWxsnwhpOn9e97oEGRMd6GfBSF0QiMa8SA72Qnw0UCfoEsYcr7iJNleqZlfQ4YArqqoAx2c80W7j8UVD00qyUYlrke");
var checkoutButton = document.getElementById("checkout-button"); function showLoader(iphoneName){ var loaderContent = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="sr-only">Please wait...</span>';
$("#"+iphoneName).empty();
$("#"+iphoneName).append(loaderContent);
$("button").attr("disabled", true) } function hideLoader(iphoneName){
var loaderContent = 'Checkout';
$("#"+iphoneName).empty();
$("#"+iphoneName).attr("disabled", false)
$("button").attr("disabled", false)
$("#"+iphoneName).append(loaderContent);
} function checkout(iphoneName, price) { showLoader(iphoneName); $.ajax('https://stripe-nodejs-backend.herokuapp.com/create-session', {
dataType: 'json', // type of response data
method: 'POST',
data: {price: price, 'iphone': iphoneName},
success: function (data,status,xhr) { // success callback function
console.log(data)
return stripe.redirectToCheckout({ sessionId: data.id });
hideLoader(iphoneName);
},
error: function (jqXhr, textStatus, errorMessage) { // error callback
hideLoader(iphoneName);
console.log(errorMessage)
}
});
}
</script> </body>
</html>
2. Add a success.html page and retrieve the transaction detail with session_id attribute from URL:
After successful transaction stripe will redirect to the success.html page with session_attribute as URL parameter that we configured in out backend application.
Call the /checkout-session API to retrieve the transaction details by session_id attribute that we got from URL.
var urlParams = new URLSearchParams(window.location.search);
var sessionId = urlParams.get("session_id"); $.ajax('http://localhost:8888/checkout-session?sessionId=' + sessionId, {
dataType: 'json', // type of response data
method: 'GET',
success: function (data, status, xhr) { // success callback function var formattedAmount = data.amount_total/100;
$("#transactionId").text(data.id);
$("#paymentAmount").text(formattedAmount.toFixed(2));
$("#paymentStatus").text(data.payment_status);
$("#paymentMethod").text(data.payment_method_types[0]);
$("#customerId").text(data.customer);
$("#paymentIntent").text(data.payment_intent); var sessionJSON = JSON.stringify(data, null, 2);
document.querySelector("pre").textContent = sessionJSON;
},
error: function (jqXhr, textStatus, errorMessage) { // error callback
console.log(errorMessage); }
});
Final code in success.js page will be as follows:
success.html
<!doctype html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico"> <title>Stripe Payment gateway integration example success page</title> <!-- Custom styles for this template -->
<link href="./css/main.css" rel="stylesheet">
<link href="./css/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://js.stripe.com/v3/"></script>
</head> <body> <div class="d-flex mb-4 flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">
<a class="" href="https://www.bhupeshpadiyar.com">BHUPESHPADIYAR.COM</a> </h5>
<!-- <nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav> -->
<a class="btn btn-outline-primary" href="https://www.bhupeshpadiyar.com">Blogs</a>
</div> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4 text-success">Payment success!!</h1>
<p class="lead">
<div class="alert alert-success" role="alert">
Your payment has been approved successfully!!
</div>
</p>
</div>
<div class="container">
<div class="col-lg-12">
<button type="button" class="list-group-item list-group-item-action active">
Payment Details
</button>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Transaction ID
<span class="badge badge-primary badge-pill" id="transactionId"></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Payment Status
<span class="badge badge-primary badge-pill" id="paymentStatus"></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Payment Amount
<span class="badge badge-primary badge-pill" id="paymentAmount"></span>
</li> <li class="list-group-item d-flex justify-content-between align-items-center">
Payment Method
<span class="badge badge-primary badge-pill" id="paymentMethod"></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Customer Id
<span class="badge badge-primary badge-pill" id="customerId"></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Payment Intent
<span class="badge badge-primary badge-pill" id="paymentIntent"></span>
</li>
</ul> </div>
<div class="col-lg-12 mt-2"> <button type="button" class="list-group-item list-group-item-action active">
Transaction Details JSON Response
</button>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<!-- <textarea class="form-control" rows="10" id="jsonResponseTextArea"></textarea> -->
<pre> </pre>
</li> </ul>
</div> <div class="col-lg-12 mt-2 text-center">
<a type="button" href="https://bhupeshpadiyar.com/poc/stripe/index.html" class="btn btn-lg btn-success">Restart Demo</a>
</div> </div>
<div class="container">
<footer class="pt-4 my-md-5 mt-4 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md ml-1 mb-1">
Develped By :
</div>
</div>
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="favicon.ico" alt="" width="24" height="24">
<a href="https://www.bhupeshpadiyar.com">Bhupesh Singh Padiyar</a>
<small class="d-block mb-3 text-muted">© 2020-2021</small>
</div>
<!-- <div class="col-6 col-md">
<h5>Linkedin</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Bhupesh Singh Padiyar</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
</ul>
</div> -->
<div class="col-6 col-md">
<h5><a class="" target="_blank" href="http://aboutme.bhupeshpadiyar.com">About Me</a></h5>
<!-- <ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
</ul> -->
</div>
</div>
</footer>
</div> <div class="modal" id="loadingModal" role="dialog">
<div class="modal-dialog modal-dialog-centered d-flex justify-content-center" role="document">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <!-- Bootstrap core JavaScript
================================================== --> <script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<script>window.jQuery || document.write('<script src="./js/jquery.min.js"><\/script>')</script>
<!-- <script src='./js/proper.min.js'></script>
<script src='./js/bootstrap.min.js'></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src='./js/holder.min.js'></script> <script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script> <script type="text/javascript">
// Create an instance of the Stripe object with your publishable API key
var stripe = Stripe("pk_test_51HeebsDPkWxsnwhpOn9e97oEGRMd6GfBSF0QiMa8SA72Qnw0UCfoEsYcr7iJNleqZlfQ4YArqqoAx2c80W7j8UVD00qyUYlrke");
var checkoutButton = document.getElementById("checkout-button"); var urlParams = new URLSearchParams(window.location.search);
var sessionId = urlParams.get("session_id"); console.log(sessionId); $('#loadingModal').modal('show');
$.ajax('http://localhost:8888/checkout-session?sessionId=' + sessionId, {
dataType: 'json', // type of response data
method: 'GET',
success: function (data, status, xhr) { // success callback function
console.log(data);
var formattedAmount = data.amount_total/100; $('#loadingModal').modal('hide');
$("#transactionId").text(data.id);
$("#paymentAmount").text(formattedAmount.toFixed(2));
$("#paymentStatus").text(data.payment_status);
$("#paymentMethod").text(data.payment_method_types[0]);
$("#customerId").text(data.customer);
$("#paymentIntent").text(data.payment_intent); var sessionJSON = JSON.stringify(data, null, 2);
document.querySelector("pre").textContent = sessionJSON;
},
error: function (jqXhr, textStatus, errorMessage) { // error callback
console.log(errorMessage);
$('#loadingModal').modal('hide');
}
});
</script> </body> </html>
3. Add a cancel.html page:
Create cancel.html page in case transaction failed or canceled.
cancel.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico"> <title>Stripe Payment gateway integration example cancel page</title> <!-- Custom styles for this template -->
<link href="./css/main.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
</head> <body> <div class="d-flex mb-4 flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">
<a class="" href="https://www.bhupeshpadiyar.com">BHUPESHPADIYAR.COM</a> </h5>
<!-- <nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav> -->
<a class="btn btn-outline-primary" href="https://www.bhupeshpadiyar.com">Blogs</a>
</div> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4 text-danger">Sorry!! Payment failed</h1>
<p class="lead">
<div class="alert alert-danger" role="alert">
This transaction has been failed.
</div>
</p>
</div> <div class="container">
<footer class="pt-4 my-md-5 mt-4 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md ml-1 mb-1">
Develped By :
</div>
</div>
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="favicon.ico" alt="" width="24" height="24">
<a href="https://www.bhupeshpadiyar.com">Bhupesh Singh Padiyar</a>
<small class="d-block mb-3 text-muted">© 2020-2021</small>
</div>
<!-- <div class="col-6 col-md">
<h5>Linkedin</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Bhupesh Singh Padiyar</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
</ul>
</div> -->
<div class="col-6 col-md">
<h5><a class="" target="_blank" href="http://aboutme.bhupeshpadiyar.com">About Me</a></h5>
<!-- <ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
</ul> -->
</div>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
<script>window.jQuery || document.write('<script src="./js/jquery.min.js"><\/script>')</script>
<script src='./js/proper.min.js'></script>
<script src='./js/bootstrap.min.js'></script>
<script src='./js/holder.min.js'></script> <script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script> </body>
</html>
#Step 4: Stripe payment checkout testing
Once you have completed the frontend and backend code, start the backend application with the following command in the backend project root directory
#Start NodeJS backend application
node index.js#Open index.html file from frontend code any browser
This will show you simple checkout page as follows.
#Click any checkout button to process the payment
Once you click on checkout button it will redirect you the Stripe checkout page to process the payment.
#Test Card Numbers:
The following test credit card numbers will only work in the sandbox. Use an expiration date after today’s date. If the card code is required, please use any 3-digit combination for Visa, Mastercard, Discover, EnRoute, and JCB; use a 4-digit combination for American Express.
Test Card BrandNumberAmerican Express370000000000002Discover6011000000000012JCB3088000000000017Visa400700000002740128888188884111111111111111Mastercard542400000000001522230000103097032223000010309711
#Payment success page with transaction details by session_id:
Once payment approved successfully, stripe will redirect you to the success page that you configured in your backend application while creating the session.
#Verify the payment in stripe dashboard:
in order to validate the payment in the stripe dashboard navigate to Payments-> All Transactions. It will show you the list of all the transaction in creation descending order.
#Sending payment confirmation emails to the customers:
By default stripe don’t send the payment confirmation receipts to the customers. You need to enable it from your stripe dashboard.
Stripe don’t send any payment confirmation emails in sandbox environment even after enabling it in the stripe dashboard settings.
However you can send the receipt individual customers explicitly from stripe dashboard.
#Enable email configuration:
To enable payment, invoice or refund related emails, Go to Settings -> Business Settings -> Emails & enable the successful payment and refund emails.
#Payment confirmation receipt in the email:
To send email from stripe dashboard explicitly in the sandbox environment: Navigate to Payments and mouse over on the transaction. It will show you the email icon. Click on email icon and it will send the receipt to the customer email id.
Following is the sample screenshot of the payment receipt.
