diff --git a/GrossesMitaines/GrossesMitainesAPI/appsettings.json b/GrossesMitaines/GrossesMitainesAPI/appsettings.json index 0b2724c..b3afa36 100644 --- a/GrossesMitaines/GrossesMitainesAPI/appsettings.json +++ b/GrossesMitaines/GrossesMitainesAPI/appsettings.json @@ -10,7 +10,7 @@ "DefaultConnection": "Server=(localdb)\\mssqllocaldb; Database=GrossesMitainesDB; Trusted_Connection=True; MultipleActiveResultSets=true" }, "StripeTest": { - "PublicKey": "pk_test_", - "SecretKey": "sk_test_" + "PublicKey": "pk_test_51M8mzOEerenEZcQIUmJIrmsaZeeNlOil2G1JcMvvO68w50MJr8rDwUjVO44a8dDhSlsRH4GdzH9rDqtkg4Rtbzco00NqkHdn3H", + "SecretKey": "sk_test_51M8mzOEerenEZcQIyHb9AdeluhDsSy9PaxTeqDq6XUhSRCbbqvReHA2KoFb3a8Ru5PAzMgMlCKmj8UDpLKWzUUmr00rta511y8" } } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js index d339d67..7e35e44 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js @@ -1,6 +1,11 @@ -import React, { useState } from "react" +import React, { useState, useContext } from "react" import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js" import { Button } from "react-bootstrap" +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { CartContext } from "../components/Cart"; +import { useNavigate } from "react-router-dom"; + const CARD_OPTIONS = { iconStyle: "solid", @@ -24,16 +29,18 @@ const CARD_OPTIONS = { -const PaymentForm = ({ cost }) => { +const PaymentForm = ({ cost, invoice }) => { + const navigate = useNavigate(); - const [success, setSuccess] = useState(false); + const mySwal = withReactContent(Swal); const [cardName, setCardName] = useState(""); const stripe = useStripe(); const elements = useElements(); + const cart = useContext(CartContext); const handleSubmit = async (e) => { e.preventDefault(); - const { error, paymentMethod } = await stripe.createPaymentMethod({ + const { error } = await stripe.createPaymentMethod({ type: "card", card: elements.getElement(CardElement) }) @@ -44,32 +51,54 @@ const PaymentForm = ({ cost }) => { } if (!error) { - const { id } = paymentMethod; + stripe.createToken(elements.getElement(CardElement), { name: cardName }) + .then((result) => { + if (!result.error) { - const json = JSON.stringify({ amount: cost, stripeId: id }); + console.log(invoice); + invoice.token = result.token.id; + invoice.description = `Payement de ${cost} à GM`; + invoice.amountInCents = cost; + invoice.currencyCode = "CAD"; + invoice.name = cardName; + invoice.email = invoice.emailAddress; + invoice.phone = invoice.phoneNumber; + const json = JSON.stringify(invoice); - fetch(`https://localhost:7292/api/Payment`, { - method: 'POST', - credentials: 'include', - mode: 'cors', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: json - }).then((response) => { - if (response.ok) { - console.log("Successful payment"); - setSuccess(true); - } - else { - console.log(response); - } - }).catch((error) => { - console.log("Error: ", error); - }) - + fetch(`https://localhost:7292/api/Invoice`, { + method: 'POST', + credentials: 'include', + mode: 'cors', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: json + }).then((response) => { + console.log(response); + if (response.ok) { + mySwal.fire({ + title: 'Commande envoyée avec succès!', + timer: 2000, + icon: "success" + }).then( + () => { + cart.emptyCart(); + navigate('/morceaux'); + } + ); + } + else { + mySwal.fire({ + title: 'Erreur!', + timer: 2000, + icon: "error" + }); + } + }); + } + }); } else { console.log(error.message); @@ -80,7 +109,7 @@ const PaymentForm = ({ cost }) => { return ( <> - {!success ? + {
setCardName(e.target.value)} /> @@ -92,12 +121,6 @@ const PaymentForm = ({ cost }) => { - : -
-

- L'achat s'est déroulé avec succès -

-
} ) diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/StripeContainer.js b/GrossesMitaines/grosses-mitaines-ui/src/components/StripeContainer.js index c5d2b93..ffec286 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/StripeContainer.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/StripeContainer.js @@ -7,10 +7,10 @@ const PUBLIC_KEY = "pk_test_51M8mzOEerenEZcQIUmJIrmsaZeeNlOil2G1JcMvvO68w50MJr8r const stripeTestPromise = loadStripe(PUBLIC_KEY); -const StripeContainer = ({cost}) => { +const StripeContainer = ({cost, invoice}) => { return ( - + ) } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js index c7c79db..d855385 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js @@ -4,8 +4,6 @@ import ReviewProdList from "../components/ReviewProdList"; import TotalProductsPrice from "../components/TotalProductsPrice"; import { Row, Col, Button } from "react-bootstrap"; import { useNavigate } from "react-router-dom"; -import Swal from "sweetalert2"; -import withReactContent from "sweetalert2-react-content"; import { CartContext } from "../components/Cart"; import StripeContainer from "../components/StripeContainer" @@ -13,7 +11,7 @@ const ReviewInvoice = () => { const navigate = useNavigate(); - const mySwal = withReactContent(Swal); + const cart = useContext(CartContext); @@ -90,41 +88,42 @@ const ReviewInvoice = () => { navigate("/formulaire") } - const handleConfirmer = async () => { - const json = JSON.stringify(thisInvoice); - const response = await fetch(`https://localhost:7292/api/Invoice`, { - method: 'POST', - credentials: 'include', - mode: 'cors', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: json - }) - if (response.ok) { - mySwal.fire({ - title: 'Commande envoyée avec succès!', - timer: 2000, - icon: "success" - }).then( - () => { - cart.emptyCart(); - navigate('/morceaux'); - } - ) - } - else { - console.log("Erreur de creation la commande #" + thisInvoice.id); - mySwal.fire({ - title: 'Erreur!', - timer: 2000, - icon: "error" - }) - } + // const handleConfirmer = async () => { + // const json = JSON.stringify(thisInvoice); - } + // const response = await fetch(`https://localhost:7292/api/Invoice`, { + // method: 'POST', + // credentials: 'include', + // mode: 'cors', + // headers: { + // 'Accept': 'application/json', + // 'Content-Type': 'application/json' + // }, + // body: json + // }) + // if (response.ok) { + // mySwal.fire({ + // title: 'Commande envoyée avec succès!', + // timer: 2000, + // icon: "success" + // }).then( + // () => { + // cart.emptyCart(); + // navigate('/morceaux'); + // } + // ) + // } + // else { + // console.log("Erreur de creation la commande #" + thisInvoice.id); + // mySwal.fire({ + // title: 'Erreur!', + // timer: 2000, + // icon: "error" + // }) + // } + + // } return ( <> @@ -177,21 +176,21 @@ const ReviewInvoice = () => { - - {/* + + {/* */} - - - - + + + + - + );