{"id":3578,"date":"2022-10-07T13:16:39","date_gmt":"2022-10-07T08:16:39","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3578"},"modified":"2022-10-07T13:16:42","modified_gmt":"2022-10-07T08:16:42","slug":"how-to-collect-stripe-payment-in-react-node-js-express-app","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/","title":{"rendered":"How to Collect Stripe Payment in React, Node.js, & Express App"},"content":{"rendered":"\n

In this tutorial, you will learn how to integrate the Stripe payment gateway with React, Node.js, Express app. We will use the react-stripe-checkout<\/code> library to collect the payment from our users.<\/p>\n\n\n\n

Project Screenshots<\/h2>\n\n\n\n

Here are some screenshots of the React Stripe Checkout<\/strong> app that you will be creating today.<\/p>\n\n\n\n

\"React
React Stripe Checkout Product Information<\/figcaption><\/figure>\n\n\n\n
\"React
React Stripe Checkout Popup<\/figcaption><\/figure>\n\n\n\n

Create React App for Stripe Integration<\/h2>\n\n\n\n

Let’s get started by creating a new folder “client” to hold our React app.<\/p>\n\n\n\n

mkdir client<\/pre><\/div>\n\n\n\n
cd client<\/pre><\/div>\n\n\n\n
Now create the sample React app in this folder.<\/p>\n\n\n\n
npx create-react-app sampletestapp<\/pre><\/div>\n\n\n\n
Install Dependencies<\/h2>\n\n\n\n
At this point, we need to install some libraries that will help us build the React Stripe checkout functionality.<\/p>\n\n\n\n
npm i axios<\/pre><\/div>\n\n\n\n
npm i react-stripe-checkout<\/pre><\/div>\n\n\n\n
npm i react-toastify<\/pre><\/div>\n\n\n\n
React Stripe Checkout Example Source Code<\/h2>\n\n\n\n
Now open the App.js<\/strong> file and copy\/paste the following code into it.<\/p>\n\n\n\n
App.js<\/h3>\n\n\n\n
Important Note:<\/strong> On line # 55, replace ##your_publishable_key##<\/code> with the real publishable<\/code> key that you got from your Stripe account dashboard.<\/p>\n\n\n\n
import ".\/App.css";\n\nimport { useState } from "react";\n\nimport StripeCheckout from "react-stripe-checkout";\n\nimport axios from "axios";\n\nimport { toast } from "react-toastify";\n\nimport "react-toastify\/dist\/ReactToastify.css";\n\nfunction App() {\n\n  toast.configure()\n\n  const [product] = useState({\n    name: "Sample Book",\n    price: 120,\n    description: "This is a sample book",\n  });\n\n  async function handleToken(token, addresses) {\n    const response = await axios.post(\n      "http:\/\/localhost:8080\/checkout",\n      { token, product }\n    );\n\n    console.log(response.status)\n\n    if (response.status === 200) {\n      toast("Success! Check email for details", { type: "success" });\n    } else {\n      toast("Something went wrong", { type: "error" });\n    }\n  }\n\n  return (\n    <div className="App">\n      <div className="container">\n        <br \/>\n        <br \/>\n        <h1 className="text-center">Stripe Checkout<\/h1>\n        <br \/>\n        <h2 className="text-center">Product Info<\/h2>\n        <h3 className="text-center">Product Name: {product.name}<\/h3>\n        <h3 className="text-center">Product Price: {product.price}<\/h3>\n        <h3 className="text-center">\n          Product Description: {product.description}\n        <\/h3>\n        <br \/>\n        <div className="form-group container">\n          <StripeCheckout\n            className="center"\n            stripeKey="##your_publishable_key##"\n            token={handleToken}\n            amount={product.price * 100}\n            name="Sample Book"\n            billingAddress\n            shippingAddress\n          \/>\n        <\/div>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;<\/pre><\/div>\n\n\n\n
Now we will make a backend for our React Stripe integration app. So, let’s create a new directory and name it “server” as shown below.<\/p>\n\n\n\n
mkdir server<\/pre><\/div>\n\n\n\n
cd server<\/pre><\/div>\n\n\n\n
Now initialize the Node.js in it.<\/p>\n\n\n\n
npm init -y<\/pre><\/div>\n\n\n\n
npm i express<\/pre><\/div>\n\n\n\n
npm i cors<\/pre><\/div>\n\n\n\n
npm i uuid<\/pre><\/div>\n\n\n\n
npm i stripe<\/pre><\/div>\n\n\n\n
index.js<\/h3>\n\n\n\n
Important Note: On line # 4, replace ##stripe_secret_key##<\/code> with the actual Stripe secret key that you got from your Stripe account dashboard.<\/p>\n\n\n\n
const cors = require("cors");\nconst express = require("express");\nconst bodyparser = require('body-parser')\nconst stripe = require("stripe")("##stripe_secret_key##");\nconst uuid = require("uuid").v4;\n\nconst app = express();\n\napp.use(bodyparser.urlencoded({ extended: false }))\napp.use(bodyparser.json())\napp.use(cors())\n\napp.get("\/", (req, res) => {\n  res.send("Add your Stripe Secret Key to the .require('stripe') statement!");\n});\n\napp.post("\/checkout", async (req, res) => {\n  console.log("Request:", req.body);\n\n  let error;\n  let status;\n  try {\n    const { product, token } = req.body;\n\n    const customer = await stripe.customers.create({\n      email: token.email,\n      source: token.id,\n    });\n\n    const idempotency_key = uuid();\n    const charge = await stripe.charges.create(\n      {\n        amount: product.price * 100,\n        currency: "usd",\n        customer: customer.id,\n        receipt_email: token.email,\n        description: `Purchased the ${product.name}`,\n        shipping: {\n          name: token.card.name,\n          address: {\n            line1: token.card.address_line1,\n            line2: token.card.address_line2,\n            city: token.card.address_city,\n            country: token.card.address_country,\n            postal_code: token.card.address_zip,\n          },\n        },\n      },\n      {\n        idempotency_key,\n      }\n    );\n    console.log("Charge:", { charge });\n    status = "success";\n  } catch (error) {\n    console.error("Error:", error);\n    status = "failure";\n  }\n\n  res.json({ error, status });\n});\n\napp.listen(8080);<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn how to integrate the Stripe payment gateway with React, Node.js, Express app. We will use the react-stripe-checkout library to collect the payment from our users. Project Screenshots Here are some screenshots of the React Stripe Checkout app that you will be creating today. Create React App for Stripe Integration … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to Collect Stripe Payment in React, Node.js, & Express App<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn how to integrate the Stripe payment gateway with React, Node.js, Express app. We will use the react-stripe-checkout\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Collect Stripe Payment in React, Node.js, & Express App\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn how to integrate the Stripe payment gateway with React, Node.js, Express app. We will use the react-stripe-checkout\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T08:16:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T08:16:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/react_stripe_checkout_example.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Collect Stripe Payment in React, Node.js, & Express App","description":"In this tutorial, you will learn how to integrate the Stripe payment gateway with React, Node.js, Express app. We will use the react-stripe-checkout","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/","og_locale":"en_US","og_type":"article","og_title":"How to Collect Stripe Payment in React, Node.js, & Express App","og_description":"In this tutorial, you will learn how to integrate the Stripe payment gateway with React, Node.js, Express app. We will use the react-stripe-checkout","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T08:16:39+00:00","article_modified_time":"2022-10-07T08:16:42+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/react_stripe_checkout_example.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Collect Stripe Payment in React, Node.js, & Express App","datePublished":"2022-10-07T08:16:39+00:00","dateModified":"2022-10-07T08:16:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/"},"wordCount":211,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/react_stripe_checkout_example.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/","name":"How to Collect Stripe Payment in React, Node.js, & Express App","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/react_stripe_checkout_example.jpg","datePublished":"2022-10-07T08:16:39+00:00","dateModified":"2022-10-07T08:16:42+00:00","description":"In this tutorial, you will learn how to integrate the Stripe payment gateway with React, Node.js, Express app. We will use the react-stripe-checkout","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/react_stripe_checkout_example.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/react_stripe_checkout_example.jpg","width":880,"height":495,"caption":"React Stripe Checkout Example"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-collect-stripe-payment-in-react-node-js-express-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Collect Stripe Payment in React, Node.js, & Express App"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3578"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3578\/revisions"}],"predecessor-version":[{"id":3581,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3578\/revisions\/3581"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3582"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}