Fix stripe. Remove fetching prices in getServerSideProps

components/soutyen/checkout-form.js

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useState, useEffect} from 'react'
 import PropTypes from 'prop-types'
 import {
   PaymentElement,
@@ -9,11 +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({prices, validMontant, setError, isLoading, setIsLoading}) {
+export default function CheckoutForm({validMontant, setError, isLoading, setIsLoading}) {
   const stripe = useStripe()
   const elements = useElements()
   const [isPaymentLoading, setIsPaymentLoading] = useState(false)
-  const amount = prices.find(({id}) => id === validMontant).unit_amount
+  const [prices, setPrices] = useState([])
 
   const handleSubmit = async event => {
     event.preventDefault()
@@ -44,13 +44,27 @@ export default function CheckoutForm({prices, validMontant, setError, isLoading,
     setIsLoading(false)
   }
 
+  useEffect(() => {
+    const fetchPrices = async () => {
+      try {
+        const response = await fetch(`${SITE_URL}/stripe/dons-list`)
+        const pricesList = await response.json()
+        setPrices(pricesList)
+      } catch (error) {
+        console.error('error', error)
+      }
+    }
+
+    fetchPrices()
+  }, [prices])
+
   return (
     <Container maxWidth='sm' sx={{marginBottom: 1}}>
       <Paper sx={{padding: 2, marginTop: 3}}>
         <PaymentElement id='payment-element' onReady={handleReady} />
         {!isLoading && (
           <Button fullWidth sx={{marginTop: 2}} variant='outlined' disabled={isPaymentLoading || !stripe || !elements} id='submit' onClick={handleSubmit}>
-            Valider le don de&nbsp;<strong>{amount / 100} euros</strong>
+            Valider le don de&nbsp;<strong>{prices.find(({id}) => id === validMontant).unit_amount / 100} euros</strong>
           </Button>
         )}
         {isPaymentLoading && (
@@ -63,7 +77,6 @@ export default function CheckoutForm({prices, validMontant, setError, isLoading,
 
 CheckoutForm.propTypes = {
   validMontant: PropTypes.string.isRequired,
-  prices: PropTypes.array.isRequired,
   setError: PropTypes.func.isRequired,
   isLoading: PropTypes.bool.isRequired,
   setIsLoading: PropTypes.func.isRequired