vnadygin - stripe.js | Stripe Developers | Page 1

fervent mirage May 25, 2022, 8:34 PM

#

hi there!

spare maple May 25, 2022, 8:34 PM

#

Hi

fervent mirage May 25, 2022, 8:41 PM

#

Could you provide more details here? I'm not sure I understand your question

spare maple May 25, 2022, 8:43 PM

#

Sure

#

here is the link

#

https://byrotation.com/events/summer-party

#

You can try to "Continue to checkout", it works after you refrest the page

#

But do not work then you open it first time

#

The code is pretty simple, i'll share it with you

#

#

So, const stripe = await getStripe(); never get initialised and never throw an error on a first load

#

after user refresh a page it works

pastel slate May 25, 2022, 8:48 PM

#

cc @dark locust who is taking over

spare maple May 25, 2022, 8:48 PM

#

Let me know you I can provide more info for you

pastel slate May 25, 2022, 8:48 PM

#

Do you get an error/exception when you load Stripe.js?

#

it's not super clear what the URL you shared is showing

spare maple May 25, 2022, 8:48 PM

#

No, it's in infinite load

dark locust May 25, 2022, 8:51 PM

#

Looking at that page the Continue to Checkout button doesn't seem to work for me at all, no matter how many times I reload the page. After filling out a name and email and pressing the button I get a loading spinner and then nothing happens. Can you add logging to the code that handles that button press to find exactly where it gets stuck?

spare maple May 25, 2022, 8:52 PM

#

@dark locust Sure thing. We've trying to debug it many times

#

Here is the video\

#

Let me add logs to the console and provide you a link

dark locust May 25, 2022, 8:59 PM

#

Can you provide a minimal test case to reproduce? There's a lot going on on that page.

spare maple May 25, 2022, 9:06 PM

#

@dark locust We will make a minimal test case tomorrow

#

But in a mean time you can check this this test link:
https://web-j87kl046n-by-rotation.vercel.app/events

Events | By Rotation

The UK's leading peer-to-peer fashion rental app. Hire luxury designer clothes and accessories from top brands in London and the UK. No waiting list. No subscription fees.

#

#

Here is the code we use on submit:

const formik = useFormik({
    validationSchema,
    validateOnChange: false,
    validateOnBlur: false,
    initialValues: {
      buyerName: "",
      buyerEmail: "",
      ticketVariant: ticketsVariants?.[0],
    },
    onSubmit: async (values) => {
      setLoading(true);
      try {
        const { data } = await createEventTicketPaymentSession({
          buyerName: values.buyerName,
          buyerEmail: values.buyerEmail,
          ticketVariantId: values?.ticketVariant?.id,
          amount: values?.ticketVariant?.amount,
          eventId: event?.id,
        });

        const sessionId = data?.createEventTicketPaymentSession;

        console.log(
          "sessionId has been initialized from the console: ",
          sessionId
        );

        console.log("try to create stripe instance");

        const stripe = await getStripe();

        console.log("stripe instance has been created", stripe);

        console.log("try to redirect to stripe checkout link");

        const result = await stripe?.redirectToCheckout({
          sessionId,
        });
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    },
  });

dark locust May 25, 2022, 9:07 PM

#

Those errors seem unrelated, but it's hard to tell because the filenames on the right are cut off.

#

Looks like the Checkout Session is being created.

spare maple May 25, 2022, 9:08 PM

#

Let me share another screenshot

dark locust May 25, 2022, 9:08 PM

#

It gets stuck on try to create stripe instance

spare maple May 25, 2022, 9:08 PM

#

Yes

#

That's that we are struggling

#

It's still show a loader

dark locust May 25, 2022, 9:09 PM

#

Can you wrap const stripe = await getStripe(); in a try/catch and see if that catches anything?

spare maple May 25, 2022, 9:09 PM

#

#

@dark locust It's already in try catch

dark locust May 25, 2022, 9:10 PM

#

Oh, you've got that whole thing in try/catch, my fault.

#

So what is getStripe? Where is that coming from?

spare maple May 25, 2022, 9:11 PM

#

import { getStripe } from "~/lib/stripe";

dark locust May 25, 2022, 9:11 PM

#

What is ~/lib/stripe?

spare maple May 25, 2022, 9:11 PM

#


let stripePromise: Promise<Stripe | null>;

export const getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK!);
  }
  return stripePromise;
};

#

actually we've trying a few options, and none of them worked out

#

i mean we've trying to import and initialise stripe in the same file and also using React.useEffect and React.useState

#

Now it's more like singletone

#

Also, it's never work on localhost, so we need to deploy it so debug that makes it's even more complicated

dark locust May 25, 2022, 9:16 PM

#

Why do you have getStripe instead of using loadStripe directly?

#

Also why are you returning the promise like that? Wouldn't the promise already be resolved by then?

spare maple May 25, 2022, 9:19 PM

#

@dark locust it doesn’t really matter, then you return a promise from function, it’s works the same way

#

I can rebuild it with a direct import

dark locust May 25, 2022, 9:22 PM

#

Yeah, instead of await getStripe(); try await loadStripe(...); and let me know if that changes anything.

spare maple May 25, 2022, 9:28 PM

#

@dark locust same thing

#

https://web-q1jxvcn6l-by-rotation.vercel.app/events/summer-party

Rent Designer Dresses and Bags UK | By Rotation

The UK's leading peer-to-peer fashion rental app. Hire luxury designer clothes and accessories from top brands in London and the UK. No waiting list. No subscription fees.

#

now the code are looks like this:


import { loadStripe, Stripe } from "@stripe/stripe-js";

...

onSubmit: async (values) => {
      setLoading(true);
      try {
        const { data } = await createEventTicketPaymentSession({
          buyerName: values.buyerName,
          buyerEmail: values.buyerEmail,
          ticketVariantId: values?.ticketVariant?.id,
          amount: values?.ticketVariant?.amount,
          eventId: event?.id,
        });

        const sessionId = data?.createEventTicketPaymentSession;

        console.log(
          "sessionId has been initialized from the console: ",
          sessionId
        );

        console.log("try to create stripe instance");

        const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK!);

        console.log("stripe instance has been created", stripe);

        console.log("try to redirect to stripe checkout link");

        const result = await stripe?.redirectToCheckout({
          sessionId,
        });
      } catch (error) {
        console.log(error);
      } finally {
        setLoading(false);
      }
    },
  });

dark locust May 25, 2022, 9:36 PM

#

It's getting suck here:

        start() {
            void 0 === this.evalLoop && (Zi("Starting evaluation loop"),
            this.evalLoop = setInterval((()=>this.performClientMatching()), 500))
        }

#

That evalLoop keeps looping over and over.

#

It goes through a lot of minified code to get there though, so I can't really tell what's happening. A minimal test case should help a lot.

spare maple May 25, 2022, 9:53 PM

#

Okey, I will provide tomorrow

#

@dark locust one question. Should it work on local host?

dark locust May 25, 2022, 10:09 PM

#

What is "it"?

#vnadygin - stripe.js