{"id":7319,"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":"2023-12-18T13:08:14","modified_gmt":"2023-12-18T12:08:14","slug":"paypal-checkout-integration-with-react","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/","title":{"rendered":"PayPal Checkout Integration with React"},"content":{"rendered":"\n<p>In this article, we will learn how to integrate PayPal Checkout with <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">React Hooks<\/a>. However, if you prefer Stripe, here\u2019s <a href=\"https:\/\/www.unimedia.tech\/2021\/08\/17\/stripe-checkout-integration-with-react\/\">Stripe integration with React <\/a>article we wrote.&nbsp;<\/p>\n\n\n\n<p>You may also be interested in: <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/22\/unimedia-zellar-goes-live\/\">&#8220;Unimedia\u2019s latest project, Zellar, goes live!&#8221;<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is PayPal Checkout?<\/h2>\n\n\n\n<p>PayPal checkout seamlessly integrates PayPal\u2019s popular online payments system into your Web App, leveraging the <a href=\"https:\/\/developer.paypal.com\/docs\/business\/checkout\/\">PayPal JavaScript SDK<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Goal<\/h2>\n\n\n\n<p>Our goal today is to learn the following tasks:<\/p>\n\n\n\n<p>1. Integrate PayPal Javascript SDK using the <a href=\"https:\/\/github.com\/paypal\/react-paypal-js\">PayPay React components wrapper.<\/a><\/p>\n\n\n\n<p>2. How to create a sample product.&nbsp;<\/p>\n\n\n\n<p>3. Successfully integrate that product in our React.js App.<\/p>\n\n\n\n<p>3. Successfully redirect to the PayPal Checkout page and record responses.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Knowledge of <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">React js and React Hooks<\/a>.<\/li><li>React 16.8 or later<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Install PayPal CheckOut React Components Package<\/h2>\n\n\n\n<p>Using the direct PayPal SDK with our react app can be tasking which is why PayPal <a href=\"https:\/\/www.unimedia.tech\/de\/engagierte-entwicklungsteams\/\">created <\/a>the react package. So let\u2019s get started by <a href=\"https:\/\/www.unimedia.tech\/de\/bespoke-software-development\/\">creating <\/a>our react app and installing the package too.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app react-paypal\nnpm install @paypal\/react-paypal-js\ncd react-paypal\nnpm start\n<\/code><\/pre>\n\n\n\n<p>Next, we will be getting essential credentials from the <a href=\"https:\/\/developer.paypal.com\/home\/\">PayPal Developer Page<\/a>. After signing up,&nbsp; you will be able to create an app.<\/p>\n\n\n\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>\n\n\n\n<p>Click the \u2018<em>create app<\/em>\u2019 button and fill in the necessary details. PayPal will provide you with your <em>clientID<\/em>.&nbsp;<\/p>\n\n\n\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=\"paypal checkout\"\/><\/figure>\n\n\n\n<p>Next, we will be following the documentation of the package to call a sample checkout button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { PayPalScriptProvider, PayPalButtons } from \"@paypal\/react-paypal-js\";\n \nexport default function App() {\n   return (\n       &lt;PayPalScriptProvider options={{ \"client-id\": \"test\" }}&gt;\n           &lt;PayPalButtons style={{ layout: \"horizontal\" }} \/&gt;\n       &lt;\/PayPalScriptProvider&gt;\n   );\n}<\/code><\/pre>\n\n\n\n<p>Fill in your client-id to get the sample checkout button shown below. Remember that you should create a <em>.env file<\/em> for your app credentials if it is a production app.<\/p>\n\n\n\n<p>&nbsp;if it is a production app.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/NblyB5zfdnKIWdezGLU1XJ7YJuTgcktwmW-rM2sVRn3tfOsRLeMGGOzBiQfNclYHF2Kk4v3QSp95Yqnac56OkPPVyx4jg4pHziut4y-OmTOJZw6Lsy2gGts1uND2cP7bPOTIFzvs0.png\" alt=\"paypal checkout\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">2. Create A Product Card<\/h2>\n\n\n\n<p>Next, we will be creating a product card inspired by our Stripe examples.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>   &lt;div className=\"wrapper\"&gt;\n         &lt;div className=\"product-img\"&gt;\n           &lt;img\n             src=\"https:\/\/cdn.pixabay.com\/photo\/2021\/08\/15\/06\/54\/sunflower-6546993_1280.jpg\"\n             alt=\"SunFlower\"\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;Sunflower&lt;\/h1&gt;\n             &lt;h2&gt;POPULAR HOUSE PLANT&lt;\/h2&gt;\n             &lt;p&gt;\n               Sunflowers are usually tall annual or perennial plants.\n               &lt;br \/&gt;\n               Each \"flower\" is actually a\n               &lt;br \/&gt;\n               disc made up of tiny flowers,\n               &lt;br \/&gt;\n               to better attract pollinators.{\" \"}\n             &lt;\/p&gt;\n           &lt;\/div&gt;\n \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;\n               Buy now\n             &lt;\/button&gt;\n           &lt;\/div&gt;\n     &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\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=\"paypal checkout\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Integrate PayPal CheckOut into React App<\/h2>\n\n\n\n<p>To integrate PayPal checkout into our app, we need to tweak <a href=\"https:\/\/developer.paypal.com\/docs\/business\/checkout\/server-side-api-calls\/create-order\/\">the API provided by PayPal<\/a> for creating an order, checking approval, and errors.<\/p>\n\n\n\n<p>Before doing that, let\u2019s call a couple of hooks to handle our expected state.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> const &#91;show, setShow] = useState(false);\n const &#91;success, setSuccess] = useState(false);\n const &#91;ErrorMessage, setErrorMessage] = useState(\");\n const &#91;orderID, setOrderID] = useState(false);<\/code><\/pre>\n\n\n\n<p>We will be calling the <em>show<\/em> useState Hook when our user is ready to buy the product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create An Order<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ creates a paypal order\n const createOrder = (data, actions) =&gt; {\n   return actions.order\n     .create({\n       purchase_units: &#91;\n         {\n           description: \"Sunflower\",\n           amount: {\n             currency_code: \"USD\",\n             value: 20,\n           },\n         },\n       ],\n       \/\/ not needed if a shipping address is actually needed\n       application_context: {\n         shipping_preference: \"NO_SHIPPING\",\n       },\n     })\n     .then((orderID) =&gt; {\n       setOrderID(orderID);\n       return orderID;\n     });\n };<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Check Approval<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ check Approval\n const onApprove = (data, actions) =&gt; {\n   return actions.order.capture().then(function (details) {\n     const { payer } = details;\n     setSuccess(true);\n   });\n };<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Check Errors<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/capture likely error\n const onError = (data, actions) =&gt; {\n   setPaypalErrorMessage(\"An Error occured with your payment \");\n };<\/code><\/pre>\n\n\n\n<p>Here\u2019s our <em>App.js <\/em>file in its entirety.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState } from \"react\";\nimport { PayPalScriptProvider, PayPalButtons } from \"@paypal\/react-paypal-js\";\nimport \".\/App.css\";\n \nexport default function App() {\n const &#91;show, setShow] = useState(false);\n const &#91;success, setSuccess] = useState(false);\n const &#91;ErrorMessage, setErrorMessage] = useState(\");\n const &#91;orderID, setOrderID] = useState(false);\n \n \/\/ creates a paypal order\n const createOrder = (data, actions) =&gt; {\n   return actions.order\n     .create({\n       purchase_units: &#91;\n         {\n           description: \"Sunflower\",\n           amount: {\n             currency_code: \"USD\",\n             value: 20,\n           },\n         },\n       ],\n       \/\/ not needed if a shipping address is actually needed\n       application_context: {\n         shipping_preference: \"NO_SHIPPING\",\n       },\n     })\n     .then((orderID) =&gt; {\n       setOrderID(orderID);\n       return orderID;\n     });\n };\n \n \/\/ check Approval\n const onApprove = (data, actions) =&gt; {\n   return actions.order.capture().then(function (details) {\n     const { payer } = details;\n     setSuccess(true);\n   });\n };\n \/\/capture likely error\n const onError = (data, actions) =&gt; {\n   setErrorMessage(\"An Error occured with your payment \");\n };\n return (\n   &lt;PayPalScriptProvider\n     options={{\n       \"client-id\":\",\n     }}\n   &gt;\n     &lt;div&gt;\n       &lt;div className=\"wrapper\"&gt;\n         &lt;div className=\"product-img\"&gt;\n           &lt;img\n             src=\"https:\/\/cdn.pixabay.com\/photo\/2021\/08\/15\/06\/54\/sunflower-6546993_1280.jpg\"\n             alt=\"SunFlower\"\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;Sunflower&lt;\/h1&gt;\n             &lt;h2&gt;POPULAR HOUSE PLANT&lt;\/h2&gt;\n             &lt;p&gt;\n               Sunflowers are usually tall annual or perennial plants.\n               &lt;br \/&gt;\n               Each \"flower\" is actually a\n               &lt;br \/&gt;\n               disc made up of tiny flowers,\n               &lt;br \/&gt;\n               to better attract pollinators.{\" \"}\n             &lt;\/p&gt;\n           &lt;\/div&gt;\n \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\" onClick={() =&gt; setShow(true)}&gt;\n               Buy now\n             &lt;\/button&gt;\n           &lt;\/div&gt;\n         &lt;\/div&gt;\n       &lt;\/div&gt;\n \n       {show ? (\n         &lt;PayPalButtons\n           style={{ layout: \"vertical\" }}\n           createOrder={createOrder}\n           onApprove={onApprove}\n         \/&gt;\n       ) : null}\n     &lt;\/div&gt;\n   &lt;\/PayPalScriptProvider&gt;\n );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. Testing Our PayPal CheckOut React App<\/h2>\n\n\n\n<p>Testing our app requires you to create a <a href=\"https:\/\/www.sandbox.paypal.com\/\">sandbox account<\/a><\/p>\n\n\n\n<p>However, if you find it difficult to create one, you can try our <em>useEffect<\/em> + <em>console.log <\/em>method, which we will use to check our <em>orderID<\/em> and if our <em>success<\/em> state changed successfully.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  useEffect(() =&gt; {\n      if (success) {\n        alert(\"Payment successful!!\");\n      }\n    },\n    &#91;success]\n  );\n \n console.log(1, orderID);\n console.log(2, success);\n console.log(3, ErrorMessage);<\/code><\/pre>\n\n\n\n<p>You can find <a href=\"https:\/\/stripe.com\/docs\/testing\">test card numbers provided by Stripe here<\/a>, which you can use to test the checkout page.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1702\" style=\"aspect-ratio: 2560 \/ 1702;\" width=\"2560\" controls src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2021\/10\/React-Paypal-Unimedia-1.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>That\u2019s all for now. We hope you had fun going through the tutorial. With PayPal Checkout, creating a smooth payment process for your React app is a seamless experience.&nbsp;<\/p>\n\n\n\n<p>You can get the complete code here for reference.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><br>Unimedia Technology<\/h2>\n\n\n\n<p>Here at&nbsp;<a href=\"https:\/\/www.unimedia.tech\/de\/\">Unimedia Technology<\/a>&nbsp;we have a team of<strong>&nbsp;Cloud Native Developers<\/strong>&nbsp;that can help you develop your most complex AWS and Azure Applications.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will learn how to integrate PayPal Checkout with React Hooks. However, if you prefer Stripe, here\u2019s Stripe integration with React article we wrote.&nbsp; You may also be interested in: &#8220;Unimedia\u2019s latest project, Zellar, goes live!&#8221; What is PayPal Checkout? PayPal checkout seamlessly integrates PayPal\u2019s popular online payments system into your Web [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":6696,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[214,219],"tags":[],"class_list":["post-7319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-technical-guides-de","category-technical-guides-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.6 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>PayPal Checkout Integration with React - Unimedia Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PayPal Checkout Integration with React\" \/>\n<meta property=\"og:description\" content=\"In this article, we will learn how to integrate PayPal Checkout with React Hooks. However, if you prefer Stripe, here\u2019s Stripe integration with React article we wrote.&nbsp; You may also be interested in: &#8220;Unimedia\u2019s latest project, Zellar, goes live!&#8221; What is PayPal Checkout? PayPal checkout seamlessly integrates PayPal\u2019s popular online payments system into your Web [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/de\/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=\"2023-12-18T12:08:14+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=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"PayPal Checkout Integration with React - Unimedia Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/","og_locale":"de_DE","og_type":"article","og_title":"PayPal Checkout Integration with React","og_description":"In this article, we will learn how to integrate PayPal Checkout with React Hooks. However, if you prefer Stripe, here\u2019s Stripe integration with React article we wrote.&nbsp; You may also be interested in: &#8220;Unimedia\u2019s latest project, Zellar, goes live!&#8221; What is PayPal Checkout? PayPal checkout seamlessly integrates PayPal\u2019s popular online payments system into your Web [&hellip;]","og_url":"https:\/\/www.unimedia.tech\/de\/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":"2023-12-18T12:08:14+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":{"Verfasst von":"Unimedia","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"PayPal Checkout Integration with React","datePublished":"2021-10-09T05:50:53+00:00","dateModified":"2023-12-18T12:08:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/"},"wordCount":500,"publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/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":"de"},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/","url":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/","name":"PayPal Checkout Integration with React - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/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":"2023-12-18T12:08:14+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/de\/paypal-checkout-integration-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/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\/de\/paypal-checkout-integration-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/de\/"},{"@type":"ListItem","position":2,"name":"PayPal Checkout Integration with React"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/de\/#website","url":"https:\/\/www.unimedia.tech\/de\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/de\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","width":403,"height":309,"caption":"Unimedia Technology"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/unimedia-technology\/","https:\/\/x.com\/UnimediaCTO","https:\/\/www.instagram.com\/unimedia.technology\/"]},{"@type":"Person","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","caption":"Unimedia"}}]}},"_links":{"self":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/comments?post=7319"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7319\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media\/6696"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media?parent=7319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/categories?post=7319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/tags?post=7319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}