IntegrationError: Invalid value for stripe.confirmPayment(): Getting error in React Stripe

Question

I have integrated a stripe @stripe/react-stripe-js: ^1.8.1 into my project. Stripe form working fine it popup a payment form but when I enter the payment information in the form and press the submit button, these errors return. it returns this errors IntegrationError: Invalid value for stripe.confirmPayment(): . I've tried but I was not able to resolve this issue. Could someone please help me how to resolve this issue?

import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
import PropTypes from "prop-types";
import React, { useState } from "react";
import "./style.css";

const CARD_OPTIONS = {
  iconStyle: "solid",
  style: {
    base: {
      iconColor: "#dfe1e7",
      color: "#000",
      fontWeight: 500,
      fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
      borderColor: "#000",
      fontSize: "16px",
      fontSmoothing: "antialiased",
      ":-webkit-autofill": { color: "#dfe1e7" },
      "::placeholder": { color: "#c6c6c6" },
    },
    invalid: {
      iconColor: "#000",
      color: "#000",
    },
  },
};

export function CheckOutForm(props) {
  const [success, setSuccess] = useState(false);
  const stripe = useStripe();
  const elements = useElements();
  console.log("@@ props", elements, props);

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

    const result = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (result.error) {
      console.log(result.error.message);
    } else {
      setSuccess(true);
    }
  };

  return (
    <>
      {!success ? (
        <form className="container" onSubmit={handleSubmit}>
          <fieldset className="FormGroup">
            <div className="FormRow">
              <CardElement options={CARD_OPTIONS} />
            </div>
          </fieldset>
          <button className="SubmitButton">Pay</button>
        </form>
      ) : (
        <div>
          <h2>
            You just bought a sweet spatula congrats this is the best decision
            of you are life
          </h2>
        </div>
      )}
    </>
  );
}

CheckOutForm.prototypes = {
  props: PropTypes.object,
  paymentInformation: PropTypes.string,
};

Answer 1

const result = await stripe.confirmPayment({ elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, });

Your error is here, confirmPayment takes 2 params, your passing in one because of the unnessary curly braces starting before elements

const result = await stripe.confirmPayment( elements, confirmParams: { return_url: "https://example.com/order/123/complete" } );