memartel/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Paiement fonctionne

Browse Source
This commit is contained in:
Victor Turgeon
2022-12-08 20:27:06 -05:00
parent 10abe82b83
commit 4705da96db
9 changed files with 1562 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js
View File

@@ -34,12 +34,17 @@ const PaymentForm = ({ cost, invoice }) => {
const mySwal = withReactContent(Swal);
const [cardName, setCardName] = useState("");
const [cardPhone,setCardPhone] = useState("");
const [cardEmail,setCardEmail] = useState("");
const [isLoading, setIsLoading] = useState(false);
const stripe = useStripe();
const elements = useElements();
const cart = useContext(CartContext);
const handleSubmit = async (e) => {
e.preventDefault();
setIsLoading(true);
const { error } = await stripe.createPaymentMethod({
type: "card",
card: elements.getElement(CardElement)
@@ -54,14 +59,14 @@ const PaymentForm = ({ cost, invoice }) => {
stripe.createToken(elements.getElement(CardElement), { name: cardName })
.then((result) => {
if (!result.error) {
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;
invoice.email = cardEmail;
invoice.phone = cardPhone;
invoice.lastFourDigits = result.token.card.last4;
const json = JSON.stringify(invoice);
@@ -83,7 +88,7 @@ const PaymentForm = ({ cost, invoice }) => {
}).then(
() => {
cart.emptyCart();
navigate('/morceaux');
navigate('/myInvoices');
}
);
}
@@ -92,6 +97,8 @@ const PaymentForm = ({ cost, invoice }) => {
title: 'Erreur!',
timer: 2000,
icon: "error"
}).then(()=>{
setIsLoading(false);
});
}
});
@@ -110,13 +117,18 @@ const PaymentForm = ({ cost, invoice }) => {
{
<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)} />
<input className="FormRow cardholder-info" placeholder="Nom sur la carte" id="cardholder-name" type="text" value={cardName} onChange={e => setCardName(e.target.value)} />
<input className="FormRow cardholder-info" placeholder="Téléphone de facturation" id="cardholder-phone" type="text" value={cardPhone} onChange={e => setCardPhone(e.target.value)} />
<input className="FormRow cardholder-info" placeholder="Addresse courriel de facturation" id="cardholder-email" type="text" value={cardEmail} onChange={e => setCardEmail(e.target.value)} />
<div className="FormRow">
<CardElement options={CARD_OPTIONS} />
</div>
</fieldset>
<div className="Payment-btn-container">
<Button className="Payment-btn" type="submit">Payer</Button>
<Button className="Payment-btn" disabled={isLoading} type="submit">Payer</Button>
{
isLoading && <div>Paiement en cours...</div>
}
</div>
</form>
}