{"id":7228,"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-09T14:02:57","modified_gmt":"2024-01-09T13:02:57","slug":"stripe-checkout-integration-with-react","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/","title":{"rendered":"Integraci\u00f3n de Stripe Checkout con React"},"content":{"rendered":"\n<p>En este art\u00edculo, aprenderemos a integrar <a href=\"https:\/\/stripe.com\/docs\/payments\/checkout\">&#8220;Stripe Checkout<\/a> &#8221; con React con Hooks y Node js. Sin embargo, si prefieres usar Angular, <a href=\"https:\/\/www.unimedia.tech\/2020\/09\/27\/integrate-stripe-with-angular\/\">aqu\u00ed tienes una gu\u00eda que hemos creado para ello<\/a>.<\/p>\n\n<p>Tambi\u00e9n te puede interesar: <a href=\"https:\/\/www.unimedia.tech\/2021\/06\/02\/angular-12-features-deprecations-migration\/\">&#8220;Angular 12: caracter\u00edsticas, desapreciaciones y migraci\u00f3n&#8221;<\/a><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es Stripe Checkout?<\/h2>\n\n<p>Stripe Checkout es una p\u00e1gina de pago totalmente responsiva y segura alojada por Stripe. Le permite recibir pagos r\u00e1pidamente y eliminar la fricci\u00f3n de <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">desarrollar <\/a>una p\u00e1gina de pago que cumpla las normas.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Objetivo<\/h2>\n\n<p>Hoy aprenderemos a:<\/p>\n\n<p>1. C\u00f3mo crear un producto en el panel de Stripe.<\/p>\n\n<p>2. Integrar ese producto en nuestro componente React js checkout.<\/p>\n\n<p>3. Comun\u00edquese correctamente con nuestro servidor y redir\u00edjase a la p\u00e1gina de pago de Stripe.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Requisitos previos<\/h2>\n\n<ul class=\"wp-block-list\"><li>Conocimientos b\u00e1sicos de React js y <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\">React Hooks<\/a>.<\/li><li>Nodejs versi\u00f3n 10 o posterior<\/li><li>React 16.8 o posterior<\/li><\/ul>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Crear un producto<\/h2>\n\n<p>Sin embargo, antes de empezar a codificar, vamos a crear un producto de muestra que mostraremos en nuestra p\u00e1gina de pago. <\/p>\n\n<h3 class=\"wp-block-heading\">1. Crear una cuenta Stripe<\/h3>\n\n<p>Nota: Todos los datos y claves relacionados con el producto se crear\u00e1n en &#8220;modo de prueba&#8221; para <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">desarrolladores<\/a>. Los datos confidenciales para producci\u00f3n deben guardarse de forma segura en sus archivos .env.<\/p>\n\n<ul class=\"wp-block-list\"><li>Vaya al <a href=\"https:\/\/stripe.com\/\">sitio web de Stripe<\/a> y cree una cuenta. <\/li><li>Al crear su cuenta, se le dirigir\u00e1 a la p\u00e1gina de su panel de control. <\/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. Crear un producto<\/h3>\n\n<p>Para ello, haga clic en el bot\u00f3n <a href=\"https:\/\/dashboard.stripe.com\/test\/products?active=true\"><strong>Productos<\/strong><\/a><strong> <\/strong>y haga clic en el bot\u00f3n &#8220;A\u00f1adir producto&#8221;. Puede rellenar los detalles del producto como se muestra a continuaci\u00f3n. <\/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=\" width=\" 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=\" width=\" height=\"344\"\/><\/figure>\n\n<p>Adem\u00e1s, aseg\u00farese de guardar el producto y copiar el ID de la API de precios para su uso posterior.<\/p>\n\n<p><\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Integraci\u00f3n de Stripe Checkout<\/h2>\n\n<p>La integraci\u00f3n de nuestro producto Stripe requiere dos pasos: Configurar nuestro <strong>servidor node<\/strong> y llamar a la API de nuestro producto stripe en nuestra<strong> app React<\/strong>.<\/p>\n\n<h3 class=\"wp-block-heading\">1. Crear-react-app<\/h3>\n\n<p>Vamos a crear nuestro proyecto usando <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\">create-react-app<\/a> usando el comando de abajo:<\/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. Configurar un servidor <strong>Node Express<\/strong><\/h3>\n\n<p>A continuaci\u00f3n, tenemos que configurar nuestro servidor de nodos. Para ello, instalaremos <strong><em>express<\/em><\/strong> y <a href=\"https:\/\/www.npmjs.com\/package\/concurrently\"><strong><em>simult\u00e1neamente<\/em><\/strong><\/a>. <em>Concurrently<\/em> nos permitir\u00e1 ejecutar nuestro servidor node y nuestra aplicaci\u00f3n React al mismo tiempo. npm i concurrently;<strong>  <\/strong><em>npm i express<\/em><\/p>\n\n<h3 class=\"wp-block-heading\">3. Instalar Stripe<\/h3>\n\n<p>Para utilizar Stripe en nuestra aplicaci\u00f3n, instalaremos tres paquetes: <a href=\"https:\/\/www.npmjs.com\/package\/stripe\">stripe<\/a>, <a href=\"https:\/\/www.npmjs.com\/package\/@stripe\/react-stripe-js\">react-stripe <\/a>y <a href=\"https:\/\/www.npmjs.com\/package\/@stripe\/stripe-js\">stripe-js<\/a>.<br\/>Aqu\u00ed est\u00e1 la versi\u00f3n final de nuestro <em>archivo 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>Observar\u00e1 c\u00f3mo establecemos valores para proxy y p\u00e1gina de inicio. Del mismo modo, tambi\u00e9n utilizamos <em>concurrentemente <\/em>para iniciar nuestro servidor node y react app al mismo tiempo. <\/p>\n\n<h3 class=\"wp-block-heading\">7. Servidor.js<\/h3>\n\n<p>Crear un archivo <em>server.js<\/em> en nuestro directorio home. Dentro de nuestro archivo server.js, vamos a<\/p>\n\n<ul class=\"wp-block-list\"><li>Instanciar los paquetes necesarios<\/li><li>Crear una ruta API: create-checkout-session. En esta ruta, definiremos <\/li><\/ul>\n\n<p><em>payment_method_types, price, quantity, and the success_url and cancel_url <\/em><br\/>La versi\u00f3n final del archivo <em>server.js<\/em> ser\u00e1<\/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>Puedes encontrar tu clave API secreta en tu panel de control. Empieza por: <em>sk_test<\/em>. Tambi\u00e9n puede utilizar el ID de precio de su producto en este archivo.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Frontend: React App<\/h2>\n\n<p>En esta secci\u00f3n, construiremos nuestros componentes frontales. Nuestro frontend constar\u00e1 de nuestra p\u00e1gina principal que albergar\u00e1 la ficha de producto y una p\u00e1gina de resultados que mostrar\u00e1 si la compra se ha realizado correctamente o no. <\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\">8. Tarjeta de producto<\/h3>\n\n<ul class=\"wp-block-list\"><li>En primer lugar, crearemos un <strong><em>componentes <\/em><\/strong>dentro de la carpeta <strong><em>src <\/em><\/strong>que albergar\u00e1 los archivos de nuestro frontend.<\/li><\/ul>\n\n<ul class=\"wp-block-list\"><li>A continuaci\u00f3n, cree los archivos <em>ProductDisplay.js <\/em>y<em> Message.js <\/em>. El <em>ProductDisplay.js <\/em>mostrar\u00e1 la ficha del producto y el <em>Message.js <\/em>mostrar\u00e1 el mensaje obtenido de nuestro 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>Y aqu\u00ed est\u00e1 nuestro archivo App.js donde ambos componentes son llamados.<\/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 proyecto<\/strong><\/h3>\n\n<p>Esta es la estructura final del proyecto:<\/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=\" width=\" height=\"388\"\/><\/figure>\n\n<p>Ejecute <em>npm start para iniciar el proyecto.<\/em><\/p>\n\n<p>Puedes encontrar un par de <a href=\"https:\/\/stripe.com\/docs\/testing\">n\u00fameros de tarjeta de prueba proporcionados por Stripe aqu\u00ed<\/a> que puedes utilizar para probar la p\u00e1gina de pago 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>Demo<\/strong><\/figcaption><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n<p>Ah\u00ed lo tienen. Con Stripe Checkout y React, puedes crear una experiencia de comercio electr\u00f3nico perfecta para tus clientes.<\/p>\n\n<p>Espero que haya disfrutado leyendo este art\u00edculo. No dude en compartir y a\u00f1adir sus valiosos comentarios.<\/p>\n\n<p>Siempre estamos deseosos de escuchar las opiniones de otros desarrolladores.<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Unimedia Technology<\/h2>\n\n<p>Aqu\u00ed en <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia Technology<\/a> tenemos un equipo de<strong> React Developers<\/strong> que pueden ayudarte a desarrollar tus integraciones de stripe m\u00e1s complejas.<\/p>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este post se lo mostrar\u00e1:<br \/>\nC\u00f3mo crear un producto en su panel de Stripe.<br \/>\nIntegramos ese producto en nuestro componente React js checkout<br \/>\nSe comunica correctamente con nuestro servidor y redirige a la p\u00e1gina de pago de Stripe.<\/p>\n","protected":false},"author":6,"featured_media":6651,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[215,224,220],"tags":[],"class_list":["post-7228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-technical-guides-es","category-stripe-es","category-technical-guides-es"],"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\u00f3n de Stripe Checkout con 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\/es\/stripe-checkout-integration-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integraci\u00f3n de Stripe Checkout con React\" \/>\n<meta property=\"og:description\" content=\"Este post se lo mostrar\u00e1: C\u00f3mo crear un producto en su panel de Stripe. Integramos ese producto en nuestro componente React js checkout Se comunica correctamente con nuestro servidor y redirige a la p\u00e1gina de pago de Stripe.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/es\/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-09T13:02:57+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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Integraci\u00f3n de Stripe Checkout con 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\/es\/stripe-checkout-integration-with-react\/","og_locale":"es_ES","og_type":"article","og_title":"Integraci\u00f3n de Stripe Checkout con React","og_description":"Este post se lo mostrar\u00e1: C\u00f3mo crear un producto en su panel de Stripe. Integramos ese producto en nuestro componente React js checkout Se comunica correctamente con nuestro servidor y redirige a la p\u00e1gina de pago de Stripe.","og_url":"https:\/\/www.unimedia.tech\/es\/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-09T13:02:57+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":{"Escrito por":"Unimedia","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/es\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Integraci\u00f3n de Stripe Checkout con React","datePublished":"2021-08-17T14:47:03+00:00","dateModified":"2024-01-09T13:02:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/"},"wordCount":746,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/es\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/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":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/","url":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/","name":"Integraci\u00f3n de Stripe Checkout con React - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/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-09T13:02:57+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/es\/stripe-checkout-integration-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/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\/es\/stripe-checkout-integration-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/es\/"},{"@type":"ListItem","position":2,"name":"Integraci\u00f3n de Stripe Checkout con React"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/es\/#website","url":"https:\/\/www.unimedia.tech\/es\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/es\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/es\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/#\/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\/es\/#\/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\/es\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/#\/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\/es\/wp-json\/wp\/v2\/posts\/7228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/comments?post=7228"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/posts\/7228\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/media\/6651"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/media?parent=7228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/categories?post=7228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/tags?post=7228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}