paypal integration

.env

@@ -1,2 +1,13 @@
 API_URL=http://iolovolio.local/api
 SITE_URL=http://iolovolio.local
+
+PP_ACCOUNT=dslaky-seller@gmail.com
+PP_CLIENTID=AfnGR9VCjtBF_M0TemwikSG7q0sIm0mE4maIWw9vhiT1-X7vd9ONTvf-D3mEw1AaG9t2CWjoNbHIltI8
+PP_SECRET=ENR4dvs4Y4836E-rDGUUMRIY6QEsCzOLsy16yoIBUrDpyt-Jfqi9PwNzBIDeKUpTuTbZUxQBvIe44jC0
+
+PP_RETURN=http://iolovolio.local/thankyou
+PP_AUTH_URL=https://api-m.sandbox.paypal.com/v1/oauth2/token
+PP_ORDER_URL=https://api-m.sandbox.paypal.com/v2/checkout/orders
+
+#dslaky-buyer@gmail.com dslakyPwd
+#dslaky-facilitator@gmail.com dslakyPwd

api/cart_place.php → api/cart_get.php

@@ -12,14 +12,11 @@ header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers
 $databaseService = new DatabaseService();
 $conn = $databaseService->getConnection();
 
-$body = $_POST['body'];
-
 http_response_code(200);
 echo json_encode(
   array(
     "status" => 200,
-    "cart" => array_values($_SESSION['CART']),
-    "shipping" => $body
+    "cart" => array_values($_SESSION['CART'])
   ));
 
 ?>

components/breadcrumb/breadcrumb.html

@@ -22,6 +22,9 @@
     case 'checkout':
         $levels[0] = array('checkout', '/checkout');
     break;
+    case 'thankyou':
+        $levels[0] = array('thankyou', '/');
+    break;
 
     case 'due-cucchiai-di-salute':
         $levels[0] = array('raccontare', '/raccontare');

components/checkout/checkout.html

@@ -79,8 +79,6 @@
           </div>
         </div>
 
-
-
         <div class="row different-address">
           <div class="col-12 col-md-6 pr-2 pr-md-4">
             <span class="label">Indirizzo *</span>
@@ -180,3 +178,6 @@
     </div>
   </div>
 </div>
+
+<!--
+<script src="https://www.paypal.com/sdk/js?client-id=AUHeOuSaPRdDP3z_Qtm2tNLG1UAuY25EYXVyJ0UmfEFKxinjHN8RQ5M8N17EPxYBCTPl4RrsTntuR3kv"></script>-->

components/checkout/checkout.js

@@ -102,17 +102,61 @@ $(document).ready( () => {
             body[name] = input.val()
           }
         })
+        // placeOrder()
+      }
+
+      const profile = {
+        first_name: 'Carmine',
+        last_name: 'De Rosa',
+        address: 'C.so Sempione, 76',
+        city: 'Milano',
+        province: 'MI',
+        zip_code: '20154'
+      }
+
+      placeOrder(profile)
+
+    }
+
+    const placeOrder = (profile) => {
+
+      Apis.getCart().then( (data) => {
+        const cartItems = data.cart
+        let amount = 0
+        let shipping = 10
 
-        Apis.placeCart(body).then( (data) => {
-          const headerCart = $('.component-header .cart-cta .counter')
-          if(headerCart.length) {
-            headerCart.text(0)
+        $.each(cartItems, (i,e) => {
+          amount += e.price * e.qty
+        })
+
+        const cart = [{
+          amount: { currency_code: 'EUR', value: amount + shipping },
+          shipping: {
+            address: {
+              address_line_1: profile.address,
+              postal_code: profile.zip_code,
+              admin_area_1: profile.province,
+              admin_area_2: profile.city,
+              country_code: 'IT'
+            }
           }
+        }]
+
+        Apis.getToken().then( (data) => {
+          const token = data.access_token
+          Apis.placeOrder(cart, token).then( (data) => {
+            const capture = data.links.find(item => item.rel == 'capture')
+            const approve = data.links.find(item => item.rel == 'approve')
+            window.location = approve.href
+          }).catch( (error) => {
+            console.error(error)
+          })
         }).catch( (error) => {
           console.error(error)
         })
-
-      }
+      }).catch( (error) => {
+        console.error(error)
+      })
     }
   }
 })

