luftjunkie

[tranquil cedar]

Hello! What's the issue you're getting?

[dreamy moss]

Hi, So in the console log i get the error like this: Uncaught (in promise) TypeError: Converting circular structure to JSON --> starting at object with constructor 'HTMLDivElement' | property '__reactFiber$skrn0hokee' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle at JSON.stringify (<anonymous>) at l (v3:1:137708) at t.value (v3:1:51233) at t.value (v3:1:50668) at e._sendCaReq (v3:1:63591) at Object.confirmPaymentIntent and in a second I will send the code of a function where the issue occurs, is it ok?

So that's a function after which i get this alert: ` const handleSubmit = async (e) => {
e.preventDefault();

setIsLoading(true);

const { error } = await stripe.confirmPayment({
  elements: elements,
  clientSecret,
  confirmParams: {
    elements: elements,
    return_url: "http://localhost:3000",
  },
});

if (error.type === "card_error" || error.type === "validation_error") {
  setMessage(error.message);
} else {
  setMessage("An unexpected error occurred.");
}

setIsLoading(false);

};`

[tranquil cedar]

Why are you passing in elements under confirmParams?

[dreamy moss]

As far as I know elements contain all information about the payment like payment method etc. But i might be mistaken.

So in order to provide a full data about the payment.

Because the user is not only allowed to pay by card, but also use other methods.

Here are some of the options.

[tranquil cedar]

Let me clarify - you're doing this:

    const { error } = await stripe.confirmPayment({
      elements: elements,
      clientSecret,
      confirmParams: {
        elements: elements,
        return_url: "http://localhost:3000",
      },
    });

when you should really be doing this:

    const { error } = await stripe.confirmPayment({
      elements: elements,
      clientSecret,
      confirmParams: {
        return_url: "http://localhost:3000",
      },
    });

[dreamy moss]

Oooh, well. The thing is that I'm a freshman with the stripe and I thought i need to confirm the params like payment method and because elements include those information, I thought it is needed in confirmParams.

Let me see if it works now.

Now i get another error. So in order to facilitate us the work, I'll paste it here the code of the component that handles the payment.

And here is the error: elements.submit() must be called before stripe.confirmPayment(). Call elements.submit() as soon as your customer presses pay, prior to any asynchronous work. Integration guide:

`export default function CheckoutForm({ clientSecret }) {
const stripe = useStripe();
const elements = useElements();
const [message, setMessage] = useState(null);
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
if (!stripe) {
return;
}

if (!clientSecret) {
  return;
}

stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
  switch (paymentIntent.status) {
    case "succeeded":
      setMessage("Payment succeeded!");
      break;
    case "processing":
      setMessage("Your payment is processing.");
      break;
    case "requires_payment_method":
      setMessage("Your payment was not successful, please try again.");
      break;
    default:
      setMessage("Something went wrong.");
      break;
  }
});

}, [clientSecret, stripe]);

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

setIsLoading(true);

const { error } = await stripe.confirmPayment({
  elements: elements,
  clientSecret,
  confirmParams: {
    return_url: "http://localhost:3000",
  },
});

if (error.type === "card_error" || error.type === "validation_error") {
  setMessage(error.message);
} else {
  setMessage("An unexpected error occurred.");
}

setIsLoading(false);

};

const paymentElementOptions = {
layout: "tabs",
};

return (
<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement id="payment-element" options={paymentElementOptions} />
<button disabled={isLoading || !stripe} id="submit">
<span id="button-text">
{isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message">{message}</div>}
</form>
);
}
`

[tranquil cedar]

Yeah, so the error tells you exactly what you need to do

You need to use elements.submit()

[dreamy moss]

Alright, sorry I'm so confused, that I loose an logical thinking.

Stripe is quite new to me so for every stupid failure I do apologize in advance.

[tranquil cedar]

It's fine to be confused, but if you haven't already I'd strongly suggest reading through the actual guide on how to do this https://stripe.com/docs/payments/accept-a-payment-deferred

It shows you how to use elements.submit() as well

[dreamy moss]

It works apparently, by the way may I ask another question? Related to the linking page like page after the payment succeeds and so forth. How are those properties called? And should I link to those on the server or frontend side?

[tranquil cedar]

Are you talking about the return URL?

[dreamy moss]

yes, but there is the possibility to show the return url for different cases. As far as I've read success_url or something similiar.

So I only would like to ensure myself that there are some of those properties.

[tranquil cedar]

success_url is something that we only have available for Checkout Sessions - if you want to display something different depending on whether the payment was successful or not, then you need to retrieve the PAymentIntent when your customer hit's the return URL and dynamically render the right content based on that status

[dreamy moss]

Alright, I appreciate your aid, you provided to me. And by the way, I read the doc you linked here, but because I've been too discombombulated, that I skipped the line with elements.submit();.