Added basic stripe form WIP

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@mdi/font": "^7.4.47",
+        "@stripe/stripe-js": "^3.0.10",
         "axios": "^1.6.7",
         "pinia": "^2.1.7",
         "vue": "^3.4.15",
@@ -841,6 +842,14 @@
         "win32"
       ]
     },
+    "node_modules/@stripe/stripe-js": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-3.0.10.tgz",
+      "integrity": "sha512-CFRNha+aPXR8GrqJss2TbK1j4aSGZXQY8gx0hvaYiSp+dU7EK/Zs5uwFTSAgV+t8H4+jcZ/iBGajAvoMYOwy+A==",
+      "engines": {
+        "node": ">=12.16"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "@stripe/stripe-js": "^3.0.10",
     "axios": "^1.6.7",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",

src/views/StripePayment.vue

@@ -0,0 +1,73 @@
+<template>
+    <v-dialog max-width="720">
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-container>
+          <v-text-field
+              v-model="price"
+            ></v-text-field>
+          <v-btn
+            v-bind="activatorProps"
+            color="surface-variant"
+            text="Checkout"
+            variant="flat"
+            @click="goPay()"
+          ></v-btn>
+      </v-container>
+      </template>
+
+      <template v-slot:default="{ isPaymentDialogActive }">
+        <v-card>
+          <div id="checkout">
+            <!-- Checkout will insert the payment form here -->
+          </div>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn
+              text="Close Dialog"
+              @click="isPaymentDialogActive.value = false"
+            ></v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+</template>
+
+<script setup>
+import { useClient } from '@/plugins/clientPlugin';
+import { loadStripe } from '@stripe/stripe-js';
+import { onMounted, ref } from "vue";
+
+  let stripe = null;
+  const client = useClient();
+  const price = ref(0);
+  const isPaymentDialogActive = ref(true);
+
+  onMounted(async () => {
+    // I removed api key to push. Need to get it from backend.
+    stripe = await loadStripe('');
+  })
+
+  const fetchClientSecret = async () => {
+    const clientSecret = await createCheckoutSession();
+    return clientSecret;
+  };
+
+  async function createCheckoutSession() {
+    let clientSecret = await client.post('/api/Stripe', {
+      price: price.value * 100
+    });
+
+    let secret = clientSecret["data"];
+    console.log(secret)
+    return secret;
+  }
+
+  async function goPay() {
+    isPaymentDialogActive.value = true;
+    const checkout = await stripe.initEmbeddedCheckout({
+      fetchClientSecret,
+    });
+
+    checkout.mount('#checkout');
+  }
+</script>

src/views/main/CreatorFolio.vue

@@ -488,12 +488,15 @@
                   style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
                   class="mt-4" block>Envoyez</v-btn>
               </v-col>
-            </v-row>
+                          </v-row>
 
             <v-row>
               <v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
                 label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
             </v-row>
+            <v-row>
+              <StripePayment></StripePayment>
+            </v-row>
 
           </v-card>
 
@@ -577,7 +580,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-
+import StripePayment from '../StripePayment.vue';
 
 
 import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';