Basic PayPal buttons integration...

2 files changed, 37 insertions, 2 deletions

diff --git a/client/.env b/client/.env
index d9bd11d..127cc55 100644
--- a/client/.env
+++ b/client/.env
@@ -1 +1,2 @@
 VUE_APP_ROOT_API=http://localhost:3000/api
+VUE_APP_PAYPAL_CLIENT_ID=your-paypal-client-id
diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index 8adeb4a..f93fba0 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="mt-5">
     <div class="row d-flex justify-content-center">
-      <div class="col-md-6">
-        <ul class="list-group">
+      <div class="col-md-6 card">
+        <ul class="list-group list-group-flush">
           <li v-for="item in cart" :key="item.id"
             class="list-group-item d-flex justify-content-between align-items-start">
             <div class="ms-2 me-auto">
@@ -15,13 +15,24 @@
         </ul>
         <p class="text-center my-3 fw-bold">You can buy {{ cartSize }} items for ${{ cartPrice }}.</p>
       </div>
+      <div class="col-md-4 card p-2">
+        <div ref="paypal"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
   name: 'Checkout',
+  mounted() {
+    const script = document.createElement("script");
+    script.src = `https://www.paypal.com/sdk/js?client-id=${process.env.VUE_APP_PAYPAL_CLIENT_ID}&disable-funding=credit`;
+    script.addEventListener("load", this.paypalLoaded);
+    document.body.appendChild(script);
+  },
   computed: {
     cart() {
       return this.$store.getters.getCart;
@@ -36,6 +47,29 @@ export default {
   methods: {
     remove(id) {
       this.$store.commit('removeFromCart', id);
+    },
+    paypalLoaded() {
+      const checkoutRequest = {items: this.$store.getters.getCart};
+
+      window.paypal.Buttons({
+        async createOrder() {
+          const orderId = await axios
+            .post(`${process.env.VUE_APP_ROOT_API}/transaction/setup`, checkoutRequest)
+            .then(response => response.data.orderId)
+            .catch(err => console.error(err));
+
+          return orderId;
+        },
+        async onApprove(data) {
+          await axios
+            .post(`${process.env.VUE_APP_ROOT_API}/transaction/capture`, {orderId: data.orderID})
+            .then(() => console.log('Paid successfully!'))
+            .catch(err => console.error(err));
+        },
+        onError(err) {
+          console.error(err);
+        }
+      }).render(this.$refs.paypal);
     }
   }
 }