From f2ba39aebadb8d1a0e0e5fc7a3816f78416fff95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Mon, 14 Mar 2022 18:59:11 +0400
Subject: [PATCH] Add amount to payment validation button

---
 components/soutyen/checkout-form.js  | 7 +++++--
 components/soutyen/payment-method.js | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/soutyen/checkout-form.js b/components/soutyen/checkout-form.js
index bdf1fa2..3dbd646 100644
--- a/components/soutyen/checkout-form.js
+++ b/components/soutyen/checkout-form.js
@@ -9,10 +9,11 @@ import {Button, Container, LinearProgress, Paper} from '@mui/material'
 
 const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
 
-export default function CheckoutForm({setPaymentIsReady, setError, isLoading, setIsLoading}) {
+export default function CheckoutForm({prices, validMontant, setPaymentIsReady, setError, isLoading, setIsLoading}) {
   const stripe = useStripe()
   const elements = useElements()
   const [isPaymentLoading, setIsPaymentLoading] = useState(false)
+  const amount = prices.find(({id}) => id === validMontant).unit_amount
 
   const handleSubmit = async event => {
     event.preventDefault()
@@ -50,7 +51,7 @@ export default function CheckoutForm({setPaymentIsReady, setError, isLoading, se
         <PaymentElement id='payment-element' onReady={handleReady} />
         {!isLoading && (
           <Button fullWidth sx={{marginTop: 2}} variant='outlined' disabled={isPaymentLoading || !stripe || !elements} id='submit' onClick={handleSubmit}>
-            Valider le paiement
+            Valider le paiement de&nbsp;<strong>{amount / 100} euros</strong>
           </Button>
         )}
         {isPaymentLoading && (
@@ -62,6 +63,8 @@ export default function CheckoutForm({setPaymentIsReady, setError, isLoading, se
 }
 
 CheckoutForm.propTypes = {
+  validMontant: PropTypes.string.isRequired,
+  prices: PropTypes.array.isRequired,
   setPaymentIsReady: PropTypes.func.isRequired,
   setError: PropTypes.func.isRequired,
   isLoading: PropTypes.bool.isRequired,
diff --git a/components/soutyen/payment-method.js b/components/soutyen/payment-method.js
index 2c51a97..d784682 100644
--- a/components/soutyen/payment-method.js
+++ b/components/soutyen/payment-method.js
@@ -93,6 +93,8 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
         {clientSecret && validMontant && paymentMethod === 0 && (
           <Elements options={options} stripe={stripePromise}>
             <CheckoutForm
+              prices={prices}
+              validMontant={validMontant}
               setPaymentIsReady={setPaymentIsReady}
               setError={setError}
               isLoading={isLoading}