pawol.nu/components/soutyen/checkout-form.js

import {useState, useEffect} from 'react'
import PropTypes from 'prop-types'
import {
  PaymentElement,
  useStripe,
  useElements
} from '@stripe/react-stripe-js'
import {Button, Container, LinearProgress, Paper} from '@mui/material'

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'

export default function CheckoutForm({validMontant, setError, isLoading, setIsLoading}) {
  const stripe = useStripe()
  const elements = useElements()
  const [isPaymentLoading, setIsPaymentLoading] = useState(false)
  const [prices, setPrices] = useState([])

  const handleSubmit = async event => {
    event.preventDefault()

    if (!stripe || !elements) {
      return
    }

    setIsPaymentLoading(true)

    const {error} = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${SITE_URL}/soutyen`
      },
    })

    if (error.type === 'card_error' || error.type === 'validation_error') {
      setError(error.message)
    } else {
      setError('Une erreur s’est produite.')
    }

    setIsPaymentLoading(false)
  }

  const handleReady = () => {
    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>{prices.find(({id}) => id === validMontant).unit_amount / 100} euros</strong>
          </Button>
        )}
        {isPaymentLoading && (
          <LinearProgress size={24} style={{width: '100%', marginTop: 10}} />
        )}
      </Paper>
    </Container>
  )
}

CheckoutForm.propTypes = {
  validMontant: PropTypes.string.isRequired,
  setError: PropTypes.func.isRequired,
  isLoading: PropTypes.bool.isRequired,
  setIsLoading: PropTypes.func.isRequired
}