From f98d001ea61386a5046a550d0fe00a5964bca8bd Mon Sep 17 00:00:00 2001
From: Michael Davidson <mdavo6@gmail.com>
Date: Thu, 18 Aug 2022 16:34:48 +1000
Subject: [PATCH 1/7] feat: add stripe payment element support

---
 .../src/api/addPaymentMethod/index.ts         | 23 +++++
 .../src/api/getPaymentIntent/index.ts         | 28 +++++++
 packages/api-client/src/index.server.ts       |  4 +
 .../Checkout/PaymentMethod/Stripe.vue         | 83 +++++++++++--------
 packages/theme/pages/Checkout/Payment.vue     | 16 ++--
 5 files changed, 115 insertions(+), 39 deletions(-)
 create mode 100644 packages/api-client/src/api/addPaymentMethod/index.ts
 create mode 100644 packages/api-client/src/api/getPaymentIntent/index.ts

diff --git a/packages/api-client/src/api/addPaymentMethod/index.ts b/packages/api-client/src/api/addPaymentMethod/index.ts
new file mode 100644
index 00000000..4f713cd8
--- /dev/null
+++ b/packages/api-client/src/api/addPaymentMethod/index.ts
@@ -0,0 +1,23 @@
+/* eslint-disable camelcase */
+import { ApiContext } from '../../types';
+import getCurrentBearerOrCartToken from '../authentication/getCurrentBearerOrCartToken';
+
+export default async function addPaymentMethod({ client, config }: ApiContext, methodId: number): Promise<void> {
+  const token = await getCurrentBearerOrCartToken({ client, config });
+  const currency = await config.internationalization.getCurrency();
+
+  const result = await client.checkout.orderUpdate(token, {
+    order: {
+      payments_attributes: [
+        {
+          payment_method_id: methodId.toString()
+        }
+      ]
+    },
+    currency
+  });
+
+  if (result.isFail()) {
+    throw result.fail();
+  }
+}
\ No newline at end of file
diff --git a/packages/api-client/src/api/getPaymentIntent/index.ts b/packages/api-client/src/api/getPaymentIntent/index.ts
new file mode 100644
index 00000000..402edb76
--- /dev/null
+++ b/packages/api-client/src/api/getPaymentIntent/index.ts
@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { ApiContext } from '../../types';
+import getCurrentBearerOrCartToken from '../authentication/getCurrentBearerOrCartToken';
+import getAuthorizationHeaders from '../authentication/getAuthorizationHeaders';
+import { Logger } from '@vue-storefront/core';
+
+export default async function getPaymentIntent({ client, config }: ApiContext, methodId) {
+  try {
+    const token = await getCurrentBearerOrCartToken({ client, config });
+    const currency = await config.internationalization.getCurrency();
+    const endpoint = config.backendUrl.concat('/api/v2/storefront/intents/create');
+    const response = await axios.post(
+      endpoint, {
+        currency: currency,
+        payment_method_id: methodId
+      },
+      {
+        headers: getAuthorizationHeaders(token)
+      }
+    );
+    return { 
+      clientSecret: response.data.client_secret
+    };
+  } catch (e) { 
+    Logger.error(e);
+    throw e;
+  }
+}
\ No newline at end of file
diff --git a/packages/api-client/src/index.server.ts b/packages/api-client/src/index.server.ts
index 9e80a188..c5d34707 100644
--- a/packages/api-client/src/index.server.ts
+++ b/packages/api-client/src/index.server.ts
@@ -1,6 +1,7 @@
 import { ApiClientExtension, apiClientFactory } from '@vue-storefront/core';
 
 import addAddress from './api/addAddress';
+import addPaymentMethod from './api/addPaymentMethod';
 import addToCart from './api/addToCart';
 import addToWishlist from './api/addToWishlist';
 import applyCoupon from './api/applyCoupon';
@@ -24,6 +25,7 @@ import getOrCreateCart from './api/getOrCreateCart';
 import getOrder from './api/getOrder';
 import getOrders from './api/getOrders';
 import getPaymentConfirmationData from './api/getPaymentConfirmationData';
+import getPaymentIntent from './api/getPaymentIntent';
 import getPaymentMethods from './api/getPaymentMethods';
 import getProduct from './api/getProduct';
 import getProducts from './api/getProducts';
