Front-end pour Stripe

2022-11-27 12:02:00 -05:00
parent 5d64c7d8ca
commit 5ece2baea9
7 changed files with 284 additions and 123 deletions
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
@@ -0,0 +1,105 @@
+import React, { useState } from "react"
+import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
+import { Button } from "react-bootstrap"
+
+const CARD_OPTIONS = {
+    iconStyle: "solid",
+    style: {
+        base: {
+            iconColor: "black",
+            color: "white",
+            fontWeight: 500,
+            fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
+            fontSize: "16px",
+            fontSmoothing: "antialiased",
+            ":-webkit-autofill": { color: "beige" },
+            "::placeholder": { color: "lightgray" }
+        },
+        invalid: {
+            iconColor: "red",
+            color: "red"
+        }
+    }
+}
+
+
+
+const PaymentForm = ({ cost }) => {
+
+    const [success, setSuccess] = useState(false);
+    const stripe = useStripe();
+    const elements = useElements();
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const { error, paymentMethod } = await stripe.createPaymentMethod({
+            type: "card",
+            card: elements.getElement(CardElement)
+        })
+
+        if (cost <= 0) {
+            console.log("Coût invalide: ", cost);
+            return;
+        }
+
+        if (!error) {
+            const { id } = paymentMethod;
+
+            const json = JSON.stringify({ amount: cost, stripeId: id });
+
+
+            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);
+            })
+
+        }
+        else {
+            console.log(error.message);
+        }
+    }
+
+
+
+    return (
+        <>
+            {!success ?
+                <form onSubmit={handleSubmit}>
+                    <fieldset className="FormGroup">
+                        <div className="FormRow">
+                            <CardElement options={CARD_OPTIONS} />
+                        </div>
+                    </fieldset>
+                    <div className="Payment-btn-container">
+                        <Button className="Payment-btn" type="submit">Payer</Button>
+                    </div>
+                </form>
+                :
+                <div>
+                    <h2>
+                        L'achat s'est déroulé avec succès
+                    </h2>
+                </div>
+            }
+        </>
+    )
+
+}
+
+export default PaymentForm;