stripe-react-serverless-39.tsx

const CheckoutForm = () => {
  // Include these hooks:
  const stripe = useStripe();
  const elements = useElements();
  const [nameInput, setNameInput] = useState('');
  const [retry, setRetry] = useState(!!localStorage.getItem('invoice_retry'));

  const handleSubmitPayment = async () => {
    // Not implemented yet
  };

  const handleRetryPayment = async () => {
    // Not implemented yet
  };

  const buttonAction = retry ? handleRetryPayment : handleSubmitPayment;

  return (
    <div>
      <input
        placeholder='Name on card'
        value={nameInput}
        onChange={(e) => setNameInput(e.currentTarget.value)}
      />
      <CardNumberElement />
      <CardExpiryElement />
      <CardCvcElement />
      <button onClick={buttonAction}></button>
    </div>
  );
};