{"id":7239,"date":"2021-10-09T07:50:53","date_gmt":"2021-10-09T05:50:53","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/paypal-checkout-integration-with-react\/"},"modified":"2024-01-16T16:50:54","modified_gmt":"2024-01-16T15:50:54","slug":"paypal-checkout-integration-with-react","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/","title":{"rendered":"Integraci\u00f3n de PayPal Checkout con React"},"content":{"rendered":"&#13;\n<p>En este art\u00edculo aprenderemos a integrar PayPal Checkout con <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">React Hooks<\/a>. Sin embargo, si prefieres Stripe, aqu\u00ed est\u00e1 el art\u00edculo que escribimos sobre <a href=\"https:\/\/www.unimedia.tech\/2021\/08\/17\/stripe-checkout-integration-with-react\/\">la integraci\u00f3n de Stripe con React <\/a>. <\/p>&#13;\n&#13;\n<p>Tambi\u00e9n le puede interesar: <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/22\/unimedia-zellar-goes-live\/\">&#8220;El \u00faltimo proyecto de Unimedia, Zellar, \u00a1se pone en marcha!&#8221;<\/a><\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es PayPal Checkout?<\/h2>&#13;\n&#13;\n<p>El proceso de pago de PayPal integra perfectamente el popular sistema de pagos en Internet de PayPal en su aplicaci\u00f3n Web, aprovechando el <a href=\"https:\/\/developer.paypal.com\/docs\/business\/checkout\/\">SDK de JavaScript de PayPal<\/a>.<\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Objetivo<\/h2>&#13;\n&#13;\n<p>Nuestro objetivo hoy es aprender las siguientes tareas:<\/p>&#13;\n&#13;\n<p>1. Integrar PayPal Javascript SDK utilizando la <a href=\"https:\/\/github.com\/paypal\/react-paypal-js\">envoltura de componentes PayPay React.<\/a><\/p>&#13;\n&#13;\n<p>2. C\u00f3mo crear un producto de muestra. <\/p>&#13;\n&#13;\n<p>3. Integrar con \u00e9xito ese producto en nuestra App React.js.<\/p>&#13;\n&#13;\n<p>3. Redirija correctamente a la p\u00e1gina de pago de PayPal y registre las respuestas.<\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Requisitos previos<\/h2>&#13;\n&#13;\n<ul class=\"wp-block-list\">&#13;\n<li>Conocimientos de <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">React js y React Hooks.<\/a><\/li>&#13;\n<li>React 16.8 o posterior<\/li>&#13;\n<\/ul>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Instalar el paquete de componentes React de PayPal CheckOut<\/h2>&#13;\n&#13;\n<p>Utilizar el SDK directo de PayPal con nuestra aplicaci\u00f3n react puede ser una tarea ardua, raz\u00f3n por la cual PayPal <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">cre\u00f3 <\/a>el paquete react. As\u00ed que vamos a empezar por la <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">creaci\u00f3n <\/a>de nuestra aplicaci\u00f3n react y la instalaci\u00f3n del paquete tambi\u00e9n. <\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>npx create-react-app react-paypal\r\nnpm install @paypal\/react-paypal-js\r\ncd react-paypal\r\nnpm start\r\n<\/code><\/pre>\r\n&#13;\n<p>A continuaci\u00f3n, obtendremos las credenciales esenciales de la <a href=\"https:\/\/developer.paypal.com\/home\/\">p\u00e1gina para programadores de PayPal<\/a>. Despu\u00e9s de registrarte, podr\u00e1s crear una aplicaci\u00f3n.<\/p>&#13;\n&#13;\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/1OgivDE8TuUoOLZO0Af74w2SpQq3DNPu-6wpxSLgLLSesU7HTtrbl2LTvpb1VkH-ARPbLQlUSh01gyA8wwctXrInsi74p1IOJ0kI07YkQWMTDs1rLj5zDLRvlMi7M1-nR9mejEeKs0.png\" alt=\"paypal\"\/><\/figure>&#13;\n&#13;\n<p>Haz clic en el bot\u00f3n &#8220;<em>Crear aplicaci\u00f3n<\/em>&#8221; y rellena los datos necesarios. PayPal le proporcionar\u00e1 su <em>ID de cliente<\/em>. <\/p>&#13;\n&#13;\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/NkTS9HdSOdKeLdtIHI-nnEHSdJTntkUM-Zb7W1HQsv-jmUbxeWMwjc9k7m0krtVKXpgGEr_b41VD3FVOOCaUSryV6keW0TV-T-nn6S7g8U-ReaRJUXzMpJSg2WKTpR9D8o5yRmTos0.png\" alt=\"pago con paypal\"\/><\/figure>&#13;\n&#13;\n<p>A continuaci\u00f3n, seguiremos la documentaci\u00f3n del paquete para llamar a un bot\u00f3n de pago de ejemplo.<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>import { PayPalScriptProvider, PayPalButtons } from \"@paypal\/react-paypal-js\";\r\n \r\nexport default function App() {\r\n   return (\r\n       &lt;PayPalScriptProvider options={{ \"client-id\": \"test\" }}&gt;\r\n           &lt;PayPalButtons style={{ layout: \"horizontal\" }} \/&gt;\r\n       &lt;\/PayPalScriptProvider&gt;\r\n   );\r\n}<\/code><\/pre>\r\n&#13;\n<p>Introduzca su ID de cliente para obtener el bot\u00f3n de pago de muestra que se muestra a continuaci\u00f3n. Recuerde que debe crear un <em> archivo .env<\/em> para las credenciales de su aplicaci\u00f3n si se trata de una aplicaci\u00f3n de producci\u00f3n.<\/p>&#13;\n&#13;\n<p> si se trata de una aplicaci\u00f3n de producci\u00f3n.<\/p>&#13;\n&#13;\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/NblyB5zfdnKIWdezGLU1XJ7YJuTgcktwmW-rM2sVRn3tfOsRLeMGGOzBiQfNclYHF2Kk4v3QSp95Yqnac56OkPPVyx4jg4pHziut4y-OmTOJZw6Lsy2gGts1uND2cP7bPOTIFzvs0.png\" alt=\"pago con paypal\"\/><\/figure>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Crear una ficha de producto<\/h2>&#13;\n&#13;\n<p>A continuaci\u00f3n, crearemos una tarjeta de producto inspirada en nuestros ejemplos de Stripe. <\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>   &lt;div className=\"wrapper\"&gt;\r\n         &lt;div className=\"product-img\"&gt;\r\n           &lt;img\r\n             src=\"https:\/\/cdn.pixabay.com\/photo\/2021\/08\/15\/06\/54\/sunflower-6546993_1280.jpg\"\r\n             alt=\"SunFlower\"\r\n             height=\"420\"\r\n             width=\"327\"\r\n           \/&gt;\r\n         &lt;\/div&gt;\r\n         &lt;div className=\"product-info\"&gt;\r\n           &lt;div className=\"product-text\"&gt;\r\n             &lt;h1&gt;Sunflower&lt;\/h1&gt;\r\n             &lt;h2&gt;POPULAR HOUSE PLANT&lt;\/h2&gt;\r\n             &lt;p&gt;\r\n               Sunflowers are usually tall annual or perennial plants.\r\n               &lt;br \/&gt;\r\n               Each \"flower\" is actually a\r\n               &lt;br \/&gt;\r\n               disc made up of tiny flowers,\r\n               &lt;br \/&gt;\r\n               to better attract pollinators.{\" \"}\r\n             &lt;\/p&gt;\r\n           &lt;\/div&gt;\r\n \r\n           &lt;div className=\"product-price-btn\"&gt;\r\n             &lt;p&gt;\r\n               &lt;span&gt;$20&lt;\/span&gt;\r\n             &lt;\/p&gt;\r\n             &lt;button type=\"submit\"&gt;\r\n               Buy now\r\n             &lt;\/button&gt;\r\n           &lt;\/div&gt;\r\n     &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\r\n&#13;\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/FCOdRG6yQK08jde_riPRDNJyEpEzLh1McvNi5io0fsadxq4_0cQP_4i24UvpEWOHc-h-I7t8nIn6pgmpG7fuHN5BImixIj8wvJsYspwk_LBh0lwpcU6bQtBPWCY6AFgSgpyuB3uzs0.png\" alt=\"pago con paypal\"\/><\/figure>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Integrar PayPal CheckOut en React App<\/h2>&#13;\n&#13;\n<p>Para integrar el proceso de pago de PayPal en nuestra aplicaci\u00f3n, tenemos que modificar <a href=\"https:\/\/developer.paypal.com\/docs\/business\/checkout\/server-side-api-calls\/create-order\/\">la API proporcionada por PayPal<\/a> para crear un pedido, comprobar la aprobaci\u00f3n y los errores.<\/p>&#13;\n&#13;\n<p>Antes de hacer eso, vamos a llamar a un par de ganchos para manejar nuestro estado esperado.<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code> const [show, setShow] = useState(false);\r\n const [success, setSuccess] = useState(false);\r\n const [ErrorMessage, setErrorMessage] = useState(\");\r\n const [orderID, setOrderID] = useState(false);<\/code><\/pre>\r\n&#13;\n<p>Llamaremos al gancho <em>show<\/em> useState cuando nuestro usuario est\u00e9 listo para comprar el producto.<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Crear un pedido<\/h3>&#13;\n\r\n<pre class=\"wp-block-code\"><code>\/\/ creates a paypal order\r\n const createOrder = (data, actions) =&gt; {\r\n   return actions.order\r\n     .create({\r\n       purchase_units: [\r\n         {\r\n           description: \"Sunflower\",\r\n           amount: {\r\n             currency_code: \"USD\",\r\n             value: 20,\r\n           },\r\n         },\r\n       ],\r\n       \/\/ not needed if a shipping address is actually needed\r\n       application_context: {\r\n         shipping_preference: \"NO_SHIPPING\",\r\n       },\r\n     })\r\n     .then((orderID) =&gt; {\r\n       setOrderID(orderID);\r\n       return orderID;\r\n     });\r\n };<\/code><\/pre>\r\n&#13;\n<h3 class=\"wp-block-heading\">Aprobaci\u00f3n del cheque<\/h3>&#13;\n\r\n<pre class=\"wp-block-code\"><code>\/\/ check Approval\r\n const onApprove = (data, actions) =&gt; {\r\n   return actions.order.capture().then(function (details) {\r\n     const { payer } = details;\r\n     setSuccess(true);\r\n   });\r\n };<\/code><\/pre>\r\n&#13;\n<h3 class=\"wp-block-heading\">Comprobar errores<\/h3>&#13;\n\r\n<pre class=\"wp-block-code\"><code>\/\/capture likely error\r\n const onError = (data, actions) =&gt; {\r\n   setPaypalErrorMessage(\"An Error occured with your payment \");\r\n };<\/code><\/pre>\r\n&#13;\n<p>Aqu\u00ed est\u00e1 nuestro archivo <em>App.js <\/em>en su totalidad.<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>import React, { useState } from \"react\";\r\nimport { PayPalScriptProvider, PayPalButtons } from \"@paypal\/react-paypal-js\";\r\nimport \".\/App.css\";\r\n \r\nexport default function App() {\r\n const [show, setShow] = useState(false);\r\n const [success, setSuccess] = useState(false);\r\n const [ErrorMessage, setErrorMessage] = useState(\");\r\n const [orderID, setOrderID] = useState(false);\r\n \r\n \/\/ creates a paypal order\r\n const createOrder = (data, actions) =&gt; {\r\n   return actions.order\r\n     .create({\r\n       purchase_units: [\r\n         {\r\n           description: \"Sunflower\",\r\n           amount: {\r\n             currency_code: \"USD\",\r\n             value: 20,\r\n           },\r\n         },\r\n       ],\r\n       \/\/ not needed if a shipping address is actually needed\r\n       application_context: {\r\n         shipping_preference: \"NO_SHIPPING\",\r\n       },\r\n     })\r\n     .then((orderID) =&gt; {\r\n       setOrderID(orderID);\r\n       return orderID;\r\n     });\r\n };\r\n \r\n \/\/ check Approval\r\n const onApprove = (data, actions) =&gt; {\r\n   return actions.order.capture().then(function (details) {\r\n     const { payer } = details;\r\n     setSuccess(true);\r\n   });\r\n };\r\n \/\/capture likely error\r\n const onError = (data, actions) =&gt; {\r\n   setErrorMessage(\"An Error occured with your payment \");\r\n };\r\n return (\r\n   &lt;PayPalScriptProvider\r\n     options={{\r\n       \"client-id\":\",\r\n     }}\r\n   &gt;\r\n     &lt;div&gt;\r\n       &lt;div className=\"wrapper\"&gt;\r\n         &lt;div className=\"product-img\"&gt;\r\n           &lt;img\r\n             src=\"https:\/\/cdn.pixabay.com\/photo\/2021\/08\/15\/06\/54\/sunflower-6546993_1280.jpg\"\r\n             alt=\"SunFlower\"\r\n             height=\"420\"\r\n             width=\"327\"\r\n           \/&gt;\r\n         &lt;\/div&gt;\r\n         &lt;div className=\"product-info\"&gt;\r\n           &lt;div className=\"product-text\"&gt;\r\n             &lt;h1&gt;Sunflower&lt;\/h1&gt;\r\n             &lt;h2&gt;POPULAR HOUSE PLANT&lt;\/h2&gt;\r\n             &lt;p&gt;\r\n               Sunflowers are usually tall annual or perennial plants.\r\n               &lt;br \/&gt;\r\n               Each \"flower\" is actually a\r\n               &lt;br \/&gt;\r\n               disc made up of tiny flowers,\r\n               &lt;br \/&gt;\r\n               to better attract pollinators.{\" \"}\r\n             &lt;\/p&gt;\r\n           &lt;\/div&gt;\r\n \r\n           &lt;div className=\"product-price-btn\"&gt;\r\n             &lt;p&gt;\r\n               &lt;span&gt;$20&lt;\/span&gt;\r\n             &lt;\/p&gt;\r\n             &lt;button type=\"submit\" onClick={() =&gt; setShow(true)}&gt;\r\n               Buy now\r\n             &lt;\/button&gt;\r\n           &lt;\/div&gt;\r\n         &lt;\/div&gt;\r\n       &lt;\/div&gt;\r\n \r\n       {show ? (\r\n         &lt;PayPalButtons\r\n           style={{ layout: \"vertical\" }}\r\n           createOrder={createOrder}\r\n           onApprove={onApprove}\r\n         \/&gt;\r\n       ) : null}\r\n     &lt;\/div&gt;\r\n   &lt;\/PayPalScriptProvider&gt;\r\n );\r\n}<\/code><\/pre>\r\n&#13;\n<h2 class=\"wp-block-heading\">Probando nuestra aplicaci\u00f3n PayPal CheckOut React<\/h2>&#13;\n&#13;\n<p>Para probar nuestra aplicaci\u00f3n es necesario crear una <a href=\"https:\/\/www.sandbox.paypal.com\/\">cuenta sandbox<\/a><\/p>&#13;\n&#13;\n<p>Sin embargo, si le resulta dif\u00edcil crear uno, puede probar nuestro m\u00e9todo <em>useEffect<\/em> + <em>console.log <\/em>, que utilizaremos para comprobar nuestro <em>orderID<\/em> y si nuestro estado de <em>\u00e9xito<\/em> cambi\u00f3 con \u00e9xito. <\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>  useEffect(() =&gt; {\r\n      if (success) {\r\n        alert(\"Payment successful!!\");\r\n      }\r\n    },\r\n    [success]\r\n  );\r\n \r\n console.log(1, orderID);\r\n console.log(2, success);\r\n console.log(3, ErrorMessage);<\/code><\/pre>\r\n&#13;\n<p>Aqu\u00ed puede encontrar <a href=\"https:\/\/stripe.com\/docs\/testing\">n\u00fameros de tarjeta de prueba proporcionados por Stripe,<\/a> que puede utilizar para probar la p\u00e1gina de pago.<\/p>&#13;\n&#13;\n<figure class=\"wp-block-video\"><video style=\"aspect-ratio: 2560 \/ 1702;\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2021\/10\/React-Paypal-Unimedia-1.mp4\" controls=\"controls\" width=\"2560\" height=\"1702\"><\/video><\/figure>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Resumen<\/h2>&#13;\n&#13;\n<p>Eso es todo por ahora. Esperamos que te hayas divertido con el tutorial. Con PayPal Checkout, crear un proceso de pago fluido para su aplicaci\u00f3n React es una experiencia perfecta. <\/p>&#13;\n&#13;\n<p>Puede obtener el c\u00f3digo completo aqu\u00ed como referencia.<\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\"><br\/>Unimedia Technology<\/h2>&#13;\n&#13;\n<p>Aqu\u00ed en <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia Technology<\/a> tenemos un equipo de<strong> Cloud Native Developers<\/strong> que pueden ayudarte a desarrollar tus Aplicaciones AWS y Azure m\u00e1s complejas.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n","protected":false},"excerpt":{"rendered":"<p>&#13; En este art\u00edculo aprenderemos a integrar PayPal Checkout con React Hooks. Sin embargo, si prefieres Stripe, aqu\u00ed est\u00e1 el art\u00edculo que escribimos sobre la integraci\u00f3n de Stripe con React . &#13; &#13; Tambi\u00e9n le puede interesar: &#8220;El \u00faltimo proyecto de Unimedia, Zellar, \u00a1se pone en marcha!&#8221; &#13; &#13; \u00bfQu\u00e9 es PayPal Checkout? &#13; &#13; [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":6697,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[215,220],"tags":[],"class_list":["post-7239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-technical-guides-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 PayPal 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\/paypal-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 PayPal Checkout con React\" \/>\n<meta property=\"og:description\" content=\"&#013; En este art\u00edculo aprenderemos a integrar PayPal Checkout con React Hooks. Sin embargo, si prefieres Stripe, aqu\u00ed est\u00e1 el art\u00edculo que escribimos sobre la integraci\u00f3n de Stripe con React . &#013; &#013; Tambi\u00e9n le puede interesar: &#8220;El \u00faltimo proyecto de Unimedia, Zellar, \u00a1se pone en marcha!&#8221; &#013; &#013; \u00bfQu\u00e9 es PayPal Checkout? &#013; &#013; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/es\/paypal-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-10-09T05:50:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-16T15:50:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/3-1-4.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 PayPal 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\/paypal-checkout-integration-with-react\/","og_locale":"es_ES","og_type":"article","og_title":"Integraci\u00f3n de PayPal Checkout con React","og_description":"&#13; En este art\u00edculo aprenderemos a integrar PayPal Checkout con React Hooks. Sin embargo, si prefieres Stripe, aqu\u00ed est\u00e1 el art\u00edculo que escribimos sobre la integraci\u00f3n de Stripe con React . &#13; &#13; Tambi\u00e9n le puede interesar: &#8220;El \u00faltimo proyecto de Unimedia, Zellar, \u00a1se pone en marcha!&#8221; &#13; &#13; \u00bfQu\u00e9 es PayPal Checkout? &#13; &#13; [&hellip;]","og_url":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/","og_site_name":"Unimedia Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/unimedia-technology\/","article_published_time":"2021-10-09T05:50:53+00:00","article_modified_time":"2024-01-16T15:50:54+00:00","og_image":[{"width":700,"height":400,"url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/3-1-4.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\/paypal-checkout-integration-with-react\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/es\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Integraci\u00f3n de PayPal Checkout con React","datePublished":"2021-10-09T05:50:53+00:00","dateModified":"2024-01-16T15:50:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/"},"wordCount":570,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/es\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/3-1-4.png","articleSection":["React","Technical Guides"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/","url":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/","name":"Integraci\u00f3n de PayPal Checkout con React - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/3-1-4.png","datePublished":"2021-10-09T05:50:53+00:00","dateModified":"2024-01-16T15:50:54+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/paypal-checkout-integration-with-react\/#primaryimage","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/3-1-4.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/3-1-4.png","width":700,"height":400,"caption":"paypal"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unimedia.tech\/es\/paypal-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 PayPal 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\/7239","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=7239"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/posts\/7239\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/media\/6697"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/media?parent=7239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/categories?post=7239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/tags?post=7239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}