Merged PR 12: Added a stripePayment component

src/App.vue

@@ -7,8 +7,5 @@
   </v-app>
 </template>
 
-<script>
-export default {
-  name: 'App',
-};
+<script setup>
 </script>

src/views/StripePayment.vue

@@ -0,0 +1,87 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-text-field 
+          label="Montant ($)"
+          v-model="price"
+          style="color: rgb(0, 109, 119); background-color: #f4f4f4">
+        </v-text-field>
+      </v-col>
+
+      <v-col>
+        <v-btn
+          @click="goPay()"
+          style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
+          >Envoyez
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
+      <template v-slot:default>
+        <v-card>
+            <div id="checkout">
+                <!-- Checkout will insert the payment form here -->
+            </div>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    text="Annuler"
+                    @click="closeDialog()"
+                ></v-btn>
+            </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+  </v-container>
+  
+
+</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(false);
+  var checkout;
+
+  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"];
+    return secret;
+  }
+
+  function closeDialog(){
+    isPaymentDialogActive.value = false;
+    checkout.destroy();
+  }
+
+  async function goPay() {
+    isPaymentDialogActive.value = true;
+
+    checkout = await stripe.initEmbeddedCheckout({
+      fetchClientSecret,
+  });
+
+    await checkout.mount('#checkout');
+  }
+
+</script>

src/views/main/CreatorFolio.vue

@@ -474,24 +474,12 @@
               </h1>
             </v-container>
 
-            <v-row style=" margin-top: 30px; ">
-              <v-col cols="6" style="background-color: #f4f4f4">
-                <v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
-                  <v-form @submit.prevent>
-                    <v-text-field label="Montant ($)"
-                      style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
-                  </v-form>
-                </v-sheet>
-              </v-col>
-              <v-col cols="6" class="d-flex align-center">
-                <v-btn
-                  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 class="mt-12 ml-2 mr-4 mb-4" style="background-color: #f4f4f4;">
+                <StripePayment></StripePayment>
             </v-row>
 
-            <v-row>
-              <v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
+            <v-row class="ml-2 mb-2 mr-2">
+              <v-textarea style="color: rgba(0, 109, 119)"
                 label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
             </v-row>
 
@@ -577,7 +565,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';