From 51d4b0e008944c7eaa57e2b0634af9254ed08e0a Mon Sep 17 00:00:00 2001
From: Scott Kennedy <scottyzen@gmail.com>
Date: Sat, 9 Mar 2024 19:07:13 +0000
Subject: [PATCH] stripe-3d

---
 functions/stripe.js                           | 17 ++++++
 netlify.toml                                  |  8 ++-
 package-lock.json                             | 55 +++++++++++--------
 package.json                                  |  3 +-
 .../components/filtering/OnSaleFilter.vue     |  2 +-
 .../components/filtering/StarRatingFilter.vue |  2 +-
 woonuxt_base/pages/checkout.vue               | 38 +++++++++----
 7 files changed, 87 insertions(+), 38 deletions(-)
 create mode 100644 functions/stripe.js

diff --git a/functions/stripe.js b/functions/stripe.js
new file mode 100644
index 0000000..5d6a124
--- /dev/null
+++ b/functions/stripe.js
@@ -0,0 +1,17 @@
+const stripe = require('stripe')('sk_test_51KoqfeLqZEQtkS6nsr2zulvLqgTfgozVLzNFGpc2NPPEdCMbd2ZXL1QaPGLHc0PyhZ3SbLN8D9RWouiHz6VwX6l300HHCwEO1h');
+
+exports.handler = async (event, context) => {
+  console.log('LAMBDA FUNCTION RAN', event, context);
+  try {
+    const paymentIntent = await stripe.paymentIntents.create({
+      amount: 1099,
+      currency: 'usd',
+    });
+    return {
+      statusCode: 200,
+      body: JSON.stringify({ ...paymentIntent }),
+    };
+  } catch (error) {
+    console.log(error);
+  }
+};
diff --git a/netlify.toml b/netlify.toml
index 0651d9d..8359c40 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -4,6 +4,12 @@
 
 [build]
   command = "nuxi generate"
+  functions = "functions"
+
+[[redirects]]
+  from = '/api/*'
+  to = '/.netlify/functions/:splat'
+  status = 200
 
 [[headers]]
   for = "/*.js"
@@ -28,4 +34,4 @@
 [[headers]]
   for = "/*.webp"
   [headers.values]
-    Cache-Control = "public, max-age=31536000, immutable"
+    Cache-Control = "public, max-age=31536000, immutable"
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4671098..35efab9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "dependencies": {
         "@stripe/stripe-js": "^2.4.0",
         "@vueform/slider": "^2.1.10",
-        "@vueuse/core": "^10.9.0"
+        "@vueuse/core": "^10.9.0",
+        "stripe": "^14.19.0"
       },
       "devDependencies": {
         "@nuxt/image": "^1.3.0",
@@ -5916,7 +5917,6 @@
       "version": "20.11.20",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.20.tgz",
       "integrity": "sha512-7/rR21OS+fq8IyHTgtLkDK949uzsa6n8BkziAKtPVpugIkO6D+/ooXMvzXxDnZrmtXVfjb1bKQafYpb8s89LOg==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -7577,7 +7577,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -8560,7 +8559,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -9032,7 +9030,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
       },
@@ -9044,7 +9041,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -10278,7 +10274,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -10358,7 +10353,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -10579,7 +10573,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -10755,7 +10748,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -10767,7 +10759,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -10779,7 +10770,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -10818,7 +10808,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
       "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -14166,7 +14155,6 @@
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
       "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -15723,6 +15711,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/qs": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
+      "integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -16755,7 +16757,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
       "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.2",
         "es-errors": "^1.3.0",
@@ -16877,12 +16878,11 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
-      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
-      "dev": true,
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.4",
         "object-inspect": "^1.13.1"
@@ -17379,6 +17379,18 @@
       "integrity": "sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==",
       "dev": true
     },
