{"id":7305,"date":"2021-08-17T16:47:03","date_gmt":"2021-08-17T14:47:03","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/stripe-checkout-integration-with-react\/"},"modified":"2023-12-18T13:07:51","modified_gmt":"2023-12-18T12:07:51","slug":"stripe-checkout-integration-with-react","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/","title":{"rendered":"Stripe Checkout Integration with React"},"content":{"rendered":"\n<p>In this article, we will learn how to integrate <a href=\"https:\/\/stripe.com\/docs\/payments\/checkout\">\u201cStripe Checkout\u201d<\/a> with React with Hooks and Node js. However, if you would rather prefer to use Angular, <a href=\"https:\/\/www.unimedia.tech\/2020\/09\/27\/integrate-stripe-with-angular\/\">here\u2019s a guide we created for that<\/a>.<\/p>\n\n\n\n<p>You may also be interested in: <a href=\"https:\/\/www.unimedia.tech\/2021\/06\/02\/angular-12-features-deprecations-migration\/\">&#8220;Angular 12: Features, Deprecations &amp; Migration&#8221;<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Stripe Checkout?<\/h2>\n\n\n\n<p>Stripe Checkout is a fully responsive and secure payment page hosted by Stripe. It lets you quickly receive payments and remove the friction of <a href=\"https:\/\/www.unimedia.tech\/de\/bespoke-software-development\/\">developing <\/a>a compliant checkout page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Goal<\/h2>\n\n\n\n<p>Today, we will learn how to:<\/p>\n\n\n\n<p>1. How to create a product in your Stripe dashboard.<\/p>\n\n\n\n<p>2. Integrate that product in our React js checkout component<\/p>\n\n\n\n<p>3. Successfully communicate with our server and redirect to the Stripe Checkout page.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Basic Knowledge of React js and <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\">React Hooks<\/a>.<\/li><li>Nodejs version 10 or later<\/li><li>React 16.8 or later<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create a Product<\/h2>\n\n\n\n<p>However, before we start coding, let\u2019s create a sample product which we will display on our checkout page.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Create a Stripe account<\/h3>\n\n\n\n<p>Note: All product-related data and keys will be created in <a href=\"https:\/\/www.unimedia.tech\/de\/engagierte-entwicklungsteams\/\">developers<\/a>\u2019 \u201ctest mode\u201d. Sensitive data for production should be saved securely in your .env files.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Head over to <a href=\"https:\/\/stripe.com\/\">Stripe\u2019s website<\/a> and create an account.&nbsp;<\/li><li>Upon creating your account, you will be directed to your dashboard page.&nbsp;<\/li><\/ul>\n\n\n\n\n\n<h3 class=\"wp-block-heading\">2. Create a Product<\/h3>\n\n\n\n<p>To do this, click on the <a href=\"https:\/\/dashboard.stripe.com\/test\/products?active=true\"><strong>Products<\/strong><\/a><strong> <\/strong>link by the side and click the \u201cAdd Product\u201d button. You can fill in the product details as shown below.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/qGU0t9Af07ey8-hWKdnoF5mCyByKCorl52ELH6kFsRcuWTZghVYxG6zjVxLi6vh-Kd6AUpZ9Oc4MSsJcl2jBe51Pg5AZyrB_LVcvY_bu8bt58E7Gs_exjg3B_uciXWFsolYxnBlw.png\" alt=\" width=\"537\" height=\"310\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/48ulorNyt1unguY65SnzkeCNMlGZEpSSaQZ4NlXsIoyfp6nM70pMUwmin6ORWJ-xmdpMnBlYsx8S3KhsiBRjfztZk4knlFmyBpb7VQ0E5OjOEUaIMpSGePDE0UaOHqmlm_xS0kQs.png\" alt=\" width=\"596\" height=\"344\"\/><\/figure>\n\n\n\n<p>Also, make sure you save the Product and also copy the price API ID for later use<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Stripe Checkout Integration<\/h2>\n\n\n\n<p>Integrating our Stripe product requires two steps: Setting up our <strong>node server<\/strong> and calling our stripe product API in our<strong> React app<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Create-react-app<\/h3>\n\n\n\n<p>Let\u2019s create our project using <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\">create-react-app<\/a> using the command below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>npx create-react-app stripe-react-app<\/code><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Setup a <strong>Node Express<\/strong> server<\/h3>\n\n\n\n<p>Next, we have to setup up our node server. To do this, we will install <strong><em>express<\/em><\/strong> and <a href=\"https:\/\/www.npmjs.com\/package\/concurrently\"><strong><em>concurrently<\/em><\/strong><\/a>. Concurrently will allow us to run our node server and React app at the same time. <em>npm i concurrently<\/em>;<strong>&nbsp; <\/strong><em>npm i express<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Install Stripe<\/h3>\n\n\n\n<p>To use Stripe in our app, we will be installing three packages: <a href=\"https:\/\/www.npmjs.com\/package\/stripe\">stripe<\/a>, <a href=\"https:\/\/www.npmjs.com\/package\/@stripe\/react-stripe-js\">react-stripe, <\/a>and <a href=\"https:\/\/www.npmjs.com\/package\/@stripe\/stripe-js\">stripe-js<\/a> packages.<br>Here\u2019s the final version of our <em>package.json file.<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"stripe-react-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@stripe\/react-stripe-js\": \"^1.4.1\",\n    \"@stripe\/stripe-js\": \"^1.17.0\",\n    \"@testing-library\/jest-dom\": \"^5.11.4\",\n    \"@testing-library\/react\": \"^11.1.0\",\n    \"@testing-library\/user-event\": \"^12.1.10\",\n    \"concurrently\": \"^6.2.1\",\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-scripts\": \"4.0.3\",\n    \"stripe\": \"^8.169.0\",\n    \"web-vitals\": \"^1.0.1\"\n  },\n  \"homepage\":\"http:\/\/localhost:3000\/\",\n  \"proxy\": \"http:\/\/localhost:5000\",\n  \"scripts\": {\n    \"start-client\": \"react-scripts start\",\n    \"start-server\": \"node server.js\",\n    \"start\": \"concurrently \"yarn start-client\" \"yarn start-server\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": &#91;\n      \"react-app\",\n      \"react-app\/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": &#91;\n      \"&gt;0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": &#91;\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>You will notice how we set values for proxy and homepage. Similarly, we also used <em>concurrently <\/em>to start our node server and react app at the same time.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Server.js<\/h3>\n\n\n\n<p>Create a <em>server.js<\/em> file in our home directory. Inside our server.js file, we will<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Instantiate required packages<\/li><li>Create an API route: create-checkout-session. In this route, we will define&nbsp;<\/li><\/ul>\n\n\n\n<p><em>payment_method_types, price, quantity, and the success_url and cancel_url&nbsp;<\/em><br>The final version of the <em>server.js<\/em> file will be<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const stripe = require('stripe')('sk_test_***************************************');\nconst express = require('express');\nconst app = express();\napp.use(express.static('.'));\n \nconst YOUR_DOMAIN = 'http:\/\/localhost:3000\/checkout';\n \napp.post('\/create-checkout-session', async (req, res) =&gt; {\n const session = await stripe.checkout.sessions.create({\n   payment_method_types: &#91;\n     'card'\n   ],\n   line_items: &#91;\n     {\n       \/\/ TODO: replace this with the `price` of the product you want to sell\n       \/\/ price: '{{PRICE_ID}}',\n       price: 'price_*************',\n       quantity: 1,\n     },\n   ],\n   mode: 'payment',\n   success_url: `${YOUR_DOMAIN}?success=true`,\n   cancel_url: `${YOUR_DOMAIN}?canceled=true`,\n });\n \n res.redirect(303, session.url)\n});\n \napp.listen(5000, () =&gt; console.log('Running on port 5000'));\n<\/code><\/pre>\n\n\n\n<p>You can find your secret API key in your dashboard. It starts with:&nbsp; <em>sk_test<\/em>. You also get to use your product\u2019s price ID in this file.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frontend:&nbsp; React App<\/h2>\n\n\n\n<p>In this section, we will be building our frontend components. Our frontend will comprise of our main page which will house the product card and a result page that will show if the checkout was successful or not.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. Product Card<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>First, we will create a <strong><em>components <\/em><\/strong>folder inside the <strong><em>src <\/em><\/strong>folder that will house our frontend files.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Next, create <em>ProductDisplay.js <\/em>and<em> Message.js <\/em>files. The <em>ProductDisplay.js <\/em>will display the product card and the <em>Message.js <\/em>will display the message gotten from our Stripe Checkout.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>export const ProductDisplay = () =&gt; (\n   &lt;div className=\"wrapper\"&gt;\n     &lt;div className=\"product-img\"&gt;\n       &lt;img\n         src=\"https:\/\/cdn.pixabay.com\/photo\/2017\/12\/20\/09\/36\/orchid-3029574_1280.jpg\"\n         alt=\"Orchid Flower\"\n         height=\"420\"\n         width=\"327\"\n       \/&gt;\n     &lt;\/div&gt;\n     &lt;div className=\"product-info\"&gt;\n       &lt;div className=\"product-text\"&gt;\n         &lt;h1&gt;Orchid Flower&lt;\/h1&gt;\n         &lt;h2&gt;POPULAR HOUSE PLANT&lt;\/h2&gt;\n         &lt;p&gt;\n           The Orchidaceae are a diverse and\n           &lt;br \/&gt;\n           widespread family of flowering plants,\n           &lt;br \/&gt;\n           with blooms that are often\n           &lt;br \/&gt;\n           colourful and fragrant.{\" \"}\n         &lt;\/p&gt;\n       &lt;\/div&gt;\n       &lt;form action=\"\/create-checkout-session\" method=\"POST\"&gt;\n         &lt;div className=\"product-price-btn\"&gt;\n           &lt;p&gt;\n             &lt;span&gt;$20&lt;\/span&gt;\n           &lt;\/p&gt;\n           &lt;button type=\"submit\"&gt;buy now&lt;\/button&gt;\n         &lt;\/div&gt;\n       &lt;\/form&gt;\n     &lt;\/div&gt;\n   &lt;\/div&gt;\n);\n\nProductDisplay.js<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>export const Message = ({ message }) =&gt; (\n   &lt;section&gt;\n     &lt;p&gt;{message}&lt;\/p&gt;\n     &lt;a className=\"product-price-btn\" href=\"\/\"&gt;\n       &lt;button type=\"button\"&gt;Continue&lt;\/button&gt;\n     &lt;\/a&gt;\n   &lt;\/section&gt;\n);\n \n \n\t\t\t\t           Message.js   <\/code><\/pre>\n\n\n\n<p>And here\u2019s our App.js file where both components are called.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState, useEffect } from \"react\";\nimport \".\/App.css\";\nimport { ProductDisplay } from \".\/components\/ProductDisplay\";\nimport { Message } from \".\/components\/Message\";\n \n \nexport default function App() {\n const &#91;message, setMessage] = useState(\");\n \n useEffect(() =&gt; {\n   \/\/ Check to see if this is a redirect back from Checkout\n   const query = new URLSearchParams(window.location.search);\n \n   if (query.get(\"success\")) {\n     setMessage(\" Yay! Order placed!   You will receive an email confirmation confirming your order.\");\n   }\n \n   if (query.get(\"canceled\")) {\n     setMessage(\n       \"Order canceled -- please try again.\"\n     );\n   }\n }, &#91;]);\n \n return message ? &lt;Message message={message} \/&gt; : &lt;ProductDisplay \/&gt;;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Project Structure<\/strong><\/h3>\n\n\n\n<p>Here\u2019s the final structure of the project:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/dDCIKzPZmvcxgZEnP7CAeZejA_C1oL2fx9Ry28aW17LxcbsdlxQUjHO_O0hBegkML8hW6SZV0q3gI1eyba7l4JjmKSw4F_XRrkFzZTDGWVAb8QQ_ZjIqvdpGWq7-7prZLB6U40jg.png\" alt=\" width=\"143\" height=\"388\"\/><\/figure>\n\n\n\n<p>Run <em>npm start to start the project.<\/em><\/p>\n\n\n\n<p>You can find a couple of <a href=\"https:\/\/stripe.com\/docs\/testing\">test card numbers provided by Stripe here<\/a> which you can use to test the Stripe checkout page.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"660\" style=\"aspect-ratio: 1120 \/ 660;\" width=\"1120\" controls src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2021\/08\/Unimedia_React_Stripe.mp4\"><\/video><figcaption><strong>Demo<\/strong><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>There you have it. With Stripe Checkout and React, you can create a seamless eCommerce experience for your customers.<\/p>\n\n\n\n<p>I hope that you have enjoyed reading this article. Feel free to share and add your valuable comments.<\/p>\n\n\n\n<p>We are always eager to hear the opinions from fellow developers.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Unimedia Technology<\/h2>\n\n\n\n<p>Here at <a href=\"https:\/\/www.unimedia.tech\/de\/\">Unimedia Technology<\/a> we have a team of<strong> React Developers<\/strong> that can help you develop your most complex stripe integrations.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post will show you:<br \/>\nHow to create a product in your Stripe dashboard.<br \/>\nIntegrate that product in our React js checkout component<br \/>\nSuccessfully communicate with our server and redirect to the Stripe Checkout page.<\/p>\n","protected":false},"author":6,"featured_media":6650,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[214,223,219],"tags":[],"class_list":["post-7305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-technical-guides-de","category-stripe-de","category-technical-guides-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.6 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Stripe Checkout Integration with React - Unimedia Technology<\/title>\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.unimedia.tech\/de\/stripe-checkout-integration-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Stripe Checkout Integration with React\" \/>\n<meta property=\"og:description\" content=\"This post will show you: How to create a product in your Stripe dashboard. Integrate that product in our React js checkout component Successfully communicate with our server and redirect to the Stripe Checkout page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Unimedia Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.linkedin.com\/company\/unimedia-technology\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-17T14:47:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-18T12:07:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react-8.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Unimedia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:site\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Stripe Checkout Integration with React - Unimedia Technology","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.unimedia.tech\/de\/stripe-checkout-integration-with-react\/","og_locale":"de_DE","og_type":"article","og_title":"Stripe Checkout Integration with React","og_description":"This post will show you: How to create a product in your Stripe dashboard. Integrate that product in our React js checkout component Successfully communicate with our server and redirect to the Stripe Checkout page.","og_url":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/","og_site_name":"Unimedia Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/unimedia-technology\/","article_published_time":"2021-08-17T14:47:03+00:00","article_modified_time":"2023-12-18T12:07:51+00:00","og_image":[{"width":700,"height":400,"url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react-8.png","type":"image\/png"}],"author":"Unimedia","twitter_card":"summary_large_image","twitter_creator":"@UnimediaCTO","twitter_site":"@UnimediaCTO","twitter_misc":{"Verfasst von":"Unimedia","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Stripe Checkout Integration with React","datePublished":"2021-08-17T14:47:03+00:00","dateModified":"2023-12-18T12:07:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/"},"wordCount":213,"publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react-8.png","articleSection":["React","Stripe","Technical Guides"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/","url":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/","name":"Stripe Checkout Integration with React - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react-8.png","datePublished":"2021-08-17T14:47:03+00:00","dateModified":"2023-12-18T12:07:51+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/#primaryimage","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react-8.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/react-8.png","width":700,"height":400,"caption":"stripe + react"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/de\/"},{"@type":"ListItem","position":2,"name":"Stripe Checkout Integration with React"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/de\/#website","url":"https:\/\/www.unimedia.tech\/de\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/de\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","width":403,"height":309,"caption":"Unimedia Technology"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/unimedia-technology\/","https:\/\/x.com\/UnimediaCTO","https:\/\/www.instagram.com\/unimedia.technology\/"]},{"@type":"Person","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","caption":"Unimedia"}}]}},"_links":{"self":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/comments?post=7305"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7305\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media\/6650"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media?parent=7305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/categories?post=7305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/tags?post=7305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}