diff --git a/components/soutyen/checkout-form.js b/components/soutyen/checkout-form.js new file mode 100644 index 0000000..8f876b1 --- /dev/null +++ b/components/soutyen/checkout-form.js @@ -0,0 +1,69 @@ +import {useState} 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({setPaymentIsReady, setError, isLoading, setIsLoading}) { + const stripe = useStripe() + const elements = useElements() + const [isPaymentLoading, setIsPaymentLoading] = useState(false) + + 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) + setPaymentIsReady(true) + } + + return ( + + + + {!isLoading && ( + + )} + {isPaymentLoading && ( + + )} + + + ) +} + +CheckoutForm.propTypes = { + setPaymentIsReady: PropTypes.func.isRequired, + setError: PropTypes.func.isRequired, + isLoading: PropTypes.bool.isRequired, + setIsLoading: PropTypes.func.isRequired +}