react-version #1
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 ?
|
||||
{
|
||||
<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>
|
||||
}
|
||||
</>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 = () => {
|
||||
<TotalProductsPrice
|
||||
/>
|
||||
</div>
|
||||
<Row className="invoice-buttons">
|
||||
{/* <Col xs={6}>
|
||||
<Row className="invoice-buttons">
|
||||
{/* <Col xs={6}>
|
||||
<Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
|
||||
</Col> */}
|
||||
<Col xs={12}>
|
||||
<Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Col xs={12}>
|
||||
<Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={6} md={8}>
|
||||
<ReviewProdList
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<StripeContainer cost={total} />
|
||||
<StripeContainer cost={total} invoice={thisInvoice} />
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user