metecko_code

[dense fox]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1324356221699887165

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[elfin mesa]

hi there!

[visual atlas]

hello!!

[elfin mesa]

1. can you console.log the values of options?
2. how did you initialize stripePromise?
3. also can you share the code for CheckoutForm?

[visual atlas]

1. This might take me a few minutes—while I’m collecting that information, I’ll go ahead and answer your other questions.

"use client";

/*imports */

const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string
);

function PageContent({ lng }: { lng: LocaleTypes }) {
/* modal is here */
}

export default function Page({
params: { lng },
}: {
params: { lng: LocaleTypes };
}) {
return (
<Suspense
fallback={
<div className="flex justify-center items-center h-3xl">
<Spinner />
</div>
}
>
<PageContent lng={lng} />
</Suspense>
);
}

'use client'

/* imports */

interface CheckoutFormProps {
monto: number | undefined;
codigoCarrito: string | null | undefined;
onLoading: (loading: boolean) => void;
lng: LocaleTypes;
}

export const CheckoutForm = ({ monto, codigoCarrito, onLoading, lng }: CheckoutFormProps) => {
const stripe = useStripe();
const elements = useElements();
const { t } = useTranslation(lng, "common");

const { message, setMessage } = usePaymentStatus(stripe, t);
const { isLoading, handleSubmit } = usePaymentSubmit(stripe, elements, codigoCarrito, setMessage, onLoading, t);

const isDisabled = isLoading || !stripe || !elements;

return (
<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement id="payment-element" />
<Button
className="mt-6 mb-4 w-full text-xl"
color="secondary"
radius="sm"
isLoading={isDisabled}
isDisabled={isDisabled}
type="submit"
>
{t("cart.pay", { amount: monto?.toFixed(2) })}
</Button>
{message && (
<div id="payment-message" className="text-center text-error">
{message}
</div>
)}
</form>
);
};

export default function Component(props: CheckoutFormProps = {
monto: 0,
codigoCarrito: null,
onLoading: () => {},
lng: 'en'
}) {
return <CheckoutForm {...props} />;
}

[elfin mesa]

thanks! that code looks okay. so waiting for the answer to the first question.

[visual atlas]

{
"clientSecret": "pi_3QcnoWAM7m4hRAZR1m6uE0xO_secret_blabla",
"appearance": {
"theme": "stripe"
}
}

here is the log

[elfin mesa]

and you see no errors in the browser console? do you have a link where I could reprocude the issue?

[visual atlas]

one moment pls

It happens for certain users. To test, you just need to visit the website patronix.app, create an account, and try to purchase a pattern. If you'd like, I can provide you with a test user.

It hasn't happened to me during my local tests or in production, which is why it's been so difficult for me to resolve this issue.

[elfin mesa]

I can provide you with a test user.
yes please

[visual atlas]

[e-mail]

pass: 12345567

If this also appears as a payment method for you (see screenshot), let me know so I can reset the user.

[elfin mesa]

thanks, give me a few minutes

[proper cape]

I visited it just now and the PaymentElement displays normally

[visual atlas]

I understand it worked for you, but occasionally it fails and shows a blank screen. Do you have any suggestions on how to address this?

https://paste.pics/SM21Y

[proper cape]

I'd add some logs so you can identifty things like what browser it's happening onand if there any commonalities there or in things like customer location. You can also look into libraries that can capture the console logs and report those back
in your screenshot for example that looks like an embedded WebView browser in some Android app so maybe the issue only happens in those embedded browsers

if it were me I'd also redesign the site to not present the form in a modal as that can often cause issues..

[visual atlas]

Thank you very much! I'll take your suggestions and add more logs to see if I can find the error. If I discover more details about the issue, should I reply to this thread or start a new one?

[proper cape]

if it's still open then you can post here otherwise create a new thread