components/sectionHeader/sectionHeader.html

@@ -16,6 +16,7 @@
     case 'acquistare':
     case 'carrello':
     case 'checkout':
+    case 'thankyou':
         $section_label = 'acquistare';
     break;
   }

components/thankyou/thankyou.html

@@ -0,0 +1,18 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+  setlocale(LC_MONETARY, 'it_IT.UTF-8');
+?>
+
+
+<div class="component-thankyou">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-8 pb-5">
+        <span class="text">
+          L'ordine è andato a buon fine. Riceverai un'e-mail all'indirizzo indicato con i dettagli dell'ordine.<br>
+          <b>Ti ringraziamo per aver acquistato su iolovolio.it</b>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

components/thankyou/thankyou.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - thankyou')
+
+})

components/thankyou/thankyou.scss

@@ -0,0 +1,12 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-thankyou {
+  padding: 10px 0 40px 0;
+
+  .text {
+    display: block;
+    @include font-style($font-sans, 400, $font-18);
+    color: $gray;
+  }
+}

pages/index.ejs

@@ -16,6 +16,8 @@
   if(@$_GET['q']){ $GLOBALS['getQ'] = explode("/",$_GET['q']); }
 
   if($getQ[0]!="iolovolio"){ $isHome = false; }
+  if($getQ[0]=="thankyou"){ unset($_SESSION['CART']); }
+
 
 ?>
 

pages/thankyou.ejs

@@ -0,0 +1,2 @@
+
+${require('../components/thankyou/thankyou.html')}

src/js/index.js

@@ -47,9 +47,9 @@ window.Apis.removeFromCart = (pid) => {
   })
 }
 
-window.Apis.placeCart = (body) => {
+window.Apis.getCart = (body) => {
   return new Promise((resolve, reject) => {
-    $.post(apiUrl + `/cart_place.php?buster=${new Date().getTime()}`, {body: body}).done( (data) => {
+    $.post(apiUrl + `/cart_get.php?buster=${new Date().getTime()}`, {body: body}).done( (data) => {
       resolve(data)
     }).fail((error, status) => {
       reject(error)
@@ -57,3 +57,54 @@ window.Apis.placeCart = (body) => {
   })
 }
 
+window.Apis.getToken = () => {
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      type: 'POST',
+      url: ENV.PP_AUTH_URL,
+      data: {'grant_type': 'client_credentials'},
+      dataType: 'json',
+      async: true,
+      contentType: 'application/json; charset=utf-8',
+      headers: {'Authorization': `Basic ${btoa(ENV.PP_CLIENTID + ":" + ENV.PP_SECRET)}`},
+      success: (data) => {
+        resolve(data)
+      },
+      error: (error) => {
+        reject(error)
+      }
+    })
+  })
+}
+
+window.Apis.placeOrder = (cart, token) => {
+  const data = {
+    intent: 'CAPTURE',
+    application_context: {
+      brand_name: 'IoLovOlio',
+      locale: 'it-IT',
+      return_url: ENV.PP_RETURN,
+      cancel_url: ENV.PP_RETURN
+    },
+    purchase_units: cart
+  }
+
+  return new Promise((resolve, reject) => {
+    $.ajax({
+      type: 'POST',
+      url: ENV.PP_ORDER_URL,
+      data: JSON.stringify(data),
+      dataType: 'json',
+      async: true,
+      contentType: 'application/json; charset=utf-8',
+      headers: {'Authorization': `Bearer ${token}`},
+      success: (data) => {
+        resolve(data)
+      },
+      error: (error) => {
+        reject(error)
+      }
+    })
+  })
+}
+

src/scss/main.scss

@@ -22,3 +22,4 @@
 @import "./components/homeTemplate/homeTemplate.scss";
 @import "./components/cart/cart.scss";
 @import "./components/checkout/checkout.scss";
+@import "./components/thankyou/thankyou.scss";