social-media/src/views/creators/DonationButtonBannerSlim.vue

<template>
  <v-btn :style="{ 
    backgroundColor: colorBorder, color: 'white', 
    borderRadius: '8px', padding:'0px 24px', 
    display: 'flex', alignItems: 'center', 
    justifyContent: 'center' }" @click="openDonationDialog()">
    <div class="font-bold"> Je soutiens </div>
  </v-btn>






  <v-dialog v-model="donationModal" max-width="500">
    <v-form>
      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
        <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="creatorLogo"
              alt="Profile Image"
              class="rounded-full"
              width="40"
              height="40"
              :style="{ border: `2px solid ${colorAccent}` }">
          <div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
          <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </div>

        <v-card-text>
          <v-text-field
              v-model="tipAmount"
              type="number"
              :min="0"
              class="p-2"
              label="Montant"
              density="comfortable"
              variant="outlined"
              hide-details
              clearable
              inputmode="numeric"
              @keydown="preventNonNumeric"
              prepend-inner-icon="mdi-currency-usd"
          ></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: colorBorder, color: colorBorder }"
                 @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">
        </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 {computed, onMounted, ref} from 'vue';

const props = defineProps({
  colorBorder: {required: true},
  colorAccent: {required: true},
  creatorId: {type: String, required: true},
  creatorName: {type: String, required: true},
  creatorLogo: {required: true},
  iconColorClass: {default: 'text-black'}
});

const colorBorder = computed(() => props.colorBorder)
const colorAccent = computed(() => props.colorAccent)
const creatorId = computed(() => props.creatorId)
const creatorName = computed(() => props.creatorName)
const creatorLogo = computed(() => props.creatorLogo)

const donationModal = ref(false);

function openDonationDialog() {
  donationModal.value = true
}

function closeDonationDialog() {
  donationModal.value = false
}


const isPaymentDialogActive = ref(false);

const tipAmount = ref(0);
const tipMessage = ref("");

let stripe = null;
let checkout;


onMounted(async () => {
  stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
});

const fetchClientSecret = async () => {
  const clientSecret = await createCheckoutSession();
  return clientSecret;
};


async function createCheckoutSession() {
  const client = useClient()
  let clientSecret = await client.post('/api/Stripe', {
    amount: (tipAmount.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');
}

function preventNonNumeric(event) {
  const key = event.key;
  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];

  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
    event.preventDefault();
  }
}
</script>