Full Scope of Checkout Form

CheckoutForm.js

const CheckoutFormComponent = (props) => {
  const stripe = useStripe();
  const elements = useElements();
  const { fullName, email } = props;
  const [cardType, setCardType] = useState("");

  useEffect(() => {}, []);

  const handleSubmit = async (event) => {
    // Block native form submission.
    props.setIsLoading(true);
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js has not loaded yet. Make sure to disable
      // form submission until Stripe.js has loaded.
      return;
    }
    const result = await stripe.confirmCardPayment(props.clientSecret, {
      payment_method: {
        card: elements.getElement(CardElement),
        billing_details: {
          name: fullName,
        },
      },
      // receipt_email: email,
    });
    props.setIsLoading(false);

    if (result.error) {
      // Show error to your customer (e.g., insufficient funds)
      props.onError(result.error.message);
      // console.log(result.error.message);
    } else {
      // The payment has been processed!
      if (result.paymentIntent.status === "succeeded") {
        // Show a success message to your customer
        // There's a risk of the customer closing the window before callback
        // execution. Set up a webhook or plugin to listen for the
        // payment_intent.succeeded event that handles any business critical
        // post-payment actions.
        // props.onClose();
        props.onSuccess();
      }
    }
  };

  const onChangeCard = (event) => {
    setCardType(event.brand);
  };
  return (
    <form id="stripeForm" onSubmit={handleSubmit}>
      <div
        style={{ margin: "2rem", display: "flex", justifyContent: "center" }}
      >
        <Grid.Column>
          <Grid.Row>
            <PaymentCard
              className={styles.paymentCard}
              style={{ width: "100%!important" }}
              brand={cardType}
              number="4111111111111111"
              cvv="123"
              holderName="John Doe"
              expiration="12/22"
              flipped={false}
            />
          </Grid.Row>
          <Grid.Row>
            <Segment style={{ marginTop: "2rem", marginBottom: "-1rem" }}>
              <CardElement onChange={onChangeCard} options={options} />
            </Segment>
          </Grid.Row>
        </Grid.Column>
      </div>

      {/* <PaymentRequestButtonElement/> */}
    </form>
  );
};