Add amount to payment validation button

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,

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}