Complete Stripe 3D Secure Integration (#158)

Viveckh · May 11, 2021 · 0bee6a8 · 0bee6a8
1 parent 11fadc8
commit 0bee6a8
Show file tree

Hide file tree

Showing 11 changed files with 417 additions and 123 deletions.
diff --git a/shopping-server/controllers/orderController.js b/shopping-server/controllers/orderController.js
@@ -15,6 +15,33 @@ export default {
         }
     },
 
+    async stripePaymentInstant(req, res, next){
+        let response;
+        //console.log(req.user);
+        try {
+            response = await orderService.stripePaymentInstant(req.body.checkoutId, req.user);
+            console.log(response);
+            return res.status(response.httpStatus).send(response);
+        }
+        catch(err) {
+            logger.error("Error in stripePaymentInstant Controller", {meta: err});
+            return res.status(httpStatus.INTERNAL_SERVER_ERROR).send({httpStatus: httpStatus.INTERNAL_SERVER_ERROR, status: "failed", errorDetails: err});
+        }
+    },
+
+    async completeCheckoutUsingStripePaymentInstant(req, res, next) {
+        let response;
+        try {
+            response = await orderService.completeCheckoutUsingStripePaymentInstant(req.body.checkoutId, req.body.paymentToken, req.user);
+            return res.status(response.httpStatus).send(response);
+        }
+        catch(err) {
+            logger.error("Error in completeCheckoutUsingStripePaymentInstant Controller", {meta: err});
+            return res.status(httpStatus.INTERNAL_SERVER_ERROR).send({httpStatus: httpStatus.INTERNAL_SERVER_ERROR, status: "failed", errorDetails: err});
+        }
+    },
+
+
     async completeCheckoutUsingCard(req, res, next) {
         let response;
         try {

diff --git a/shopping-server/routes/orders.js b/shopping-server/routes/orders.js
@@ -22,4 +22,8 @@ router.post('/createPaymentToken', orderController.createPaymentToken);
 
 router.post('/completeCheckout', orderController.completeCheckout);
 
+router.post('/stripePaymentInstant', orderController.stripePaymentInstant);
+
+router.post('/completeCheckoutUsingStripePaymentInstant', orderController.completeCheckoutUsingStripePaymentInstant);
+
 module.exports = router;
diff --git a/shopping-server/services/orderService.js b/shopping-server/services/orderService.js
diff --git a/shopping-webclient/src/components/checkout/PaymentDetail.vue b/shopping-webclient/src/components/checkout/PaymentDetail.vue
@@ -54,6 +54,7 @@ export default {
         this.$store.commit('cartStore/resetOrders');
         this.$router.push(`/orders/${data.order_id}`);
         notification.success(this, 'Payment was successful.');
+        console.log('payWithStripe token', token);
       } catch (error) {
         console.log('Error with Veniqa payment', error);
         notification.error(

diff --git a/shopping-webclient/src/components/checkout/stripe/Stripe.vue b/shopping-webclient/src/components/checkout/stripe/Stripe.vue
@@ -1,23 +1,33 @@
 <template>
   <div>
     <!-- <stripe-payment/> -->
-    <card class='stripe-card'
-      :class='{ complete }'
-      :stripe='stripeKey'
-      :options='stripeOptions'
-      :paymentReqOptions='reqParams'
-      @change='complete = $event.complete'
-      @token='payWithGpay'
+    <card
+      class="stripe-card"
+      :class="{ complete }"
+      :stripe="stripeKey"
+      :options="stripeOptions"
+      :paymentReqOptions="reqParams"
+      @change="complete = $event.complete"
+      @token="payWithGpay"
     />
-    <br>
-    <b-btn class='pay-with-stripe' @click='pay' :disabled='!complete'>Pay with credit card</b-btn>
+    <br />
+    <b-btn
+      class="pay-with-stripe"
+      @click="pay($event)"
+      :disabled="!complete"
+      style="font-family: Libre Baskerville; font-size: 14px"
+      >Pay by card</b-btn
+    >
   </div>
 </template>
 
 <script>
 import _ from 'lodash';
 import { Card, Stripe } from './index';
 import PaymentRequestDTO from './StripePaymentRequestDTO.json';
+import { mapGetters } from 'vuex';
+import Vue from 'vue';
+import ProxyUrl from '@/constants/ProxyUrls';
 
 export default {
   components: {
@@ -52,15 +62,94 @@ export default {
   },
 
   methods: {
-    async pay() {
+    async pay(event) {
       // createToken returns a Promise which resolves in a result object with
       // either a token or an error key.
       // See https://stripe.com/docs/api#tokens for the token object.
       // See https://stripe.com/docs/api#errors for the error object.
       // More general https://stripe.com/docs/stripe.js#stripe-create-token.
       try {
-        const data = await Stripe.createToken();
-        this.$emit('pay', data.token);
+        // const data = await Stripe.createToken();
+        // this.$emit('pay', data.token);
+        event.target.disabled = true;
+        let checkoutId = this.checkoutId;
+        const { data } = await Vue.prototype.$axios({
+          url: ProxyUrl.stripeInstantPay,
+          method: 'post',
+          data: {
+            checkoutId,
+          },
+        });
+        if (data && data.httpStatus === 200) {
+          console.log(data.responseData);
+          if (data.responseData) {
+            const paymentMethodReq = await Stripe.createPaymentMethod(
+              'card',
+              {}
+            );
+            console.log(paymentMethodReq);
+
+            if (paymentMethodReq.paymentMethod.id) {
+              const confirmPayment = await Stripe.confirmCardPayment(
+                data.responseData.client_secret,
+                {
+                  payment_method: paymentMethodReq.paymentMethod.id,
+                }
+              );
+
+              console.log(confirmPayment);
+
+              if (confirmPayment) {
+                console.log('inside confirmPayment', confirmPayment);
+                if (confirmPayment.paymentIntent.status == 'succeeded') {
+                  console.log('inside confirmPayment status', confirmPayment);
+                  if (confirmPayment.hasOwnProperty('error')) {
+                    this.$notify({
+                      group: 'toast',
+                      type: 'error',
+                      text: `${confirmPayment.error.code},  ${confirmPayment.error.message}. Please try again later`,
+                    });
+                    event.target.disabled = false;
+                  }
+                  const { data } = await Vue.prototype.$axios({
+                    url: ProxyUrl.stripeInstantPayment,
+                    method: 'post',
+                    data: {
+                      checkoutId,
+                      paymentToken: confirmPayment.paymentIntent.id,
+                    },
+                  });
+                  if (data && data.httpStatus === 200) {
+                    return this.$router.push('/orders');
+                    //return data.responseData;
+                  }
+                  //this.createPayment(confirmPayment.paymentIntent.id);
+                } else {
+                  event.target.disabled = false;
+                  throw new Error('Card  details are invalid !');
+                }
+              }
+            }
+          }
+          // const { data } = await Vue.prototype.$axios({
+          //   url: ProxyUrl.stripePay,
+          //   method: 'post',
+          //   data: {
+          //     checkoutId,
+          //     paymentToken: token.id,
+          //   },
+          // });
+          /**
+           * Response data:
+           * {
+           *    orderId: 'xxx'
+           * }
+           */
+          //return data.responseData;
+        }
+        //  const data = await Stripe.createToken();
+        console.log('stripe payWithStripe token', this.checkoutId);
+        //this.$emit('pay', data.token);
       } catch (error) {
         console.log('Stripe error', error.message);
       }
@@ -73,19 +162,20 @@ export default {
   },
 
   computed: {
+    ...mapGetters({
+      checkoutId: 'cartStore/checkoutId',
+    }),
     // reqParams() {
     //   let params = _.cloneDeep(PaymentRequestDTO);
     //   params.total.amount = this.totalCost;
     //   return params;
     // }
   },
-
-
 };
 </script>
 
 <style lang="scss" scoped>
-.pay-with-stripe{
+.pay-with-stripe {
   padding: 5px;
   background-image: linear-gradient(to right, #267871, #136a8a) !important;
 }

diff --git a/shopping-webclient/src/components/checkout/stripe/StripeElement.vue b/shopping-webclient/src/components/checkout/stripe/StripeElement.vue
@@ -29,6 +29,8 @@ export default {
       event.updateWith({ status: 'success' });
     });
 
+    console.log('stripe element payWithStripe token');
+
     this._paymentRequest.on('token', ev => this.$emit('token', ev));
 
     this._paymentBtn = createPayButton();

diff --git a/shopping-webclient/src/components/checkout/stripe/index.js b/shopping-webclient/src/components/checkout/stripe/index.js
@@ -15,5 +15,5 @@ export {
   PostalCode,
   StripeElement,
   baseStyle,
-  Stripe,
+  Stripe
 };
diff --git a/shopping-webclient/src/components/checkout/stripe/stripeElements.js b/shopping-webclient/src/components/checkout/stripe/stripeElements.js
@@ -5,6 +5,14 @@ export const Stripe = {
   retrieveSource: null,
   elements: null,
   paymentRequest: null,
+  redirectToCheckout: null,
+  retrievePaymentIntent: null,
+  handleCardPayment: null,
+  handleCardSetup: null,
+  handleCardAction: null,
+  confirmPaymentIntent: null,
+  createPaymentMethod: null,
+  confirmCardPayment: null
 };
 
 export const baseStyle = {
@@ -47,10 +55,24 @@ export function create(elementType, keyOrStripe, options = {}) {
   options.style = Object.assign(baseStyle, options.style || {});
 
   const element = Stripe.elements.create(elementType, options);
+  console.log(element);
 
   Stripe.createToken = opts => Stripe.instance.createToken(element, opts);
   Stripe.createSource = opts => Stripe.instance.createSource(element, opts);
   Stripe.retrieveSource = opts => Stripe.instance.retrieveSource(opts);
+  Stripe.redirectToCheckout = (options) => Stripe.instance.redirectToCheckout(options)
+  Stripe.retrievePaymentIntent = (clientSecret) => Stripe.instance.retrievePaymentIntent(clientSecret)
+  Stripe.handleCardPayment = (clientSecret, data) => Stripe.instance.handleCardPayment(clientSecret, element, data)
+  Stripe.handleCardSetup = (clientSecret, data) => Stripe.instance.handleCardSetup(clientSecret, element, data)
+  Stripe.handleCardAction = (clientSecret) => Stripe.instance.handleCardAction(clientSecret)
+  Stripe.confirmPaymentIntent = (clientSecret, data) => Stripe.instance.confirmPaymentIntent(clientSecret, element, data)
+  Stripe.createPaymentMethod = (cardType, data) => Stripe.instance.createPaymentMethod(cardType, element, data)
+  Stripe.confirmCardPayment = (clientSecret, data) => Stripe.instance.confirmCardPayment(clientSecret, {
+    payment_method:{
+      card:element,
+      billing_details: {}
+    }
+  }, data)
 
   return element;
 }
@@ -80,4 +102,12 @@ export function destroy() {
   Stripe.createToken = null;
   Stripe.createSource = null;
   Stripe.retrieveSource = null;
+  Stripe.redirectToCheckout = null;
+  Stripe.retrievePaymentIntent = null;
+  Stripe.handleCardPayment = null;
+  Stripe.handleCardSetup = null;
+  Stripe.handleCardAction = null;
+  Stripe.confirmPaymentIntent = null;
+  Stripe.createPaymentMethod = null;
+  Stripe.confirmCardPayment = null;
 }
diff --git a/shopping-webclient/src/constants/ProxyUrls.js b/shopping-webclient/src/constants/ProxyUrls.js
@@ -36,6 +36,10 @@ export default {
   // Payment URLS
   stripePay: '/orders/completeCheckoutUsingCard',
   khaltiPay: '/orders/completeCheckoutUsingKhalti',
+
+  // Stripe Payment Intents
+  stripeInstantPay: '/orders/stripePaymentInstant',
+  stripeInstantPayment: '/orders/completeCheckoutUsingStripePaymentInstant',
 
   // Categories List
   categoriesUrl: '/ui/productCategoryList',

diff --git a/shopping-webclient/src/services/paymentService.js b/shopping-webclient/src/services/paymentService.js
@@ -4,26 +4,26 @@ import Vue from 'vue';
 export default {
   async payWithStripe(token, checkoutId) {
     try {
-      const { data } = await Vue.prototype.$axios({
-        url: ProxyUrl.stripePay,
-        method: 'post',
-        data: {
-          checkoutId,
-          paymentToken: token.id,
-        },
-      });
+      // const { data } = await Vue.prototype.$axios({
+      //   url: ProxyUrl.stripePay,
+      //   method: 'post',
+      //   data: {
+      //     checkoutId,
+      //     paymentToken: token.id,
+      //   },
+      // });
 
-      if (data && data.httpStatus === 200) {
-        /**
-         * Response data:
-         * {
-         *    orderId: 'xxx'
-         * }
-        */
-        return data.responseData;
-      }
+      // if (data && data.httpStatus === 200) {
+      //   /**
+      //    * Response data:
+      //    * {
+      //    *    orderId: 'xxx'
+      //    * }
+      //   */
+      //   return data.responseData;
+      // }
 
-      throw new Error('Error occured during Strip transactions');
+      // throw new Error('Error occured during Strip transactions');
     } catch (error) {
       throw error;
     }

diff --git a/shopping-webclient/src/store/cart.js b/shopping-webclient/src/store/cart.js
@@ -22,6 +22,7 @@ export default {
      * @param {*} { state }
      */
     async pay({ state, commit }) {
+      console.log('pay in cart');
       const { data } = await Vue.prototype.$axios({
         url: ProxyUrl.createPaymentToken,
         method: 'post',
@@ -54,6 +55,7 @@ export default {
         addressId: address._id
       };
       try {
+        console.log('createCheckout');
         const { data } = await Vue.prototype.$axios({
           url: ProxyUrl.createCheckout,
           method: 'post',