Add Donation-button, Need to connect stripe

src/views/contents/ContentPage.vue

@@ -48,8 +48,20 @@
         <div v-if="data && data.description">
           Description: {{ data.description }}
         </div>
-      </div>
 
+        <div class="flex justify-around py-2">
+          <v-btn variant="plain" icon @click="likeContent">
+            <v-icon :color="'#313131'">mdi-thumb-up-outline</v-icon> 
+          </v-btn>
+          <v-btn variant="plain" icon @click="dislikeContent">
+            <v-icon :color="'#000000'">mdi-thumb-down-outline</v-icon> 
+          </v-btn>
+          <v-btn variant="plain" icon @click="donate">
+            <v-icon :color="'#7D0863'">mdi-gift-outline</v-icon> 
+          </v-btn>
+        </div>
+
+      </div>
 
       <div class="border-b-2 p-6">
         <h2 class="font-sans font-semibold">Commentaires</h2>

src/views/creators/CreatorBanner.vue

@@ -63,7 +63,7 @@
           <subscribe-button :creator="creator"></subscribe-button>
         </div>
         
-       
+        <donation-button :creator="creator"></donation-button>
 
 
         <div class="flex flex-row align-center">
@@ -85,6 +85,7 @@
 import CreatorAbout from "@/views/creators/CreatorAbout.vue";
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import PublishContentButton from "@/views/contents/PublishContentButton.vue";
+import DonationButton from "@/views/creators/donation-button.vue";
 
 const props = defineProps({
   creator: {type: Object, required: true},

src/views/creators/donation-button.vue

@@ -0,0 +1,124 @@
+<template>
+  <v-btn variant="text" icon class="text-white" @click="donationModal = true">
+    <v-icon class="text-2xl">mdi-gift-outline</v-icon>
+  </v-btn>
+
+  <v-dialog v-model="donationModal" max-width="500">
+    <v-form>
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${creator.colors.menu}` }">
+        <div class="py-4 text-2xl font-bold border-b mb-2">
+          Je Soutiens!
+        </div>
+
+        <div class="flex flex-row align-center px-3">
+          <img
+              :src="creator.images.logo"
+              alt="Profile Image"
+              class="rounded-full"
+              width="40"
+              height="40"
+              :style="{ border: `2px solid ${creator.colors.accent}` }">
+          <div class="capitalize px-2 text-2xl">{{ creator.name }}</div>
+          <v-btn icon @click="donationModal = false" class="ml-auto" variant="text">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </div>
+
+        <v-card-text>
+          <v-text-field v-model="price"
+                        class="p-2"
+                        label="Montant"
+                        density="comfortable"
+                        variant="outlined"
+                        hide-details
+                        clearable
+          ></v-text-field>
+
+          <v-textarea v-model="tipMessage"
+                      label="Message (facultatif)"
+                      class="p-2"
+                      density="comfortable"
+                      variant="outlined"
+                      hide-details
+                      clearable
+          ></v-textarea>
+
+          <v-btn variant="outlined" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" @click="goPay()" class="w-full mt-5">
+            Envoyez
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-form>
+  </v-dialog>
+
+  <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 block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script setup>
+import {useClient} from '@/plugins/api.js';
+import {loadStripe} from '@stripe/stripe-js';
+import {onMounted, ref} from 'vue';
+
+const donationModal = ref(false);
+const isPaymentDialogActive = ref(false); // Ajout de cette ligne
+const price = ref(0);
+const tipMessage = ref("");
+let stripe = null;
+let checkout;
+
+const client = useClient();
+
+const props = defineProps({
+  creator: {type: Object, required: true},
+
+});
+
+onMounted(async () => {
+  stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
+});
+
+const fetchClientSecret = async () => {
+  const clientSecret = await createCheckoutSession();
+  return clientSecret;
+};
+
+async function createCheckoutSession() {
+  let clientSecret = await client.post('/api/Stripe', {
+    amount: (price.value * 100),
+    tipMessage: tipMessage.value,
+    creatorId: props.creatorId
+  });
+
+  let secret = clientSecret["data"];
+  return secret;
+}
+
+function closeDialog() {
+  isPaymentDialogActive.value = false;
+  if (checkout) {
+    checkout.destroy();
+  }
+}
+
+async function goPay() {
+  isPaymentDialogActive.value = true;
+
+  checkout = await stripe.initEmbeddedCheckout({
+    fetchClientSecret,
+  });
+
+  await checkout.mount('#checkout');
+}
+</script>

src/views/explorer/ExplorerCard.vue

@@ -15,7 +15,7 @@
           <h4 class="text-md font-bold">{{ video.name }}</h4>
           <div class="text-gray-600 text-sm">
             <span>{{ video.vues }} vues</span> -
-            <span>{{ video.timeAgo }} ago</span>
+            <span>{{ video.timeAgo }} ago</span>            
           </div>
         </div>
       </div>
@@ -23,6 +23,8 @@
   </div>
 </template>
 
+
+
 <script setup>
 defineProps({
   video: {