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

Merged PR 12: Added a stripePayment component

Browse Source
This commit is contained in:
Dominic Villemure
2024-03-28 04:20:48 +00:00
parent 73858a1bae 015f99180f
commit af35da4557
6 changed files with 104 additions and 22 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>

9
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@mdi/font": "^7.4.47", "@mdi/font": "^7.4.47",
"@stripe/stripe-js": "^3.0.10",
"axios": "^1.6.7", "axios": "^1.6.7",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"vue": "^3.4.15", "vue": "^3.4.15",
@@ -841,6 +842,14 @@
"win32" "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": { "node_modules/@types/estree": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",

1
package.json
View File

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

5
src/App.vue
View File

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

87
src/views/StripePayment.vue Normal file
View File

@@ -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>

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

@@ -474,24 +474,12 @@
</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>
@@ -577,7 +565,7 @@
<script setup> <script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue'; import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue'; import FooterLayout from '@/layouts/FooterLayout.vue';
import StripePayment from '../StripePayment.vue';
import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue'; import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';