+    "node_modules/stripe": {
+      "version": "14.19.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-14.19.0.tgz",
+      "integrity": "sha512-Je2USTpUib3hApIgoHXViLoYkDLp+AXdUJvJ6aMQ/AcvZK1PcC7N8nTceh+0gpdotX8izlWN4QyVdMcptubHBQ==",
+      "dependencies": {
+        "@types/node": ">=8.1.0",
+        "qs": "^6.11.0"
+      },
+      "engines": {
+        "node": ">=12.*"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.2.tgz",
@@ -18236,8 +18248,7 @@
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
     "node_modules/unenv": {
       "version": "1.9.0",
diff --git a/package.json b/package.json
index 878daf6..fd5b112 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "@stripe/stripe-js": "^2.4.0",
     "@vueform/slider": "^2.1.10",
-    "@vueuse/core": "^10.9.0"
+    "@vueuse/core": "^10.9.0",
+    "stripe": "^14.19.0"
   },
   "devDependencies": {
     "@nuxt/image": "^1.3.0",
diff --git a/woonuxt_base/components/filtering/OnSaleFilter.vue b/woonuxt_base/components/filtering/OnSaleFilter.vue
index 418c4cd..3bec15f 100644
--- a/woonuxt_base/components/filtering/OnSaleFilter.vue
+++ b/woonuxt_base/components/filtering/OnSaleFilter.vue
@@ -22,7 +22,7 @@ const checkboxClicked = (e) => {
 
 <template>
   <div>
-    <div class="flex font-semibold mt-8 leading-none justify-between items-center" @click="isOpen = !isOpen">
+    <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center" @click="isOpen = !isOpen">
       <span>Sale Products Only</span>
       <Icon name="ion:chevron-down-outline" class="transform" :class="isOpen ? 'rotate-180' : ''" />
     </div>
diff --git a/woonuxt_base/components/filtering/StarRatingFilter.vue b/woonuxt_base/components/filtering/StarRatingFilter.vue
index d778e58..54e54fa 100644
--- a/woonuxt_base/components/filtering/StarRatingFilter.vue
+++ b/woonuxt_base/components/filtering/StarRatingFilter.vue
@@ -23,7 +23,7 @@ const radioClicked = (rating: string): void => {
 
 <template>
   <div>
-    <div class="flex font-semibold mt-8 leading-none justify-between items-center" @click="isOpen = !isOpen">
+    <div class="cursor-pointer flex font-semibold mt-8 leading-none justify-between items-center" @click="isOpen = !isOpen">
       <span>{{ $t('messages.shop.rating') }}</span>
       <Icon v-show="isOpen" name="ion:chevron-up-outline" />
       <Icon v-show="!isOpen" name="ion:chevron-down-outline" />
diff --git a/woonuxt_base/pages/checkout.vue b/woonuxt_base/pages/checkout.vue
index 2adfe07..b8d90db 100644
--- a/woonuxt_base/pages/checkout.vue
+++ b/woonuxt_base/pages/checkout.vue
@@ -25,38 +25,52 @@ const isInvalidEmail = ref(false);
 const instanceOptions = ref({});
 const elementsOptions = ref({});
 const cardOptions = ref({ hidePostalCode: true });
-const stripeLoaded = ref(false);
 const card = ref();
 const elms = ref();
 
+const stripe = stripeKey ? await loadStripe(stripeKey) : null;
+console.log('stripe', stripe);
+
 // Initialize Stripe.js
 onBeforeMount(() => {
   if (query.cancel_order) window.close();
-  if (!stripeKey) {
-    console.error('Stripe key is not set');
-    return;
-  }
-
-  const stripePromise = loadStripe(stripeKey);
-  stripePromise.then(() => {
-    stripeLoaded.value = true;
-  });
 });
 
 const payNow = async () => {
   buttonText.value = t('messages.general.processing');
+
+  // paymentIntents
+  const { client_secret } = await fetch('/api/stripe', {
+    method: 'GET',
+    headers: { 'Content-Type': 'application/json' },
+  }).then((res) => res.json());
+  console.log({ client_secret });
+
   try {
     if (orderInput.value.paymentMethod === 'stripe') {
       const cardElement = card.value.stripeElement;
-      const { source } = await elms.value.instance.createSource(cardElement);
+      console.log({ cardElement });
+      // const { source } = await elms.value.instance.createSource(cardElement);
+      const { error, paymentIntent } = await stripe.confirmCardPayment(client_secret, {
+        payment_method: {
+          card: cardElement,
+          billing_details: {
+            name: 'Jenny Rosen',
+            email: 'scottyzen@hotmail.com',
+          },
+        },
+      });
+      console.log({ error, paymentIntent });
+
       orderInput.value.metaData.push({ key: '_stripe_source_id', value: source.id });
       orderInput.value.transactionId = source.created?.toString() || '';
     }
   } catch (error) {
+    console.error('Error:', error);
     buttonText.value = t('messages.shop.placeOrder');
   }
 
-  proccessCheckout();
+  // proccessCheckout();
 };
 
 const checkEmailOnBlur = (email) => {