jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed the stripePayment component

Browse Source
This commit is contained in:
Dominic Villemure
2024-03-28 00:19:36 -04:00
parent eef07babe8
commit 015f99180f
4 changed files with 54 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>Hutopy</title>
</head> </head>
<body> <body>

5
src/App.vue
View File

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

52
src/views/StripePayment.vue
View File

@@ -1,21 +1,25 @@
<template> <template>
<v-dialog max-width="720">
<template v-slot:activator="{ props: activatorProps }">
<v-container> <v-container>
<v-row>
<v-col>
<v-text-field <v-text-field
label="Montant ($)"
v-model="price" v-model="price"
></v-text-field> style="color: rgb(0, 109, 119); background-color: #f4f4f4">
<v-btn </v-text-field>
v-bind="activatorProps" </v-col>
color="surface-variant"
text="Checkout"
variant="flat"
@click="goPay()"
></v-btn>
</v-container>
</template>
<template v-slot:default="{ isPaymentDialogActive }"> <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> <v-card>
<div id="checkout"> <div id="checkout">
<!-- Checkout will insert the payment form here --> <!-- Checkout will insert the payment form here -->
@@ -23,13 +27,16 @@
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn <v-btn
text="Close Dialog" text="Annuler"
@click="isPaymentDialogActive.value = false" @click="closeDialog()"
></v-btn> ></v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</template> </template>
</v-dialog> </v-dialog>
</v-container>
</template> </template>
<script setup> <script setup>
@@ -40,7 +47,8 @@ import { onMounted, ref } from "vue";
let stripe = null; let stripe = null;
const client = useClient(); const client = useClient();
const price = ref(0); const price = ref(0);
const isPaymentDialogActive = ref(true); const isPaymentDialogActive = ref(false);
var checkout;
onMounted(async () => { onMounted(async () => {
// I removed api key to push. Need to get it from backend. // I removed api key to push. Need to get it from backend.
@@ -58,16 +66,22 @@ import { onMounted, ref } from "vue";
}); });
let secret = clientSecret["data"]; let secret = clientSecret["data"];
console.log(secret)
return secret; return secret;
} }
function closeDialog(){
isPaymentDialogActive.value = false;
checkout.destroy();
}
async function goPay() { async function goPay() {
isPaymentDialogActive.value = true; isPaymentDialogActive.value = true;
const checkout = await stripe.initEmbeddedCheckout({
checkout = await stripe.initEmbeddedCheckout({
fetchClientSecret, fetchClientSecret,
}); });
checkout.mount('#checkout'); await checkout.mount('#checkout');
} }
</script> </script>

23
src/views/main/CreatorFolio.vue
View File

@@ -474,29 +474,14 @@
</h1> </h1>
</v-container> </v-container>
<v-row style=" margin-top: 30px; "> <v-row class="mt-12 ml-2 mr-4 mb-4" style="background-color: #f4f4f4;">
<v-col cols="6" style="background-color: #f4f4f4"> <StripePayment></StripePayment>
<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> </v-row>
<v-row> <v-row class="ml-2 mb-2 mr-2">
<v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)" <v-textarea style="color: rgba(0, 109, 119)"
label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea> label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
</v-row> </v-row>
<v-row>
<StripePayment></StripePayment>
</v-row>
</v-card> </v-card>