@@ -120,6 +122,8 @@ const { createApiClient } = apiClientFactory<any, any>({
     getPaymentMethods,
     savePaymentMethod,
     getPaymentConfirmationData,
+    addPaymentMethod,
+    getPaymentIntent,
     handlePaymentConfirmationResponse,
     makeOrder,
     forgotPassword,
diff --git a/packages/theme/components/Checkout/PaymentMethod/Stripe.vue b/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
index 58f669ce..26e23d6d 100644
--- a/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
+++ b/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
@@ -1,11 +1,19 @@
 <template>
-  <div ref="cardRef" />
+  <div>
+    <div ref="paymentRef" />
+    <div
+      ref="errorRef"
+      role="alert"
+      class="sf-alert color-danger"
+    />
+  </div>
 </template>
 
 <script>
-import { onMounted, ref, computed } from '@nuxtjs/composition-api';
+import { onMounted, ref, computed, useContext } from '@nuxtjs/composition-api';
 import { useVSFContext, Logger } from '@vue-storefront/core';
 import { loadStripe } from '@stripe/stripe-js';
+import { useCart, orderGetters } from '@vue-storefront/spree';
 
 export default {
   props: {
@@ -16,64 +24,73 @@ export default {
   },
 
   setup(props, { emit }) {
+    const { $config } = useContext();
     const { $spree } = useVSFContext();
+    const { cart } = useCart();
     const stripe = ref(null);
-    const card = ref(null);
-    const cardRef = ref(null);
-    const areIntentsEnabled = computed(() => props.method.preferences?.intents);
+    const payment = ref(null);
+    const elements = ref(null);
+    const paymentRef = ref(null);
+    const errorRef = ref(null);
     const publishableKey = computed(() => props.method.preferences?.publishable_key);
 
     const savePayment = async () => {
       try {
-        const methodId = props.method.id;
-        const { token } = await stripe.value.createToken(card.value);
-
-        const payload = {
-          // eslint-disable-next-line camelcase
-          gateway_payment_profile_id: token.id,
-          number: token.card.last4,
-          month: token.card.exp_month,
-          year: token.card.exp_year,
-          name: token.card.name
-        };
-
-        await $spree.api.savePaymentMethod(methodId, payload);
-
-        if (areIntentsEnabled.value) {
-          const threeDSecureData = await $spree.api.getPaymentConfirmationData();
-          const confirmCardPaymentResponse = await stripe.value.confirmCardPayment(threeDSecureData.clientSecret, {});
-          const handlePaymentConfirmationResponse = await $spree.api.handlePaymentConfirmationResponse({
-            confirmationResponse: confirmCardPaymentResponse
-          });
-
-          if (!handlePaymentConfirmationResponse.success) {
-            throw new Error('Failed to confirm payment');
+        const orderId = orderGetters.getId(cart.value);
+        const { error } = await stripe.value.confirmPayment({
+          elements: elements.value,
+          // Note: If payment is successfully confirmed, user will be redirected to the return_url
+          // and make(); will never be called in Payment.vue. Completing the order will be handled via webhook.
+          confirmParams: {
+            return_url: `${$config.baseUrl}/checkout/thank-you?order=${orderId}`
           }
+        });
+
+        if (error) {
+          errorRef.value.textContent = error.message;
+          // Return false to prevent order proceeding to complete
+          return false;
         }
       } catch (e) {
         Logger.error(e);
+        // Return false to prevent order proceeding to complete
+        return false;
       }
     };
 
     const handleCardChange = (ev) => {
+      if (ev.error) {
+        errorRef.value.textContent = ev.error.message;
+      } else {
+        errorRef.value.textContent = '';
+      }
       const isPaymentReady = ev.complete && !ev.error;
       emit('change:payment', { isPaymentReady, savePayment });
     };
 
     onMounted(async () => {
       try {
+        // Need to add payment method first to be able to create a payment intent
+        const methodId = props.method.id;
+        await $spree.api.addPaymentMethod(methodId);
+
+        const paymentIntent = await $spree.api.getPaymentIntent(methodId);
+        
         stripe.value = await loadStripe(publishableKey.value);
-        const elements = stripe.value.elements();
-        card.value = elements.create('card');
-        card.value.on('change', handleCardChange);
-        card.value.mount(cardRef.value);
+        elements.value = stripe.value.elements({
+          clientSecret: paymentIntent.clientSecret
+        });
+        payment.value = elements.value.create('payment');
+        payment.value.mount(paymentRef.value);
+        payment.value.on('change', handleCardChange);
       } catch (e) {
         Logger.error(e);
       }
     });
 
     return {
-      cardRef
+      paymentRef,
+      errorRef
     };
   }
 };
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index b418f593..e913d0c5 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -135,6 +135,7 @@ export default {
     const isPaymentReady = ref(false);
     const savePayment = ref(null);
     const terms = ref(false);
+    const paymentSuccessful = ref(false);
 
     onSSR(async () => {
       await load();
@@ -148,18 +149,21 @@ export default {
     const processOrder = async () => {
       const orderId = orderGetters.getId(cart.value);
       try {
-        await savePayment.value();
+        paymentSuccessful.value = await savePayment.value();
       } catch (e) {
         Logger.error(e);
         return;
       }
 
-      await make();
-      if (makeError.value.make) {
-        Logger.error(makeError.value.make);
-        return;
+      // Only complete order if payment is successful
+      if (paymentSuccessful.value) {
+        await make();
+        if (makeError.value.make) {
+          Logger.error(makeError.value.make);
+          return;
+        }
+        router.push(root.localePath(`/checkout/thank-you?order=${orderId}`));
       }
-      router.push(root.localePath(`/checkout/thank-you?order=${orderId}`));
     };
 
     return {

From ddb3c17af48f1991e5322b9dc265e9852c72014c Mon Sep 17 00:00:00 2001
From: Michael Davidson <mdavo6@gmail.com>
Date: Thu, 18 Aug 2022 17:12:54 +1000
Subject: [PATCH 2/7] feat: fix lint errors

---
 packages/api-client/src/api/addPaymentMethod/index.ts | 2 +-
 packages/api-client/src/api/getPaymentIntent/index.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/api-client/src/api/addPaymentMethod/index.ts b/packages/api-client/src/api/addPaymentMethod/index.ts
index 4f713cd8..3dc90277 100644
--- a/packages/api-client/src/api/addPaymentMethod/index.ts
+++ b/packages/api-client/src/api/addPaymentMethod/index.ts
@@ -20,4 +20,4 @@ export default async function addPaymentMethod({ client, config }: ApiContext, m
   if (result.isFail()) {
     throw result.fail();
   }
-}
\ No newline at end of file
+}
diff --git a/packages/api-client/src/api/getPaymentIntent/index.ts b/packages/api-client/src/api/getPaymentIntent/index.ts
index 402edb76..b00d5274 100644
--- a/packages/api-client/src/api/getPaymentIntent/index.ts
+++ b/packages/api-client/src/api/getPaymentIntent/index.ts
@@ -18,11 +18,11 @@ export default async function getPaymentIntent({ client, config }: ApiContext, m
         headers: getAuthorizationHeaders(token)
       }
     );
-    return { 
+    return {
       clientSecret: response.data.client_secret
     };
-  } catch (e) { 
+  } catch (e) {
     Logger.error(e);
     throw e;
   }
-}
\ No newline at end of file
+}

From 4f86fedafdd804d60bb01221551e13c8c7f82745 Mon Sep 17 00:00:00 2001
From: Michael Davidson <mdavo6@gmail.com>
Date: Thu, 18 Aug 2022 17:27:29 +1000
Subject: [PATCH 3/7] feat: fix remaining lint error

---
 packages/theme/components/Checkout/PaymentMethod/Stripe.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/components/Checkout/PaymentMethod/Stripe.vue b/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
index 26e23d6d..be8aff62 100644
--- a/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
+++ b/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
@@ -75,7 +75,7 @@ export default {
         await $spree.api.addPaymentMethod(methodId);
 
         const paymentIntent = await $spree.api.getPaymentIntent(methodId);
-        
+       
         stripe.value = await loadStripe(publishableKey.value);
         elements.value = stripe.value.elements({
           clientSecret: paymentIntent.clientSecret

From ddc88f05c3ce1152998bde46019479a5c7a352ef Mon Sep 17 00:00:00 2001
From: Michael Davidson <mdavo6@gmail.com>
Date: Thu, 18 Aug 2022 17:54:15 +1000
Subject: [PATCH 4/7] feat: fix trailing space lint error

---
 packages/theme/components/Checkout/PaymentMethod/Stripe.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/components/Checkout/PaymentMethod/Stripe.vue b/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
index be8aff62..1ae66443 100644
--- a/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
+++ b/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
@@ -75,7 +75,7 @@ export default {
         await $spree.api.addPaymentMethod(methodId);
 
         const paymentIntent = await $spree.api.getPaymentIntent(methodId);
-       
+
         stripe.value = await loadStripe(publishableKey.value);
         elements.value = stripe.value.elements({
           clientSecret: paymentIntent.clientSecret

From 280a1a03c32ce6e4e7dc8557371ba482ee68f8e6 Mon Sep 17 00:00:00 2001
From: Michael Davidson <mdavo6@gmail.com>
Date: Thu, 18 Aug 2022 21:13:40 +1000
Subject: [PATCH 5/7] feat: added baseurl config for return_url link

---
 packages/theme/nuxt.config.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
index 86fbd3fe..442792b7 100644
--- a/packages/theme/nuxt.config.js
+++ b/packages/theme/nuxt.config.js
@@ -218,6 +218,7 @@ export default {
     }
   },
   publicRuntimeConfig: {
-    theme
+    theme,
+    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
   }
 };

From dc974b56a7c6e80a96c275f8ebd8813a8334b06f Mon Sep 17 00:00:00 2001
From: Michael Davidson <mdavo6@gmail.com>
Date: Tue, 23 Aug 2022 11:35:53 +1000
Subject: [PATCH 6/7] feat: updated to address review comments

---
 packages/api-client/src/api/getPaymentIntent/index.ts       | 4 ++--
 packages/api-client/src/types/index.ts                      | 1 +
 packages/api-client/src/types/paymentintent.ts              | 3 +++
 packages/theme/components/Checkout/PaymentMethod/Stripe.vue | 2 --
 packages/theme/pages/Checkout/Payment.vue                   | 1 -
 5 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 packages/api-client/src/types/paymentintent.ts

diff --git a/packages/api-client/src/api/getPaymentIntent/index.ts b/packages/api-client/src/api/getPaymentIntent/index.ts
index b00d5274..e5e03dcf 100644
--- a/packages/api-client/src/api/getPaymentIntent/index.ts
+++ b/packages/api-client/src/api/getPaymentIntent/index.ts
@@ -1,10 +1,10 @@
 import axios from 'axios';
-import { ApiContext } from '../../types';
+import { ApiContext, PaymentIntent } from '../../types';
 import getCurrentBearerOrCartToken from '../authentication/getCurrentBearerOrCartToken';
 import getAuthorizationHeaders from '../authentication/getAuthorizationHeaders';
 import { Logger } from '@vue-storefront/core';
 
-export default async function getPaymentIntent({ client, config }: ApiContext, methodId) {
+export default async function getPaymentIntent({ client, config }: ApiContext, methodId: number): Promise<PaymentIntent> {
   try {
     const token = await getCurrentBearerOrCartToken({ client, config });
     const currency = await config.internationalization.getCurrency();
diff --git a/packages/api-client/src/types/index.ts b/packages/api-client/src/types/index.ts
index 0d06b39b..70fac62c 100644
--- a/packages/api-client/src/types/index.ts
+++ b/packages/api-client/src/types/index.ts
@@ -11,6 +11,7 @@ export * from './wishlist';
 export * from './user';
 export * from './menu';
 export * from './page';
+export * from './paymentintent';
 
 export type CategoryFilter = Record<string, unknown>;
 export type ShippingMethod = Record<string, unknown>;
diff --git a/packages/api-client/src/types/paymentintent.ts b/packages/api-client/src/types/paymentintent.ts
new file mode 100644
index 00000000..41ee0777
--- /dev/null
+++ b/packages/api-client/src/types/paymentintent.ts
@@ -0,0 +1,3 @@
+export type PaymentIntent = {
+    clientSecret: string;
+};
\ No newline at end of file
diff --git a/packages/theme/components/Checkout/PaymentMethod/Stripe.vue b/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
index 1ae66443..3fa476b0 100644
--- a/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
+++ b/packages/theme/components/Checkout/PaymentMethod/Stripe.vue
@@ -39,8 +39,6 @@ export default {
         const orderId = orderGetters.getId(cart.value);
         const { error } = await stripe.value.confirmPayment({
           elements: elements.value,
-          // Note: If payment is successfully confirmed, user will be redirected to the return_url
-          // and make(); will never be called in Payment.vue. Completing the order will be handled via webhook.
           confirmParams: {
             return_url: `${$config.baseUrl}/checkout/thank-you?order=${orderId}`
           }
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index e913d0c5..f5464263 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -155,7 +155,6 @@ export default {
         return;
       }
 
-      // Only complete order if payment is successful
       if (paymentSuccessful.value) {
         await make();
         if (makeError.value.make) {

From 3864b88f049c709c412b0a55f17f0d8bbf714f6b Mon Sep 17 00:00:00 2001
From: Michael Davidson <mdavo6@gmail.com>
Date: Tue, 23 Aug 2022 11:39:40 +1000
Subject: [PATCH 7/7] feat: added a new line for linter

---
 packages/api-client/src/types/paymentintent.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/api-client/src/types/paymentintent.ts b/packages/api-client/src/types/paymentintent.ts
index 41ee0777..4d490510 100644
--- a/packages/api-client/src/types/paymentintent.ts
+++ b/packages/api-client/src/types/paymentintent.ts
@@ -1,3 +1,3 @@
 export type PaymentIntent = {
     clientSecret: string;
-};
\ No newline at end of file
+};