stripe-3d

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);
+  }
+};

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"

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",

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>

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" />

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: '[email protected]',
+          },
+        },
+      });
+      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) => {