rc9999999-elements

[azure pike]

@frosty stag hi! happy to try to help. Can you show me where exactly you pass this return_url , so I can understand more about how you integrate?

[frosty stag]

Sure

  const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        // Make sure to change this to your payment completion page
        return_url: "http://localhost:3000",
      },
    });

The code is basically this: https://stripe.com/docs/payments/quickstart

[azure pike]

got it, makes sense.

so yep, when you process the payment, the page will then redirect to that URL. That is an entirely separate page. We add the client_secret of the PaymentIntent to the URL, you can read that from the URL query parameters and then use retrievePaymentIntent to get context on the payment so you can show a success page for example.

is that all making sense/familiar?

[frosty stag]

But if the switch isn't working, how I can direct them to a success page with just 1 return_url?

[azure pike]

can you clarify what you mean by the switch statement "not working"?

[frosty stag]

It doesn't console.log anything when I've tried.

The example code shows setting the messages from the switch and then displaying at the bottom of the checkout form, but if it's successful, it obviously redirects but when redirects, all refreshes and nothing is set or logged.

All I want to do is make sure the payment status is successful and then post form data once succeeded, it's really simple.

[azure pike]

but if it's successful, it obviously redirects but when redirects, all refreshes and nothing is set or logged.
what you should see is that when the redirect happens, in your browser the URL you get redirected to should look like , for example :
http://localhost:3000?payment_intent=pi_3KdaFzJoUivz182D0PYMQPM9&payment_intent_client_secret=pi_3KdaFzJoUivz182D0PYMQPM9_secret_XOWePSzpZRELkHs4Xd91xJUDx&redirect_status=succeeded

the idea then is that the code in that useEffect reads the payment_intent_client_secret from the URL and the switch statement runs. That only happens after you've completed the payment and the redirect happens.

are you seeing the URL that appears in the browser as being something different?

[frosty stag]

But the useEffect doesn't trigger if I've moved away from the CheckoutForm? Or am I wrong?

[azure pike]

it should just work, it works in the sample code.

could you share the complete code you've written exactly and the components it uses?

[frosty stag]

My Form Submit that starts the process:

  async function handleSubmit(e) {
    e.preventDefault();
    openModal();
    fetch("/api/create-payment-intent", {
      method: "POST",
      body: price,
      headers: { "Content-Type": "application/json" },
    })
      .then((res) => res.json())
      .then(
        (data) => setClientSecret(data.clientSecret)
      );
    console.log(clientSecret);
  }

Full useEffect Hook:

useEffect(() => {
    if (!stripe) {
      console.log("No Stripe!");
      return;
    }

    const clientSecret = new URLSearchParams(window.location.search).get(
      "payment_intent_client_secret"
    );

    if (!clientSecret) {
      console.log("No clientSecret!");
      return;
    }

    stripe
      .retrievePaymentIntent(clientSecret)
      .then(async ({ 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;
        }
      });
  }, [stripe]);

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

    if (!stripe || !elements) {
      return;
    }

    setIsLoading(true);

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

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

    setIsLoading(false);
  };

My payments work fine, it's just the useEffect I'm struggling to understand, it only triggers when the checkout form is open.

[azure pike]

can you share the full components, like the complete jsx files? For example, what is that openModal function? We really need to see the complete context here and where you use the CheckoutForm component.

note also our sample is not designed for being embedded in a modal at all

so it will not work really out of the box without modifying things quite a bit

[frosty stag]

That's my concern, I think that could be the issue.

My Modal:

    {clientSecret && (
                    <Elements options={options} stripe={stripePromise}>
                      <CheckoutForm
                        price={price}
                        body={body}
                        clientSecret={clientSecret}
                      />
                    </Elements>
                  )}

Ignore the clientSecret, that was an attempt at something

It's not being imported

[azure pike]

sorry but we need to see the complete files.

these small snippets don't really give enough context I'm afraid!

[frosty stag]

It's 600 lines of form

That works

Thanks for your attempt at help but I'll try and figure it out myself, it's probably the modal.

[azure pike]

ok so to be clear, the code in our sample does not expect there to be a modal. It expects there to be a simple page that is always showing the CheckoutForm component.

if you put this into a modal, what will happen is, the page will redirect after the payment and you go to your version of your page where the modal is closed, and the CheckoutForm component is probably not visible or rendered

so this won't really work without modifying things. Maybe don't use the modal?

[frosty stag]

Going to go with this approach and scrap the modal