Merged PR 12: Added a stripePayment component
This commit is contained in:
Dominic Villemure
@@ -5,7 +5,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>Hutopy</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
9
package-lock.json
generated
9
package-lock.json
generated
@@ -9,6 +9,7 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@stripe/stripe-js": "^3.0.10",
|
||||
"axios": "^1.6.7",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.15",
|
||||
@@ -841,6 +842,14 @@
|
||||
"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": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@stripe/stripe-js": "^3.0.10",
|
||||
"axios": "^1.6.7",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.15",
|
||||
|
||||
@@ -7,8 +7,5 @@
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
};
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
87
src/views/StripePayment.vue
Normal file
87
src/views/StripePayment.vue
Normal 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>
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user