Move transaction requests to Vuex.

2 files changed, 23 insertions, 13 deletions

diff --git a/client/src/store/index.js b/client/src/store/index.js
index 519347d..a2d3f9f 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -77,6 +77,22 @@ export default createStore({
       await axios.get(`${process.env.VUE_APP_ROOT_API}/products/${productId}`)
         .then(response => context.commit('setCurrentProduct', response.data))
         .catch(error => console.error(error));
+    },
+    async createOrder(context) {
+      const checkoutRequest = {items: context.state.cart};
+
+      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 captureOrder(context, orderId) {
+      return await axios
+        .post(`${process.env.VUE_APP_ROOT_API}/transaction/capture`, {orderId})
+        .then(() => true)
+        .catch(err => console.error(err));
     }
   },
   modules: {
diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index a62f83c..a009b94 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import axios from 'axios';
-
 export default {
   name: 'Checkout',
   mounted() {
@@ -49,22 +47,18 @@ export default {
       this.$store.commit('removeFromCart', id);
     },
     paypalLoaded() {
-      const checkoutRequest = {items: this.$store.getters.getCart};
+      const dispatch = this.$store.dispatch;
 
       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;
+          return await dispatch('createOrder');
         },
         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));
+          const success = await dispatch('captureOrder', data.orderID);
+          if (success === true)
+            console.log('Successfully paid!');
+          else
+            console.log('Capturing order failed!');
         },
         onError(err) {
           console.error(err);