{"id":10216,"date":"2019-06-03T17:51:40","date_gmt":"2019-06-03T15:51:40","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=10216"},"modified":"2019-06-07T10:13:59","modified_gmt":"2019-06-07T08:13:59","slug":"ionic-paypal-smart-payment","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-paypal-smart-payment\/","title":{"rendered":"Angular &#038; Ionic 4 &#8211; PayPal mobilno pla\u0107anje"},"content":{"rendered":"<p>Cilj ovog blog posta je pokazati <strong>kako implementirati <em>PayPal<\/em> pla\u0107anje unutar <em><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/uvod-ionic-4\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ionic 4<\/a><\/em>, <em><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-pwa\/\" target=\"_blank\" rel=\"noopener noreferrer\">PWA<\/a><\/em>, aplikacije<\/strong> koriste\u0107i <strong><em><a href=\"https:\/\/developer.paypal.com\/docs\/checkout\/\" target=\"_blank\" rel=\"noopener noreferrer\">Smart Payment Button (Checkout)<\/a><\/em><\/strong>.<\/p>\n<p>Osim <em>Smart Payment Buttons<\/em>, <em>PayPal<\/em> omogu\u0107ava sljede\u0107e vrste pla\u0107anja:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.paypal.com\/docs\/partners\/\" target=\"_blank\" rel=\"noopener noreferrer\">PayPal Commerce Platform<\/a><\/li>\n<li><a href=\"https:\/\/developer.paypal.com\/docs\/subscriptions\/\" target=\"_blank\" rel=\"noopener noreferrer\">Subscriptions<\/a><\/li>\n<li><a href=\"https:\/\/developer.paypal.com\/docs\/payouts\/\" target=\"_blank\" rel=\"noopener noreferrer\">Payouts<\/a><\/li>\n<li><a href=\"https:\/\/developer.paypal.com\/docs\/invoicing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Invoicing<\/a><\/li>\n<li><a href=\"https:\/\/developer.paypal.com\/docs\/accept-payments\/#credit-card-acceptance-on-your-website-or-mobile-app\" target=\"_blank\" rel=\"noopener noreferrer\">Accept card payments<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_10229\" aria-describedby=\"caption-attachment-10229\" style=\"width: 1112px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-0-min.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-10229\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-0-min.jpg\" alt=\"PayPal Smart Payment\" width=\"1112\" height=\"460\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-0-min.jpg 1112w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-0-min-300x124.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-0-min-768x318.jpg 768w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-0-min-1024x424.jpg 1024w\" sizes=\"auto, (max-width: 1112px) 100vw, 1112px\" \/><\/a><figcaption id=\"caption-attachment-10229\" class=\"wp-caption-text\">PayPal Developer: https:\/\/developer.paypal.com\/<\/figcaption><\/figure>\n<p>Primjeri u ovom blog postu temelje se na dokumentaciji dostupnoj na poveznici <a href=\"https:\/\/developer.paypal.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/developer.paypal.com\/<\/a>.<\/p>\n<p>Iako u testnom okru\u017eenju, pla\u0107anje kreirano na ovaj na\u010din biti \u0107e uspje\u0161no provedeno \u0161to \u0107e se mo\u0107i vidjeti unutar <em>PayPal<\/em> testnog su\u010delja i prikazano u nastavku ovog blog posta.<\/p>\n<p>Ipak, kako je vidljivo u slu\u017ebenoj dokumentaciji potrebno je napraviti i serverski tj. backend dio koji \u0107e slu\u017eiti kao potvrda uspje\u0161nog pla\u0107anja. Serverski dio u ovom blog postu ne\u0107e biti detaljnije obra\u0111en.<\/p>\n<p><strong><em>Smart Payment Buttons<\/em> funkcionira na sljede\u0107i na\u010din<\/strong>:<\/p>\n<ul>\n<li>Gumb za pla\u0107anje prikazan je na web\/mobilnoj aplikaciji<\/li>\n<li>Kupac klikne na gumb<\/li>\n<li>Poziva se <em>PayPal <a href=\"https:\/\/developer.paypal.com\/docs\/api\/orders\/v2\/\" target=\"_blank\" rel=\"noopener noreferrer\">Orders API<\/a><\/em> koji priprema transakciju<\/li>\n<li>Prikazuje se <em>PayPal Checkout<\/em> forma za prijavu\/pla\u0107anje<\/li>\n<li>Kupac odobrava pla\u0107anje<\/li>\n<li>Poziva se <em>PayPal Orders API<\/em> koji izvr\u0161ava transakciju<\/li>\n<li>Kupcu se prikazuje poruka o uspje\u0161noj transakciji<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-1-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-1-min.jpg\" alt=\"Smart Payment Buttons\" width=\"758\" height=\"702\" class=\"aligncenter size-full wp-image-10234\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-1-min.jpg 758w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-1-min-300x278.jpg 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><\/p>\n<h2>PayPal Sandbox &#038; App Name<\/h2>\n<p>Kako bi mogao testirati <em>PayPal<\/em> naplatu potrebni su mi: testni <em>PayPal<\/em> korisni\u010dki ra\u010dun na koji \u0107e sredstva biti upla\u0107ena, testni <em>PayPal<\/em> korisni\u010dki ra\u010dun koji \u0107e izvr\u0161avati pla\u0107anje kao i profil aplikacije putem koje \u0107e se pla\u0107anje izvr\u0161avati.<\/p>\n<h3>PayPal Sandbox<\/h3>\n<p>S obzirom da ve\u0107 imam postoje\u0107i <em>PayPal<\/em> ra\u010dun ne moram ga sada kreirati nego je dovoljno oti\u0107i na adresu <a href=\"https:\/\/developer.paypal.com\/developer\/accounts\/\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/developer.paypal.com\/developer\/accounts\/<\/a> kako bi kreirao <em>Sandbox<\/em> ra\u010dun.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-2-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-2-min.jpg\" alt=\"PayPal Sandbox\" width=\"1273\" height=\"629\" class=\"aligncenter size-full wp-image-10237\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-2-min.jpg 1273w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-2-min-300x148.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-2-min-768x379.jpg 768w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-2-min-1024x506.jpg 1024w\" sizes=\"auto, (max-width: 1273px) 100vw, 1273px\" \/><\/a><\/p>\n<p>Mogu\u0107e je kreirati testni ra\u010dun fizi\u010dke ili pravne osobe tj. tvrtke. U ovom \u0107u primjeru kreirati poslovni <em>PayPal<\/em> ra\u010dun.<\/p>\n<p>Valuta tog ra\u010duna biti \u0107e u <a href=\"https:\/\/hr.wikipedia.org\/wiki\/Ameri%C4%8Dki_dolar\" rel=\"noopener noreferrer\" target=\"_blank\">ameri\u010dkim dolarima (<em>USD<\/em>)<\/a>, a pla\u0107anje \u0107u kasnije izvr\u0161avati u dolarima i <a href=\"https:\/\/hr.wikipedia.org\/wiki\/Euro\" rel=\"noopener noreferrer\" target=\"_blank\">eurima (<em>EUR<\/em>)<\/a>. <em>PayPal<\/em> automatski radi konverziju valuta.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-3-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-3-min.jpg\" alt=\"PayPal Sandbox\" width=\"932\" height=\"1552\" class=\"aligncenter size-full wp-image-10240\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-3-min.jpg 932w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-3-min-180x300.jpg 180w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-3-min-768x1279.jpg 768w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-3-min-615x1024.jpg 615w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><\/a><\/p>\n<p>Klikom na \u201e<em><strong>Create Account<\/strong><\/em>\u201c kreiram <em>Sandbox PayPal<\/em> ra\u010dun <em>fortuno@example.com<\/em>.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-4-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-4-min.jpg\" alt=\"PayPal Sandbox\" width=\"998\" height=\"706\" class=\"aligncenter size-full wp-image-10242\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-4-min.jpg 998w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-4-min-300x212.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-4-min-768x543.jpg 768w\" sizes=\"auto, (max-width: 998px) 100vw, 998px\" \/><\/a><\/p>\n<h3>My Apps &#038; Credentials<\/h3>\n<p>Nakon toga na adresi <a href=\"https:\/\/developer.paypal.com\/developer\/applications\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/developer.paypal.com\/developer\/applications<\/a> kreiram profil aplikacije putem koje \u0107u izvr\u0161avati pla\u0107anje.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-5-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-5-min.jpg\" alt=\"PayPal Apps &amp; Credentials\" width=\"1253\" height=\"468\" class=\"aligncenter size-full wp-image-10245\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-5-min.jpg 1253w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-5-min-300x112.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-5-min-768x287.jpg 768w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-5-min-1024x382.jpg 1024w\" sizes=\"auto, (max-width: 1253px) 100vw, 1253px\" \/><\/a><\/p>\n<p>Klikom na \u201e<em><strong>Create App<\/strong><\/em>\u201c dolazim do ekrana gdje je potrebno unijeti naziv aplikacije i odabrati <em>Sandbox<\/em> ra\u010dun s kojim \u0107e ta aplikacija biti povezana.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-6-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-6-min.jpg\" alt=\"PayPal Apps &amp; Credentials\" width=\"932\" height=\"620\" class=\"aligncenter size-full wp-image-10247\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-6-min.jpg 932w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-6-min-300x200.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-6-min-768x511.jpg 768w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><\/a><\/p>\n<p>Nakon toga dobijem <em><strong>Client ID<\/strong><\/em> koji \u0107e mi biti potreban kasnije i bez kojega ne mogu izvr\u0161iti pla\u0107anje.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-7-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-7-min.jpg\" alt=\"PayPal Apps &amp; Credentials\" width=\"932\" height=\"715\" class=\"aligncenter size-full wp-image-10249\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-7-min.jpg 932w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-7-min-300x230.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-7-min-768x589.jpg 768w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><\/a><\/p>\n<h2>Smart Payment Buttons &#038; Ionic 4<\/h2>\n<p>Sada \u0107u <a href=\"https:\/\/www.tomislavstankovic.com\/blog\/uvod-ionic-4\/\" rel=\"noopener noreferrer\" target=\"_blank\">kreirati novi <em>Ionic 4<\/em> projekt<\/a>. To \u010dinim naredbom:<\/p>\n<pre class=\"lang:sh decode:true \" >$ ionic start Ionic4PayPal blank<\/pre>\n<p>Fokus \u0107e biti na po\u010detnom ekranu koji \u0107e se sastojati samo od gumba za pla\u0107anje tako da koristim <em>blank<\/em> temu.<\/p>\n<p>Detaljnije o kreiranju <em>Ionic 4<\/em> aplikacije mogu\u0107e je prona\u0107i u blog postu pod naslovom \u201e<em><a href=\"https:\/\/www.fortuno.hr\/ionic-4-crud-aplikacija\/\" rel=\"noopener noreferrer\" target=\"_blank\">Ionic 4 CRUD aplikacija<\/a><\/em>\u201c.<\/p>\n<p><em>PayPal Checkout<\/em> tj. <em>Smart Payment Buttons<\/em> omogu\u0107ava brzu i jednostavnu implementaciju pla\u0107anja u bilo koju aplikaciju na siguran na\u010din.<\/p>\n<p>Implementacija po\u010dinje dodavanjem sljede\u0107e skripte unutar <em><strong>index.html<\/strong><\/em> datoteke:<\/p>\n<pre class=\"lang:xhtml decode:true \" >&lt;script src=\"https:\/\/www.paypal.com\/sdk\/js?client-id=CLIENTID\"&gt;&lt;\/script&gt;<\/pre>\n<p>Kao \u0161to se mo\u017ee vidjeti, ovdje mi je potreban ranije kreiran <em>Client ID<\/em>. Ako druga\u010dije ne navedem zadana valuta biti \u0107e <em>USD<\/em>. U jednom od primjera kao valutu \u0107u dodati <em>EUR<\/em>, parametar <span class=\"lang:xhtml decode:true  crayon-inline \" >currency<\/span>.<\/p>\n<p>Popis svih dostupnih parametara mogu\u0107e je vidjeti na poveznici <a href=\"https:\/\/developer.paypal.com\/docs\/checkout\/reference\/customize-sdk\/\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/developer.paypal.com\/docs\/checkout\/reference\/customize-sdk\/<\/a>.<\/p>\n<p><em><strong>index.html<\/strong><\/em> datoteka sada izgleda ovako:<\/p>\n<pre class=\"lang:xhtml mark:20 decode:true   \" title=\"index.html\" >&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n \r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\" \/&gt;\r\n  &lt;title&gt;Ionic 4 - PayPal&lt;\/title&gt;\r\n \r\n  &lt;base href=\"\/\" \/&gt;\r\n \r\n  &lt;meta name=\"viewport\" content=\"viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\" \/&gt;\r\n  &lt;meta name=\"format-detection\" content=\"telephone=no\" \/&gt;\r\n  &lt;meta name=\"msapplication-tap-highlight\" content=\"no\" \/&gt;\r\n \r\n  &lt;link rel=\"icon\" type=\"image\/png\" href=\"assets\/icon\/favicon.png\" \/&gt;\r\n \r\n  &lt;!-- add to homescreen for ios --&gt;\r\n  &lt;meta name=\"apple-mobile-web-app-capable\" content=\"yes\" \/&gt;\r\n  &lt;meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\" \/&gt;\r\n \r\n  &lt;script src=\"https:\/\/www.paypal.com\/sdk\/js?client-id=CLIENTID\"&gt;&lt;\/script&gt;\r\n  &lt;!-- &lt;script src=\"https:\/\/www.paypal.com\/sdk\/js?client-id=CLIENTID&amp;currency=EUR\"&gt;&lt;\/script&gt; --&gt;\r\n&lt;\/head&gt;\r\n \r\n&lt;body&gt;\r\n  &lt;app-root&gt;&lt;\/app-root&gt;\r\n&lt;\/body&gt;\r\n \r\n&lt;\/html&gt;<\/pre>\n<p>Prikaz gumba na ekranu vr\u0161i se putem <em><a href=\"https:\/\/www.w3schools.com\/html\/html_id.asp\" rel=\"noopener noreferrer\" target=\"_blank\">ID<\/a><\/em>-a.<\/p>\n<pre class=\"lang:xhtml decode:true   \" >&lt;div id=\"paypal-button-container\"&gt;&lt;\/div&gt;<\/pre>\n<p>Sve zajedno to sada izgleda ovako:<\/p>\n<pre class=\"lang:xhtml mark:13 decode:true   \" title=\"home.page.html\" >&lt;ion-header&gt;\r\n  &lt;ion-toolbar color=\"primary\"&gt;\r\n    &lt;ion-title&gt;\r\n      Ionic 4 - PayPal\r\n    &lt;\/ion-title&gt;\r\n  &lt;\/ion-toolbar&gt;\r\n&lt;\/ion-header&gt;\r\n \r\n&lt;ion-content&gt;\r\n  &lt;ion-row *ngIf=\"!placanjeUspjesno\" text-center&gt;\r\n      &lt;ion-col size-lg=\"4\" offset-lg=\"4\"&gt;\r\n          &lt;ion-card padding&gt;\r\n         &lt;div id=\"paypal-button-container\"&gt;&lt;\/div&gt;\r\n          &lt;\/ion-card&gt;\r\n      &lt;\/ion-col&gt;\r\n  &lt;\/ion-row&gt;\r\n  &lt;ion-row *ngIf=\"placanjeUspjesno\"&gt;\r\n     &lt;ion-col size-lg=\"4\" offset-lg=\"5\" text-center&gt;\r\n        &lt;ion-card padding&gt;\r\n        &lt;p&gt;Thank you for your payment. Your transaction has been completed, and a receipt for your purchase has been emailed to you. Log into your PayPal account to view transaction details.&lt;\/p&gt;\r\n      &lt;\/ion-card&gt;\r\n      &lt;\/ion-col&gt;\r\n  &lt;\/ion-row&gt;\r\n&lt;\/ion-content&gt;<\/pre>\n<p>Koristim <a href=\"https:\/\/angular.io\/api\/common\/NgIf\" rel=\"noopener noreferrer\" target=\"_blank\"><em>ngIf<\/em> direktivu<\/a> kako bi nakon uspje\u0161nog pla\u0107anja umjesto gumba za pla\u0107anje prikazao odgovaraju\u0107u poruku.<\/p>\n<p>S obzirom da je u pitanju demo aplikacija na ekranu se ne\u0107e nalaziti ni\u0161ta drugo osim gumba za pla\u0107anje na vrhu ekrana. U suprotnom bi se vi\u0161e moralo razmisliti o optimalnom mjestu za postavljanje gumba. Vi\u0161e o tome na poveznici <a href=\"https:\/\/developer.paypal.com\/docs\/checkout\/best-practices\/feature-paypal\/#\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/developer.paypal.com\/docs\/checkout\/best-practices\/feature-paypal\/#<\/a><\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-8-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-8-min.jpg\" alt=\"Angular &amp; Ionic 4 \u2013 PayPal Smart Payment\" width=\"366\" height=\"648\" class=\"aligncenter size-full wp-image-10259\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-8-min.jpg 366w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-8-min-169x300.jpg 169w\" sizes=\"auto, (max-width: 366px) 100vw, 366px\" \/><\/a><\/p>\n<p>Inicijalizacija transakcije vr\u0161i se klikom na gumb \u201c<em>PayPal<\/em>\u201d tj. funkcijom <span class=\"lang:js decode:true  crayon-inline \" >createOrder<\/span> unutar koje \u0107u proslijediti samo iznos koji \u017eelim na\/platiti.<\/p>\n<pre class=\"lang:js decode:true   \" >createOrder: function (data, actions) {\r\n   return actions.order.create({\r\n          purchase_units: [{\r\n            amount: {\r\n              value: _this.paymentAmount\r\n            }\r\n          }]\r\n   });\r\n},<\/pre>\n<p>Kada kupac odobri transakciju poziva se funkcija <span class=\"lang:js decode:true crayon-inline\">onApprove<\/span>.<\/p>\n<pre class=\"lang:js decode:true     \" >onApprove: function (data, actions) {\r\n           return actions.order.capture()\r\n             .then(function (details) {\r\n               console.log(details);\r\n               if(details.status == \"COMPLETED\"){\r\n                \/\/ Show a success message to the buyer\r\n               \/\/alert('Transaction completed by ' + details.payer.name.given_name + '!');\r\n                  _this.placanjeUspjesno = true;\r\n               } else {\r\n                 alert(\"Neuspje\u0161no pla\u0107anje!\");\r\n               }\r\n             })\r\n             .catch(err =&gt; {\r\n               console.log(err);\r\n             })\r\n}<\/pre>\n<p>Kompletna funkcionalnost izgleda ovako:<\/p>\n<pre class=\"lang:js decode:true     \" title=\"home.page.ts\" >import { Component } from '@angular\/core';\r\n \r\ndeclare var window: any;\r\n \r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: 'home.page.html',\r\n  styleUrls: ['home.page.scss'],\r\n})\r\nexport class HomePage {\r\n \r\n  paymentAmount: string = \"10\";\r\n  placanjeUspjesno: boolean = false;\r\n \r\n  constructor() {\r\n     this.paymentOptions();\r\n  }\r\n \r\n  paymentOptions(){\r\n    let _this = this;\r\n    setTimeout(() =&gt; {\r\n      \/\/ Render the PayPal button into #paypal-button-container\r\n      window.paypal.Buttons({\r\n \r\n        \/\/ Set up the transaction\r\n        createOrder: function (data, actions) {\r\n          return actions.order.create({\r\n            purchase_units: [{\r\n              amount: {\r\n                value: _this.paymentAmount\r\n              }\r\n            }]\r\n          });\r\n        },\r\n \r\n        \/\/ Finalize the transaction\r\n         onApprove: function (data, actions) {\r\n           return actions.order.capture()\r\n             .then(function (details) {\r\n               console.log(details);\r\n               if(details.status == \"COMPLETED\"){\r\n                \/\/ Show a success message to the buyer\r\n               \/\/alert('Transaction completed by ' + details.payer.name.given_name + '!');\r\n                  _this.placanjeUspjesno = true;\r\n               } else {\r\n                 alert(\"Neuspje\u0161no pla\u0107anje!\");\r\n               }\r\n             })\r\n             .catch(err =&gt; {\r\n               console.log(err);\r\n             })\r\n         }\r\n \r\n      }).render('#paypal-button-container');\r\n    }, 500)\r\n}\r\n \r\n}<\/pre>\n<h3>Demo prikaz<\/h3>\n<p>Sada \u0107u pro\u0107i kroz \u010ditav proces naplate i prikazati ga slikama.<\/p>\n<p>Klikom na \u017euti gumb \u201e<em>PayPal<\/em>\u201c pokre\u0107em postupak pla\u0107anja. Prijavljujem se pomo\u0107u <em>PayPal Sandbox<\/em> ra\u010duna.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-9-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-9-min.jpg\" alt=\"PayPal Smart Payment\" width=\"1513\" height=\"650\" class=\"aligncenter size-full wp-image-10271\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-9-min.jpg 1513w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-9-min-300x129.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-9-min-768x330.jpg 768w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-9-min-1024x440.jpg 1024w\" sizes=\"auto, (max-width: 1513px) 100vw, 1513px\" \/><\/a><\/p>\n<p>Biram na koji na\u010din \u017eelim platiti navedeni iznos. To mogu u\u010diniti sa svojeg ukupnog balansa, kreditnom ili debitnom karticom koje su povezane s <em>PayPal<\/em> ra\u010dunom.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-10-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-10-min.jpg\" alt=\"PayPal Smart Payment\" width=\"1517\" height=\"814\" class=\"aligncenter size-full wp-image-10272\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-10-min.jpg 1517w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-10-min-300x161.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-10-min-768x412.jpg 768w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-10-min-1024x549.jpg 1024w\" sizes=\"auto, (max-width: 1517px) 100vw, 1517px\" \/><\/a><\/p>\n<p>Klikom na \u201c<em>Pay Now<\/em>\u201d potvr\u0111ujem pla\u0107anje. Pla\u0107anje je uspje\u0161no izvr\u0161eno ako dobijem <em>(Order) ID<\/em>. U ovom slu\u010daju to je <span class=\"lang:js decode:true  crayon-inline \" >&#8220;id&#8221;: &#8220;99D86747XH516732E&#8221;<\/span>.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-11-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-11-min.jpg\" alt=\"PayPal Smart Payment\" width=\"1021\" height=\"653\" class=\"aligncenter size-full wp-image-10273\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-11-min.jpg 1021w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-11-min-300x192.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-11-min-768x491.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/><\/a><\/p>\n<p><em>PayPal<\/em> \u0107e mi vratiti sljede\u0107i odgovor, u kojemu imam sve potrebno kako bi kasnije mogao raditi provjeri pla\u0107anja, nakon \u0161to je pla\u0107anje uspje\u0161no pro\u0161lo:<\/p>\n<pre class=\"lang:js decode:true   \" >{\r\n  \"create_time\": \"2019-06-03T09:43:05Z\",\r\n  \"update_time\": \"2019-06-03T09:43:05Z\",\r\n  \"id\": \"99D86747XH516732E\",\r\n  \"intent\": \"CAPTURE\",\r\n  \"status\": \"COMPLETED\",\r\n  \"payer\": {\r\n    \"email_address\": \"tomislavstankovic1-buyer@gmail.com\",\r\n    \"payer_id\": \"FW4BEH8QAPTEG\",\r\n    \"address\": {\r\n      \"country_code\": \"US\"\r\n    },\r\n    \"name\": {\r\n      \"given_name\": \"test\",\r\n      \"surname\": \"buyer\"\r\n    },\r\n    \"phone\": {\r\n      \"phone_number\": {\r\n        \"national_number\": \"4083320878\"\r\n      }\r\n    }\r\n  },\r\n  \"purchase_units\": [\r\n    {\r\n      \"reference_id\": \"default\",\r\n      \"amount\": {\r\n        \"value\": \"10.00\",\r\n        \"currency_code\": \"USD\"\r\n      },\r\n      \"payee\": {\r\n        \"email_address\": \"fortuno@example.com\",\r\n        \"merchant_id\": \"RMF4F2P7GMT84\"\r\n      },\r\n      \"shipping\": {\r\n        \"name\": {\r\n          \"full_name\": \"test buyer\"\r\n        },\r\n        \"address\": {\r\n          \"address_line_1\": \"1 Main St\",\r\n          \"admin_area_2\": \"San Jose\",\r\n          \"admin_area_1\": \"CA\",\r\n          \"postal_code\": \"95131\",\r\n          \"country_code\": \"US\"\r\n        }\r\n      },\r\n      \"payments\": {\r\n        \"captures\": [\r\n          {\r\n            \"status\": \"COMPLETED\",\r\n            \"id\": \"9V075368A1755811N\",\r\n            \"final_capture\": true,\r\n            \"create_time\": \"2019-06-03T09:43:05Z\",\r\n            \"update_time\": \"2019-06-03T09:43:05Z\",\r\n            \"amount\": {\r\n              \"value\": \"10.00\",\r\n              \"currency_code\": \"USD\"\r\n            },\r\n            \"seller_protection\": {\r\n              \"status\": \"ELIGIBLE\",\r\n              \"dispute_categories\": [\r\n                \"ITEM_NOT_RECEIVED\",\r\n                \"UNAUTHORIZED_TRANSACTION\"\r\n              ]\r\n            },\r\n            \"links\": [\r\n              {\r\n                \"href\": \"https:\/\/api.sandbox.paypal.com\/v2\/payments\/captures\/9V075368A1755811N\",\r\n                \"rel\": \"self\",\r\n                \"method\": \"GET\",\r\n                \"title\": \"GET\"\r\n              },\r\n              {\r\n                \"href\": \"https:\/\/api.sandbox.paypal.com\/v2\/payments\/captures\/9V075368A1755811N\/refund\",\r\n                \"rel\": \"refund\",\r\n                \"method\": \"POST\",\r\n                \"title\": \"POST\"\r\n              },\r\n              {\r\n                \"href\": \"https:\/\/api.sandbox.paypal.com\/v2\/checkout\/orders\/99D86747XH516732E\",\r\n                \"rel\": \"up\",\r\n                \"method\": \"GET\",\r\n                \"title\": \"GET\"\r\n              }\r\n            ]\r\n          }\r\n        ]\r\n      }\r\n    }\r\n  ],\r\n  \"links\": [\r\n    {\r\n      \"href\": \"https:\/\/api.sandbox.paypal.com\/v2\/checkout\/orders\/99D86747XH516732E\",\r\n      \"rel\": \"self\",\r\n      \"method\": \"GET\",\r\n      \"title\": \"GET\"\r\n    }\r\n  ]\r\n}<\/pre>\n<p>Osim toga, potvrdu o uspje\u0161nom pla\u0107anju mogu vidjeti ako se prijavim unutar <em>PayPal Sandbox<\/em> ra\u010duna na adresi <a href=\"https:\/\/www.sandbox.paypal.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/www.sandbox.paypal.com\/<\/a> sa korisni\u010dkim imenom <em>tomislavstankovic1-buyer@gmail.com<\/em> i pripadaju\u0107om lozinkom.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-12-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-12-min.jpg\" alt=\"PayPal Account Details\" width=\"707\" height=\"799\" class=\"aligncenter size-full wp-image-10274\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-12-min.jpg 707w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-12-min-265x300.jpg 265w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/a><\/p>\n<p>Ovdje mogu vidjeti koliki mi je trenutni tj. ukupni dostupan iznos na <em>PayPal Sandbox<\/em> ra\u010dunu kao i popis svih transakcija.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-13-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-13-min.jpg\" alt=\"PayPal Account Details\" width=\"1013\" height=\"838\" class=\"aligncenter size-full wp-image-10275\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-13-min.jpg 1013w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-13-min-300x248.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-13-min-768x635.jpg 768w\" sizes=\"auto, (max-width: 1013px) 100vw, 1013px\" \/><\/a><\/p>\n<p>Klikom na \u201e<em>Informatika Fortuno\u2019s Test Store<\/em>\u201c mogu vidjeti detalje navedene transakcije.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-14-min.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-14-min.jpg\" alt=\"PayPal Transaction Summary\" width=\"1038\" height=\"736\" class=\"aligncenter size-full wp-image-10276\" srcset=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-14-min.jpg 1038w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-14-min-300x213.jpg 300w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-14-min-768x545.jpg 768w, https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-14-min-1024x726.jpg 1024w\" sizes=\"auto, (max-width: 1038px) 100vw, 1038px\" \/><\/a><\/p>\n<h2>Zaklju\u010dak<\/h2>\n<p>\u0160to se klijentskog dijela aplikacije ti\u010de to bi bilo sve.<\/p>\n<p><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-15.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-15.gif\" alt=\"PayPal Smart Payment Demo\" width=\"963\" height=\"712\" class=\"aligncenter size-full wp-image-10277\" \/><\/a><\/p>\n<p>Ostaje jo\u0161 napraviti serverski, <em>backend<\/em>, dio gdje \u0107e se vr\u0161iti provjera pla\u0107anja. Na taj <em><a href=\"https:\/\/www.tomislavstankovic.com\/blog\/jednostavan-nodejs-expressjs-rest-api\/\" rel=\"noopener noreferrer\" target=\"_blank\">API<\/a><\/em> \u0161aljem ranije spomenuti <em>ID<\/em> <span class=\"lang:js decode:true    crayon-inline \" >&#8220;id&#8221;: &#8220;99D86747XH516732E&#8221;<\/span>.<\/p>\n<pre class=\"lang:js decode:true     \" title=\"server-js\" >\/\/ 1. Set up your server to make calls to PayPal\r\n \r\n\/\/ 1a. Import the SDK package\r\nconst checkoutNodeJssdk = require('@paypal\/checkout-server-sdk');\r\n \r\n\/\/ 1b. Import the PayPal SDK client that was created in `Set up Server-Side SDK`.\r\n\/**\r\n *\r\n * PayPal HTTP client dependency\r\n *\/\r\nconst payPalClient = require('..\/Common\/payPalClient');\r\n \r\n\/\/ 2. Set up your server to receive a call from the client\r\nmodule.exports = async function handleRequest(req, res) {\r\n \r\n  \/\/ 2a. Get the order ID from the request body\r\n  const orderID = req.body.orderID;\r\n \r\n  \/\/ 3. Call PayPal to get the transaction details\r\n  let request = new checkoutNodeJssdk.orders.OrdersGetRequest(orderID);\r\n \r\n  let order;\r\n  try {\r\n    order = await payPalClient.client().execute(request);\r\n  } catch (err) {\r\n \r\n    \/\/ 4. Handle any errors from the call\r\n    console.error(err);\r\n    return res.send(500);\r\n  }\r\n \r\n  \/\/ 5. Validate the transaction details are as expected\r\n  if (order.result.purchase_units[0].amount.value !== '220.00') {\r\n    return res.send(400);\r\n  }\r\n \r\n  \/\/ 6. Save the transaction in your database\r\n  \/\/ await database.saveTransaction(orderID);\r\n \r\n  \/\/ 7. Return a successful response to the client\r\n  return res.send(200);\r\n}<\/pre>\n<p>Struktura projekta prema <em><strong>package.json<\/strong><\/em>:<\/p>\n<pre class=\"lang:js decode:true     \" title=\"package.json\" >{\r\n  \"name\": \"Ionic4PayPal\",\r\n  \"version\": \"0.0.1\",\r\n  \"author\": \"Tomislav Stankovi\u0107\",\r\n  \"homepage\": \"https:\/\/www.tomislavstankovic.com\/\",\r\n  \"scripts\": {\r\n    \"ng\": \"ng\",\r\n    \"start\": \"ng serve\",\r\n    \"build\": \"ng build\",\r\n    \"test\": \"ng test\",\r\n    \"lint\": \"ng lint\",\r\n    \"e2e\": \"ng e2e\"\r\n  },\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"@angular\/common\": \"^7.2.2\",\r\n    \"@angular\/core\": \"^7.2.2\",\r\n    \"@angular\/forms\": \"^7.2.2\",\r\n    \"@angular\/http\": \"^7.2.2\",\r\n    \"@angular\/platform-browser\": \"^7.2.2\",\r\n    \"@angular\/platform-browser-dynamic\": \"^7.2.2\",\r\n    \"@angular\/router\": \"^7.2.2\",\r\n    \"@ionic-native\/core\": \"^5.0.0\",\r\n    \"@ionic-native\/splash-screen\": \"^5.0.0\",\r\n    \"@ionic-native\/status-bar\": \"^5.0.0\",\r\n    \"@ionic\/angular\": \"^4.1.0\",\r\n    \"core-js\": \"^2.5.4\",\r\n    \"rxjs\": \"~6.5.1\",\r\n    \"tslib\": \"^1.9.0\",\r\n    \"zone.js\": \"~0.8.29\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular-devkit\/architect\": \"~0.13.8\",\r\n    \"@angular-devkit\/build-angular\": \"~0.13.8\",\r\n    \"@angular-devkit\/core\": \"~7.3.8\",\r\n    \"@angular-devkit\/schematics\": \"~7.3.8\",\r\n    \"@angular\/cli\": \"~7.3.8\",\r\n    \"@angular\/compiler\": \"~7.2.2\",\r\n    \"@angular\/compiler-cli\": \"~7.2.2\",\r\n    \"@angular\/language-service\": \"~7.2.2\",\r\n    \"@ionic\/angular-toolkit\": \"~1.5.1\",\r\n    \"@types\/node\": \"~12.0.0\",\r\n    \"@types\/jasmine\": \"~2.8.8\",\r\n    \"@types\/jasminewd2\": \"~2.0.3\",\r\n    \"codelyzer\": \"~4.5.0\",\r\n    \"jasmine-core\": \"~2.99.1\",\r\n    \"jasmine-spec-reporter\": \"~4.2.1\",\r\n    \"karma\": \"~4.1.0\",\r\n    \"karma-chrome-launcher\": \"~2.2.0\",\r\n    \"karma-coverage-istanbul-reporter\": \"~2.0.1\",\r\n    \"karma-jasmine\": \"~1.1.2\",\r\n    \"karma-jasmine-html-reporter\": \"^0.2.2\",\r\n    \"protractor\": \"~5.4.0\",\r\n    \"ts-node\": \"~8.1.0\",\r\n    \"tslint\": \"~5.17.0\",\r\n    \"typescript\": \"~3.1.6\"\r\n  },\r\n  \"description\": \"Ionic 4 PayPal project\"\r\n}<\/pre>\n<p>P.S. Ovaj je blog post originalno objavljen na adresi <a href=\"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cilj ovog blog posta je pokazati kako implementirati PayPal pla\u0107anje unutar Ionic 4, PWA, aplikacije koriste\u0107i Smart Payment Button (Checkout). Iako u testnom okru\u017eenju, pla\u0107anje kreirano na ovaj na\u010din biti \u0107e uspje\u0161no provedeno \u0161to \u0107e se mo\u0107i vidjeti unutar PayPal testnog su\u010delja i prikazano u nastavku ovog blog posta.<\/p>\n","protected":false},"author":1,"featured_media":10226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[564,351],"tags":[600,529,348,599,598],"class_list":["post-10216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-razvoj","tag-angular-framework","tag-ionic-4","tag-ionic-framework","tag-paypal","tag-smart-payment-buttons"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular &amp; Ionic 4 - PayPal mobilno pla\u0107anje - Tomislav Stankovi\u0107<\/title>\n<meta name=\"description\" content=\"Cilj ovog blog posta je pokazati kako implementirati PayPal pla\u0107anje unutar Ionic 4, PWA, aplikacije koriste\u0107i Smart Payment Button (Checkout).\" \/>\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.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular &amp; Ionic 4 - PayPal mobilno pla\u0107anje - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"Cilj ovog blog posta je pokazati kako implementirati PayPal pla\u0107anje unutar Ionic 4, PWA, aplikacije koriste\u0107i Smart Payment Button (Checkout).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-03T15:51:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-07T08:13:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-paypal-smart-payment\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Angular &#038; Ionic 4 &#8211; PayPal mobilno pla\u0107anje\",\"datePublished\":\"2019-06-03T15:51:40+00:00\",\"dateModified\":\"2019-06-07T08:13:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-paypal-smart-payment\\\/\"},\"wordCount\":944,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/Angular-Ionic-PayPal-Smart-Payment-min.png\",\"keywords\":[\"Angular Framework\",\"Ionic 4\",\"Ionic Framework\",\"PayPal\",\"Smart Payment Buttons\"],\"articleSection\":[\"Mobile\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-paypal-smart-payment\\\/\",\"url\":\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/\",\"name\":\"Angular & Ionic 4 - PayPal mobilno pla\u0107anje - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/Angular-Ionic-PayPal-Smart-Payment-min.png\",\"datePublished\":\"2019-06-03T15:51:40+00:00\",\"dateModified\":\"2019-06-07T08:13:59+00:00\",\"description\":\"Cilj ovog blog posta je pokazati kako implementirati PayPal pla\u0107anje unutar Ionic 4, PWA, aplikacije koriste\u0107i Smart Payment Button (Checkout).\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/Angular-Ionic-PayPal-Smart-Payment-min.png\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/Angular-Ionic-PayPal-Smart-Payment-min.png\",\"width\":825,\"height\":510,\"caption\":\"Angular & Ionic 4 \u2013 PayPal Smart Payment\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.fortuno.hr\\\/ionic-4-paypal-smart-payment-buttons\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular &#038; Ionic 4 &#8211; PayPal mobilno pla\u0107anje\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular & Ionic 4 - PayPal mobilno pla\u0107anje - Tomislav Stankovi\u0107","description":"Cilj ovog blog posta je pokazati kako implementirati PayPal pla\u0107anje unutar Ionic 4, PWA, aplikacije koriste\u0107i Smart Payment Button (Checkout).","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.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/","og_locale":"hr_HR","og_type":"article","og_title":"Angular & Ionic 4 - PayPal mobilno pla\u0107anje - Tomislav Stankovi\u0107","og_description":"Cilj ovog blog posta je pokazati kako implementirati PayPal pla\u0107anje unutar Ionic 4, PWA, aplikacije koriste\u0107i Smart Payment Button (Checkout).","og_url":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2019-06-03T15:51:40+00:00","article_modified_time":"2019-06-07T08:13:59+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-min.png","type":"image\/png"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"9 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-paypal-smart-payment\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Angular &#038; Ionic 4 &#8211; PayPal mobilno pla\u0107anje","datePublished":"2019-06-03T15:51:40+00:00","dateModified":"2019-06-07T08:13:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-paypal-smart-payment\/"},"wordCount":944,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-min.png","keywords":["Angular Framework","Ionic 4","Ionic Framework","PayPal","Smart Payment Buttons"],"articleSection":["Mobile","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-paypal-smart-payment\/","url":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/","name":"Angular & Ionic 4 - PayPal mobilno pla\u0107anje - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/#primaryimage"},"image":{"@id":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-min.png","datePublished":"2019-06-03T15:51:40+00:00","dateModified":"2019-06-07T08:13:59+00:00","description":"Cilj ovog blog posta je pokazati kako implementirati PayPal pla\u0107anje unutar Ionic 4, PWA, aplikacije koriste\u0107i Smart Payment Button (Checkout).","breadcrumb":{"@id":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-min.png","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/06\/Angular-Ionic-PayPal-Smart-Payment-min.png","width":825,"height":510,"caption":"Angular & Ionic 4 \u2013 PayPal Smart Payment"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fortuno.hr\/ionic-4-paypal-smart-payment-buttons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular &#038; Ionic 4 &#8211; PayPal mobilno pla\u0107anje"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=10216"}],"version-history":[{"count":48,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10216\/revisions"}],"predecessor-version":[{"id":10283,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10216\/revisions\/10283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/10226"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=10216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=10216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=10216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}