#wilem121982013

1 messages · Page 1 of 1 (latest)

faint raptorBOT
#

Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

runic hollow
#

Hello! I'm not quite sure what you mean by a "delay intent" - can you clarify?

topaz tendon
#

this is what one of your colleagues sent to me

runic hollow
#

Gotcha! and what's the bug that you're still seeing?

topaz tendon
#

i have a bug where when i arrived at the page where i have my stripe form with Elements i focus one of the input, and then i blur it and the form refresh but not the page so i have to fill it again and then it works well

runic hollow
#

Gotcha - and when you switched over to using deferred intent, are you sure you're not updating your elements provider in any way?

topaz tendon
#

no it's still the same

#

and i revert my change to the original one

#

i can send my code from the page i render the form and the form component if you want

runic hollow
#

What do you mean by it's still the same? Wasn't the issue that was talked about in the previous thread that your elements provider was being updated and that's why it was re-renderinf the whole thing?

topaz tendon
#

i thought but i updated my code and their is litteraly nothing that rerender the code i dont understand

#

and until i touch the form (i didnt change anything on the inputs) it dont rerender but at the moment i focus one and then blur it the form is refreshed for a reason that i dont understand

runic hollow
#

Before look at your code, do you happen to have a site I can look at on my end, or are you doing this all locally?

topaz tendon
#

i have a site but cant share it here it's from my company and not release yet

runic hollow
#

Gotcha - then can you share a snippet of your code that's rendering the Payment Element?

topaz tendon
#

import { PaymentElement, Elements, useStripe, useElements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { ArrowRightIcon } from "@/assets/icons";
import { Button } from "@/components";
import { useUserSession } from "@/hooks/useUserSession";
import { STRIPE_PUBLIC_KEY } from "@/utils/env";

const stripePromise = loadStripe(STRIPE_PUBLIC_KEY);

const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const { user } = useUserSession();
const { t } = useTranslation();

const [errorMessage, setErrorMessage] = useState("");
const handleSubmit = async () => {
if (elements == null || stripe == null) {
return;
}

const { error: submitError } = await elements.submit();
if (submitError) {
  setErrorMessage(submitError.message ?? "");
  return;
}
const { error } = await stripe.confirmSetup({
  elements,
  clientSecret: user?.checkout?.payment?.clientSecret ?? "",
  confirmParams: {
    return_url: `${window.location.origin}/payment/confirmation`,
  },
});

if (error) {
  setErrorMessage(error.message ?? "");
} else {
  // Your customer will be redirected to your `return_url`. For some payment
  // methods like iDEAL, your customer will be redirected to an intermediate
  // site first to authorize the payment, then redirected to the `return_url`.
}

};

if (elements == null || stripe == null) {
return;
}

#

return (
<form
onSubmit={(event) => {
event.preventDefault();
handleSubmit().catch(console.error);
return false
}}
>
<PaymentElement />
<div className="items-center justify-start flex-col p-4 pb-6 pt-4">
<Button
text={t("navigation.validate")}
suffixIcon={<ArrowRightIcon />}
disabled={!stripe || !elements}
type="submit"
/>
</div>
{errorMessage && <div>{errorMessage}</div>}
</form>
);
};

const StripeForm = () => {
const { user } = useUserSession();

const options = {
currency: "eur",
clientSecret: user?.checkout?.payment?.clientSecret ?? "",
};

return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
};

export default StripeForm;

#

here is the form

#

here how where i render the form

<div className="flex flex-col">
<div className="flex flex-col z-10 top-0 sticky">
<Header />
<div className="py-2 bg-emerald-100 justify-center items-start inline-flex">
<div className="justify-start items-start gap-2 flex">
<div
className="text-green-950 text-sm leading-[18px]"
dangerouslySetInnerHTML={{ __html: paramset?.extra.green_notice ?? "" }}
/>{" "}
</div>
</div>
</div>
<div className="flex-col flex md:max-w-[536px] mx-auto grow px-4 md:px-0 w-full">
<div className="flex items-center cursor-pointer my-4 md:my-6" onClick={() => navigate(-1)}>
<ArrowBackIcon />
<span className="underline hidden md:block">{t("navigation.back")}</span>
</div>
<div className="text-neutral-600 text-xs font-normal leading-[18px]">
{t("navigation.step", { current: currentOrder, total: totalOrder })}
</div>
<div className="text-zinc-900 text-2xl font-bold my-4">{t("credit_card.your_payment")}</div>
<StripeForm />
</div>

#

and i also have a useEffect where i render the form which is use to get the client_secret

useEffect(() => {
const validateCheckout = async () => {
const intent = await putCheckout(uuid);
setUser({
...user,
checkout: {
...user.checkout,
payment: intent,
},
});
};

if (uuid && !payment?.id) {
  validateCheckout().catch(console.error);
}

}, [user]);

runic hollow
#

Can you remove the useEffect entirely just to make sure that's not the issue (hardcode the client_secret in the mean time)

topaz tendon
#

i try it

#

no still doing it event without the useEffect

runic hollow
#

Can you also remove const { user } = useUserSession(); from your StripeForm

topaz tendon
#

i remove it everywhere and it still do the same

#

if you really want to try yourself i can send it the link in private but its in french

runic hollow
#

No, it's fine for now - but really this is something that you're going to need to do some work to narrow down. I'd remove everything that you can and just have a very barebones thing to see if you still get the issue. Like I'd remove all those extra divs, anything that calls useUserSession and useTranslation, things like that

faint raptorBOT
topaz tendon
#

my bad sorry

#

i remove over useSessionUser and comment everywhere its use on those to files, i alos remove all the useTranslations() and all the keys in the two files too and i also hard coded the client_secrets

#

i only have the stripe Elements with submit and the form with my button and on the page where i render my form i only have div with tailwind and my form component

rain locust
#

@topaz tendon hello, I'm stepping in

#

I'm going to have to reiterate what karbi said - this is your code and you would have to debug this. This isn't a Stripe issue really, more an issue in debugging your own code so only you can fully debug and fix this

topaz tendon
#

Hello

#

well i understand but right now i only have the code from your documentation that i copy past and just update the values, i have a lot of forms on my website and only yours do this i just dont understand what i can do more i spend two days trying everything for that issue

rain locust
#

break down the problem into the simplest repro, like karbi said, it clearly isn't just Stripe's code, it is also your code, right?

topaz tendon
#

i'll try later in a complete new project to integrate only your form and se what happens thanks guys and i'll tell you how it goes