{"id":7169,"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":"2024-01-10T17:50:13","modified_gmt":"2024-01-10T16:50:13","slug":"stripe-checkout-integration-with-react","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/","title":{"rendered":"Integraci\u00f3 de Stripe Checkout amb React"},"content":{"rendered":"\n<p>En aquest article, aprendrem a integrar <a href=\"https:\/\/stripe.com\/docs\/payments\/checkout\">&#8220;Stripe Checkout&#8221;<\/a> amb React with Hooks i Node js. Tanmateix, si preferiu utilitzar Angular, <a href=\"https:\/\/www.unimedia.tech\/2020\/09\/27\/integrate-stripe-with-angular\/\">aqu\u00ed teniu una guia que hem creat per a aix\u00f2<\/a> .<\/p>\n\n<p>Tamb\u00e9 us pot interessar: <a href=\"https:\/\/www.unimedia.tech\/2021\/06\/02\/angular-12-features-deprecations-migration\/\">&#8220;Angular 12: caracter\u00edstiques, obsoletes i migraci\u00f3&#8221;<\/a><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Qu\u00e8 \u00e9s Stripe Checkout?<\/h2>\n\n<p>Stripe Checkout \u00e9s una p\u00e0gina de pagament totalment responsiva i segura allotjada per Stripe. Us permet rebre pagaments r\u00e0pidament i eliminar la fricci\u00f3 de <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">desenvolupar<\/a> una p\u00e0gina de pagament compatible.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Objectiu<\/h2>\n\n<p>Avui aprendrem a:<\/p>\n\n<p>1. Com crear un producte al vostre tauler de control de Stripe.<\/p>\n\n<p>2. Integrar aquest producte al nostre component de pagament de React js<\/p>\n\n<p>3. Comunicar correctament amb el nostre servidor i redirigir \u200b\u200ba la p\u00e0gina de pagament de Stripe.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Requisits previs<\/h2>\n\n<ul class=\"wp-block-list\"><li>Coneixements b\u00e0sics de React js i <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\">React Hooks<\/a> .<\/li><li>Nodejs versi\u00f3 10 o posterior<\/li><li>.<\/li><\/ul>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Crea un producte<\/h2>\n\n<p>Tanmateix, abans de comen\u00e7ar a codificar, creem un producte de mostra que mostrarem a la nostra p\u00e0gina de pagament.  <\/p>\n\n<h3 class=\"wp-block-heading\">1. Crea un compte de Stripe<\/h3>\n\n<p>Nota: totes les dades i claus relacionades amb el producte es crearan en el &#8220;mode de prova&#8221; dels <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">desenvolupadors<\/a> . Les dades sensibles per a la producci\u00f3 s&#8217;han de desar de manera segura als fitxers .env.<\/p>\n\n<ul class=\"wp-block-list\"><li>Anar al <a href=\"https:\/\/stripe.com\/\">lloc web de Stripe<\/a> i crea un compte. <\/li><li>En crear el teu compte, se&#8217;t dirigir\u00e0 a la p\u00e0gina del teu dashboard. <\/li><\/ul>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/QaLauAxAtEYWwqoOSJQSnSLyuxIbI_BuDtJIMgUN6qMERWWZ1Ytu_Ke4ccDPi402DOL_8Z8XSjcdB5So2tIwFpATJxAmhJhtDaDyv8ZtWmvmSs3rZFe884OAGEylDK4chl05Ruc.png\" alt=\"\/&amp;gt;&lt;\/figure&gt;&#10;&lt;\/div&gt;\"\/><\/figure>\n<h3 class=\"wp-block-heading\">2. Crea un producte<\/h3>\n\n<p>Per fer-ho, fes clic a <a href=\"https:\/\/dashboard.stripe.com\/test\/products?active=true\"><strong>Productes<\/strong><\/a><strong> <\/strong>enlla\u00e7 al costat i fes clic al bot\u00f3 &#8220;Afegeix producte&#8221;. Pots omplir els detalls del producte tal com es mostra a continuaci\u00f3. <\/p>\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/qGU0t9Af07ey8-hWKdnoF5mCyByKCorl52ELH6kFsRcuWTZghVYxG6zjVxLi6vh-Kd6AUpZ9Oc4MSsJcl2jBe51Pg5AZyrB_LVcvY_bu8bt58E7Gs_exjg3B_uciXWFsolYxnBlw.png\" alt=\"  amplada =\" height=\"310\"\/><\/figure>\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=\"  amplada =\" height=\"344\"\/><\/figure>\n\n<p>A m\u00e9s, assegura&#8217;t de desar el producte i tamb\u00e9 de copiar l&#8217;identificador de l&#8217;API del preu per a un \u00fas posterior<\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Integraci\u00f3 de Stripe Checkout<\/h2>\n\n<p>La integraci\u00f3 del nostre producte Stripe requereix dos passos: configurar el nostre <strong>servidor de nodes<\/strong> i trucar a la nostra API de producte Stripe a la nostra <strong>aplicaci\u00f3 React<\/strong> .<\/p>\n\n<h3 class=\"wp-block-heading\">1. Crea-reacciona-aplicaci\u00f3<\/h3>\n\n<p>Creem el nostre projecte amb <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\">create-react-app<\/a> amb l&#8217;ordre seg\u00fcent:<\/p>\n\n<pre class=\"wp-block-code\"><code><code>npx create-react-app stripe-react-app<\/code><\/code><\/pre>\n\n<h3 class=\"wp-block-heading\">2. Configura un servidor <strong>Node Express<\/strong><\/h3>\n\n<p>A continuaci\u00f3, hem de configurar el nostre servidor de nodes. Per fer-ho, instal\u00b7larem <strong><em>express<\/em><\/strong> i <a href=\"https:\/\/www.npmjs.com\/package\/concurrently\"><strong><em>simult\u00e0niament<\/em><\/strong><\/a> . Al mateix temps, ens permetr\u00e0 executar el nostre servidor de nodes i l&#8217;aplicaci\u00f3 React alhora. <em>npm i alhora<\/em> ;<strong>  <\/strong><em>npm expresso<\/em><\/p>\n\n<h3 class=\"wp-block-heading\">3. Instal\u00b7la Stripe<\/h3>\n\n<p>Per utilitzar Stripe a la nostra aplicaci\u00f3, instal\u00b7larem tres paquets: paquets <a href=\"https:\/\/www.npmjs.com\/package\/stripe\">stripe<\/a> , <a href=\"https:\/\/www.npmjs.com\/package\/@stripe\/react-stripe-js\">react-stripe<\/a> i <a href=\"https:\/\/www.npmjs.com\/package\/@stripe\/stripe-js\">stripe-js<\/a> .<br\/>Aqu\u00ed tens la versi\u00f3 final del nostre <em>fitxer package.json.<\/em><\/p>\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<p>Veur\u00e0s com establim valors per al proxy i la p\u00e0gina d&#8217;inici. De la mateixa manera, tamb\u00e9 hem utilitzat <em>simult\u00e0niament<\/em> per iniciar el nostre servidor de nodes i l&#8217;aplicaci\u00f3 de reaccionar alhora.  <\/p>\n\n<h3 class=\"wp-block-heading\">7. Server.js<\/h3>\n\n<p>Crea un fitxer <em>server.js<\/em> al nostre directori d&#8217;inici. Dins del nostre fitxer server.js, farem<\/p>\n\n<ul class=\"wp-block-list\"><li>la iInstancia dels paquets necessaris<\/li><li>Crea una ruta API: create-checkout-session. En aquesta ruta, definirem  <\/li><\/ul>\n\n<p><em>payment_method_types, preu, quantitat i success_url i cancel_url  <\/em><br\/>La versi\u00f3 final del fitxer <em>server.js<\/em> ser\u00e0<\/p>\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<p>Pots trobar la teva clau secreta de l&#8217;API al teu tauler. Comen\u00e7a amb: <em>sk_test<\/em> . Tamb\u00e9 es pot utilitzar l&#8217;identificador de preu del teu producte en aquest fitxer.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Frontend: aplicaci\u00f3 React<\/h2>\n\n<p>En aquesta secci\u00f3, construirem els nostres components frontend. La nostra interf\u00edcie constar\u00e0 de la nostra p\u00e0gina principal que allotjar\u00e0 la targeta del producte i una p\u00e0gina de resultats que mostrar\u00e0 si la compra va ser correcta o no.  <\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\">8. Targeta de producte<\/h3>\n\n<ul class=\"wp-block-list\"><li>En primer lloc, crearem una carpeta <strong><em>de components<\/em><\/strong> dins de la carpeta <strong><em>src<\/em><\/strong> que allotjar\u00e0 els nostres fitxers d&#8217;interf\u00edcie.<\/li><\/ul>\n\n<ul class=\"wp-block-list\"><li>A continuaci\u00f3, crea fitxers <em>ProductDisplay.js<\/em> i <em>Message.js<\/em> . El <em>ProductDisplay.js<\/em> mostrar\u00e0 la targeta del producte i el <em>Message.js<\/em> mostrar\u00e0 el missatge obtingut del nostre Stripe Checkout.<\/li><\/ul>\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<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<p>I aqu\u00ed tens el nostre fitxer App.js on es criden els dos components.<\/p>\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<h3 class=\"wp-block-heading\"><strong>Estructura del projecte<\/strong><\/h3>\n\n<p>Aqu\u00ed tens l&#8217;estructura final del projecte:<\/p>\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=\"  amplada =\" height=\"388\"\/><\/figure>\n\n<p>Executa <em>npm start per iniciar el projecte.<\/em><\/p>\n\n<p><a href=\"https:\/\/stripe.com\/docs\/testing\">Aqu\u00ed pots trobar un parell de n\u00fameros de targetes de prova proporcionats per Stripe<\/a> que pots utilitzar per provar la p\u00e0gina de pagament de Stripe.<\/p>\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>Demostraci\u00f3<\/strong><\/figcaption><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Resum<\/h2>\n\n<p>Aqu\u00ed ho tens. Amb Stripe Checkout i React, es pot crear una experi\u00e8ncia de comer\u00e7 electr\u00f2nic perfecta per als vostres clients.<\/p>\n\n<p>Espero que hagis gaudit llegint aquest article. No dubtis a compartir i afegir els teus valuosos comentaris.<\/p>\n\n<p>Sempre ens agrada con\u00e9ixer les opinions dels companys desenvolupadors.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Unimedia Technology<\/h2>\n\n<p>Aqu\u00ed a <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia Technology<\/a> tenim un equip de <strong>desenvolupadors de React<\/strong> que us poden ajudar a desenvolupar les vostres integracions de stripe m\u00e9s complexes.<\/p>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aquesta publicaci\u00f3 us mostrar\u00e0:<br \/>\nCom crear un producte al vostre tauler de control de Stripe.<br \/>\nIntegrar aquest producte al nostre component de pagament de React js<br \/>\nComunicar-te amb \u00e8xit amb el nostre servidor i redirigir-te \u200b\u200ba la p\u00e0gina de pagament de Stripe.<\/p>\n","protected":false},"author":6,"featured_media":6649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[213,222,218],"tags":[],"class_list":["post-7169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-technical-guides-ca","category-stripe-ca","category-technical-guides-ca"],"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>Integraci\u00f3 de Stripe Checkout amb 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\/ca\/stripe-checkout-integration-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integraci\u00f3 de Stripe Checkout amb React\" \/>\n<meta property=\"og:description\" content=\"Aquesta publicaci\u00f3 us mostrar\u00e0: Com crear un producte al vostre tauler de control de Stripe. Integrar aquest producte al nostre component de pagament de React js Comunicar-te amb \u00e8xit amb el nostre servidor i redirigir-te \u200b\u200ba la p\u00e0gina de pagament de Stripe.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/ca\/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=\"2024-01-10T16:50:13+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=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuts\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Integraci\u00f3 de Stripe Checkout amb 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\/ca\/stripe-checkout-integration-with-react\/","og_locale":"ca_ES","og_type":"article","og_title":"Integraci\u00f3 de Stripe Checkout amb React","og_description":"Aquesta publicaci\u00f3 us mostrar\u00e0: Com crear un producte al vostre tauler de control de Stripe. Integrar aquest producte al nostre component de pagament de React js Comunicar-te amb \u00e8xit amb el nostre servidor i redirigir-te \u200b\u200ba la p\u00e0gina de pagament de Stripe.","og_url":"https:\/\/www.unimedia.tech\/ca\/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":"2024-01-10T16:50:13+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":{"Escrit per":"Unimedia","Temps estimat de lectura":"6 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Integraci\u00f3 de Stripe Checkout amb React","datePublished":"2021-08-17T14:47:03+00:00","dateModified":"2024-01-10T16:50:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/"},"wordCount":757,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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":"ca","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/","url":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/","name":"Integraci\u00f3 de Stripe Checkout amb React - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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":"2024-01-10T16:50:13+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/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\/ca\/stripe-checkout-integration-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/ca\/"},{"@type":"ListItem","position":2,"name":"Integraci\u00f3 de Stripe Checkout amb React"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/ca\/#website","url":"https:\/\/www.unimedia.tech\/ca\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/ca\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/ca\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/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\/ca\/#\/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\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/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\/ca\/wp-json\/wp\/v2\/posts\/7169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/comments?post=7169"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7169\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media\/6649"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media?parent=7169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/categories?post=7169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/tags?post=7169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}