Le paiement se rend sur stripes!

GrossesMitaines/GrossesMitainesAPI/appsettings.json

@@ -10,7 +10,7 @@
     "DefaultConnection": "Server=(localdb)\\mssqllocaldb; Database=GrossesMitainesDB; Trusted_Connection=True; MultipleActiveResultSets=true"
   },
   "StripeTest": {
-    "PublicKey": "pk_test_",
+    "PublicKey": "pk_test_51M8mzOEerenEZcQIUmJIrmsaZeeNlOil2G1JcMvvO68w50MJr8rDwUjVO44a8dDhSlsRH4GdzH9rDqtkg4Rtbzco00NqkHdn3H",
-    "SecretKey": "sk_test_"
+    "SecretKey": "sk_test_51M8mzOEerenEZcQIyHb9AdeluhDsSy9PaxTeqDq6XUhSRCbbqvReHA2KoFb3a8Ru5PAzMgMlCKmj8UDpLKWzUUmr00rta511y8"
   }
 }

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`, {
+                        fetch(`https://localhost:7292/api/Invoice`, {
-                method: 'POST',
+                            method: 'POST',
-                credentials: 'include',
+                            credentials: 'include',
-                mode: 'cors',
+                            mode: 'cors',
-                headers: {
+                            headers: {
-                    'Accept': 'application/json',
+                                'Accept': 'application/json',
-                    'Content-Type': 'application/json'
+                                'Content-Type': 'application/json'
-                },
+                            },
-                body: json
+                            body: json
-            }).then((response) => {
+                        }).then((response) => {
-                if (response.ok) {
+                            console.log(response);
-                    console.log("Successful payment");
+                            if (response.ok) {
-                    setSuccess(true);
+                                mySwal.fire({
-                }
+                                    title: 'Commande envoyée avec succès!',
-                else {
+                                    timer: 2000,
-                    console.log(response);
+                                    icon: "success"
-                }
+                                }).then(
-            }).catch((error) => {
+                                    () => {
-                console.log("Error: ", error);
+                                        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 ?
+            {
                 <form onSubmit={handleSubmit}>
                     <fieldset className="FormGroup">
                         <input className="FormRow" placeholder="Cardholder Name" id="cardholder-name" type="text" value={cardName} onChange={e => setCardName(e.target.value)} />
@@ -92,12 +121,6 @@ const PaymentForm = ({ cost }) => {
                         <Button className="Payment-btn" type="submit">Payer</Button>
                     </div>
                 </form>
-                :
-                <div>
-                    <h2>
-                        L'achat s'est déroulé avec succès
-                    </h2>
-                </div>
             }
         </>
     )

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 (
         <Elements stripe={stripeTestPromise}>
-            <PaymentForm cost={cost}/>
+            <PaymentForm cost={cost} invoice={invoice} />
         </Elements>
     )
 }

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`, {
+    // const handleConfirmer = async () => {
-            method: 'POST',
+    //     const json = JSON.stringify(thisInvoice);
-            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 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 = () => {
                         <TotalProductsPrice
                         />
                     </div>
-                 <Row className="invoice-buttons">
+                    <Row className="invoice-buttons">
-                    {/* <Col xs={6}>
+                        {/* <Col xs={6}>
                         <Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
                     </Col> */}
-                    <Col xs={12}>
+                        <Col xs={12}>
-                        <Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
+                            <Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
-                    </Col>
+                        </Col>
-                </Row> 
+                    </Row>
                 </Col>
                 <Col xs={6} md={8}>
                     <ReviewProdList
                     />
                 </Col>
             </Row>
-           <StripeContainer cost={total} />
+            <StripeContainer cost={total} invoice={thisInvoice} />
         </>
 
     );