{"id":7180,"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\/ca\/paypal-checkout-integration-with-react\/","title":{"rendered":"Integraci\u00f3 de PayPal Checkout amb React"},"content":{"rendered":"&#13;\n<p>En aquest article, aprendrem a integrar PayPal Checkout amb <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">React Hooks<\/a>. Tanmateix, si preferiu Stripe, aqu\u00ed teniu l&#8217;article <a href=\"https:\/\/www.unimedia.tech\/2021\/08\/17\/stripe-checkout-integration-with-react\/\">sobre la integraci\u00f3 de Stripe amb React<\/a> que hem escrit.  <\/p>&#13;\n&#13;\n<p>Tamb\u00e9 us pot interessar: <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/22\/unimedia-zellar-goes-live\/\">&#8220;L&#8217;\u00faltim projecte d&#8217;Unimedia, Zellar, es posa en marxa!&#8221;<\/a><\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Qu\u00e8 \u00e9s PayPal Checkout?<\/h2>&#13;\n&#13;\n<p>PayPal Checkout integra perfectament el popular sistema de pagaments en l\u00ednia de PayPal a la vostra aplicaci\u00f3 web, aprofitant l&#8217; <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\">Objectiu<\/h2>&#13;\n&#13;\n<p>El nostre objectiu avui \u00e9s aprendre les tasques seg\u00fcents:<\/p>&#13;\n&#13;\n<p>1. Integrar l&#8217;SDK de JavaScript de PayPal mitjan\u00e7ant l&#8217; <a href=\"https:\/\/github.com\/paypal\/react-paypal-js\">embolcall de components PayPay React.<\/a><\/p>&#13;\n&#13;\n<p>2. Com crear un producte de mostra.  <\/p>&#13;\n&#13;\n<p>3. Integrar amb \u00e8xit aquest producte a la nostra aplicaci\u00f3 React.js.<\/p>&#13;\n&#13;\n<p>3. Redirigir \u200b\u200bcorrectament a la p\u00e0gina de pagament de PayPal i enregistra les respostes.<\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Requisits previs<\/h2>&#13;\n&#13;\n<ul class=\"wp-block-list\">&#13;\n<li>Coneixements de <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">React js i React Hooks<\/a>.<\/li>&#13;\n<li>.<\/li>&#13;\n<\/ul>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Instal\u00b7leu el paquet de components PayPal CheckOut React<\/h2>&#13;\n&#13;\n<p>Utilitzar l&#8217;SDK directe de PayPal amb la nostra aplicaci\u00f3 react pot ser una tasca, per aix\u00f2 PayPal <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">va crear<\/a> el paquet react. Aix\u00ed que comencem <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">creant<\/a> la nostra aplicaci\u00f3 react i instal\u00b7lant tamb\u00e9 el paquet.  <\/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\u00f3, obtindrem les credencials essencials de la <a href=\"https:\/\/developer.paypal.com\/home\/\">p\u00e0gina de desenvolupadors de PayPal<\/a> . Despr\u00e9s de registrar-te, podr\u00e0s crear una aplicaci\u00f3.<\/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>Feu clic al bot\u00f3 &#8221; <em>crear aplicaci\u00f3<\/em> &#8221; i ompliu els detalls necessaris. PayPal us proporcionar\u00e0 el vostre <em>ID de client<\/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=\"pagament de paypal\"\/><\/figure>&#13;\n&#13;\n<p>A continuaci\u00f3, seguirem la documentaci\u00f3 del paquet per trucar a un bot\u00f3 de compra de mostra.<\/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>Ompliu el vostre identificador de client per obtenir el bot\u00f3 de compra de mostra que es mostra a continuaci\u00f3. Recordeu que haur\u00edeu de crear un <em>fitxer .env<\/em> per a les credencials de l&#8217;aplicaci\u00f3 si es tracta d&#8217;una aplicaci\u00f3 de producci\u00f3.<\/p>&#13;\n&#13;\n<p> .<\/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=\"pagament de paypal\"\/><\/figure>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Crea una targeta de producte<\/h2>&#13;\n&#13;\n<p>A continuaci\u00f3, crearem una targeta de producte inspirada en els nostres exemples 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=\"pagament de paypal\"\/><\/figure>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Integreu PayPal CheckOut a l&#8217;aplicaci\u00f3 React<\/h2>&#13;\n&#13;\n<p>Per integrar el pagament de PayPal a la nostra aplicaci\u00f3, hem d&#8217;ajustar <a href=\"https:\/\/developer.paypal.com\/docs\/business\/checkout\/server-side-api-calls\/create-order\/\">l&#8217;API proporcionada per PayPal<\/a> per crear una comanda, comprovar l&#8217;aprovaci\u00f3 i els errors.<\/p>&#13;\n&#13;\n<p>Abans de fer-ho, trucem a un parell de ganxos per gestionar el nostre estat esperat.<\/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>Direm l&#8217; <em>espectacle<\/em> useState Hook quan el nostre usuari estigui preparat per comprar el producte.<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Crear una comanda<\/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\">Comprovar l&#8217;aprovaci\u00f3<\/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\">Comprovar els errors<\/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 teniu el nostre fitxer <em>App.js<\/em> sencer.<\/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\">Provant la nostra aplicaci\u00f3 PayPal CheckOut React<\/h2>&#13;\n&#13;\n<p>Per provar la nostra aplicaci\u00f3, cal que creeu un <a href=\"https:\/\/www.sandbox.paypal.com\/\">compte de sandbox<\/a><\/p>&#13;\n&#13;\n<p>Tanmateix, si us costa crear-ne un, podeu provar el nostre m\u00e8tode <em>useEffect<\/em> + <em>console.log<\/em> , que utilitzarem per comprovar el nostre <em>ID de comanda<\/em> i si el nostre estat <em>d&#8217;\u00e8xit<\/em> ha canviat correctament.  <\/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>Podeu trobar <a href=\"https:\/\/stripe.com\/docs\/testing\">els n\u00fameros de targeta de prova proporcionats per Stripe aqu\u00ed<\/a> , que podeu utilitzar per provar la p\u00e0gina de pagament.<\/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\">Resum<\/h2>&#13;\n&#13;\n<p>Aix\u00f2 \u00e9s tot per ara. Esperem que us divertiu fent el tutorial. Amb PayPal Checkout, crear un proc\u00e9s de pagament fluid per a la vostra aplicaci\u00f3 React \u00e9s una experi\u00e8ncia perfecta.  <\/p>&#13;\n&#13;\n<p>Podeu obtenir el codi complet aqu\u00ed com a refer\u00e8ncia.<\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\"><br\/>Unimedia Technology<\/h2>&#13;\n&#13;\n<p>Aqu\u00ed a <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia Technology<\/a> tenim un equip de <strong>desenvolupadors nadius al n\u00favol<\/strong> que us poden ajudar a desenvolupar les vostres aplicacions AWS i Azure m\u00e9s complexes.<\/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 aquest article, aprendrem a integrar PayPal Checkout amb React Hooks. Tanmateix, si preferiu Stripe, aqu\u00ed teniu l&#8217;article sobre la integraci\u00f3 de Stripe amb React que hem escrit. &#13; &#13; Tamb\u00e9 us pot interessar: &#8220;L&#8217;\u00faltim projecte d&#8217;Unimedia, Zellar, es posa en marxa!&#8221; &#13; &#13; Qu\u00e8 \u00e9s PayPal Checkout? &#13; &#13; PayPal Checkout integra perfectament [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":6695,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[213,218],"tags":[],"class_list":["post-7180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-technical-guides-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 PayPal 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\/paypal-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 PayPal Checkout amb React\" \/>\n<meta property=\"og:description\" content=\"&#013; En aquest article, aprendrem a integrar PayPal Checkout amb React Hooks. Tanmateix, si preferiu Stripe, aqu\u00ed teniu l&#8217;article sobre la integraci\u00f3 de Stripe amb React que hem escrit. &#013; &#013; Tamb\u00e9 us pot interessar: &#8220;L&#8217;\u00faltim projecte d&#8217;Unimedia, Zellar, es posa en marxa!&#8221; &#013; &#013; Qu\u00e8 \u00e9s PayPal Checkout? &#013; &#013; PayPal Checkout integra perfectament [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/ca\/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=\"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=\"5 minuts\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Integraci\u00f3 de PayPal 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\/paypal-checkout-integration-with-react\/","og_locale":"ca_ES","og_type":"article","og_title":"Integraci\u00f3 de PayPal Checkout amb React","og_description":"&#13; En aquest article, aprendrem a integrar PayPal Checkout amb React Hooks. Tanmateix, si preferiu Stripe, aqu\u00ed teniu l&#8217;article sobre la integraci\u00f3 de Stripe amb React que hem escrit. &#13; &#13; Tamb\u00e9 us pot interessar: &#8220;L&#8217;\u00faltim projecte d&#8217;Unimedia, Zellar, es posa en marxa!&#8221; &#13; &#13; Qu\u00e8 \u00e9s PayPal Checkout? &#13; &#13; PayPal Checkout integra perfectament [&hellip;]","og_url":"https:\/\/www.unimedia.tech\/ca\/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":{"Escrit per":"Unimedia","Temps estimat de lectura":"5 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/ca\/paypal-checkout-integration-with-react\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/paypal-checkout-integration-with-react\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Integraci\u00f3 de PayPal Checkout amb React","datePublished":"2021-10-09T05:50:53+00:00","dateModified":"2024-01-16T15:50:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/paypal-checkout-integration-with-react\/"},"wordCount":543,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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":"ca","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/ca\/paypal-checkout-integration-with-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/ca\/paypal-checkout-integration-with-react\/","url":"https:\/\/www.unimedia.tech\/ca\/paypal-checkout-integration-with-react\/","name":"Integraci\u00f3 de PayPal Checkout amb React - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/paypal-checkout-integration-with-react\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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\/ca\/paypal-checkout-integration-with-react\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/ca\/paypal-checkout-integration-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/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\/ca\/paypal-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 PayPal 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\/7180","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=7180"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7180\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media\/6695"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media?parent=7180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/categories?post=7180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/tags?post=7180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}