dmitrii_to | Stripe Developers | Page 1

gentle stumpBOT Oct 26, 2023, 10:25 PM

#

severe saddle Oct 26, 2023, 10:29 PM

#

Hi 👋

Looking at your code using elements, you would need to log the error inside the try..catch block. Can you add some logging there and let me know what you see?

#

Also you should see some failed API requests in your Developer logs

#

Can you look for those?

ionic scroll Oct 26, 2023, 10:29 PM

#

I attached the screenshots of an error log from teh catch block. It's just an empty object

gentle stumpBOT Oct 26, 2023, 10:30 PM

#

quick kiln Oct 26, 2023, 10:32 PM

#

Hello! I'm taking over and catching up...

ionic scroll Oct 26, 2023, 10:32 PM

#

Also you should see some failed API requests in your Developer logs

There're no failed requests to Stripe under Network tab

quick kiln Oct 26, 2023, 10:32 PM

#

Do you see Payment Method creation requests there that correspond to this code running?

ionic scroll Oct 26, 2023, 10:33 PM

#

Yes, 4 requests with a status code 200

#

#

#

And that's what I get inside the catch block

quick kiln Oct 26, 2023, 10:35 PM

#

Can you try this approach instead of using try and catch?

const { error, paymentMethod } = await stripe.createPaymentMethod({
  elements: elements,
  params: {
    billing_details: {
      email,
      name,
    },
  },
});
console.log(error);
console.log(paymentMethod);

ionic scroll Oct 26, 2023, 10:35 PM

#

Sure, 1 sec. thanks for helping me out

quick kiln Oct 26, 2023, 10:35 PM

#

stripe.createPaymentMethod doesn't (or, at least, shouldn't) throw an error that can be caught, it returns an error object if something goes wrong, which your code is currently ignoring.

ionic scroll Oct 26, 2023, 10:36 PM

#

The code execution doesn't reach the lines where we added console logs

#

It falls into catch block before it gets to console logs

quick kiln Oct 26, 2023, 10:38 PM

#

Can you remove the try catch and see what exception is being thrown in the console?

ionic scroll Oct 26, 2023, 10:39 PM

#

quick kiln Oct 26, 2023, 10:40 PM

#

If you expand that does it show you a stack trace?

#

Also wondering what line 158 is of StepThree.tsx?

ionic scroll Oct 26, 2023, 10:41 PM

#

quick kiln Oct 26, 2023, 10:41 PM

#

What's at the other end of that closing curly brace?

ionic scroll Oct 26, 2023, 10:42 PM

#

submit form function

#

I can even reproduce the same issue like that:

  async function testHandler() {
    if (!stripe || !elements) {
      return;
    }
    try {
      const { error, paymentMethod } = await stripe.createPaymentMethod({
        elements: elements,
      });
      console.log(paymentMethod);
      console.log(error);
    } catch (err) {
      console.log(err);
    }
  }

quick kiln Oct 26, 2023, 10:43 PM

#

Are you calling preventDefault() on the form submission event?

ionic scroll Oct 26, 2023, 10:44 PM

#

yes

quick kiln Oct 26, 2023, 10:44 PM

#

Is the function declared as an async function?

#

Like the other one?

#

Not the one shared above.

ionic scroll Oct 26, 2023, 10:45 PM

#

#

Note: this approach does work:

  async function testHandler() {
    if (!stripe || !elements) {
      return;
    }
    const cardElement = elements.getElement(CardElement);
    if (!cardElement) {
      return;
    }
    try {
      const { error, paymentMethod } = await stripe.createPaymentMethod({
        type: 'card',
        card: cardElement,
      });
      console.log(paymentMethod);
      console.log(error);
    } catch (err) {
      console.log(err);
    }
  }

However, I don't understand why it stopped working when I create a PM with elements

#

The code that uses elements for creating payment methods was shipped a week ago and passed all test cases with all types of cards but it doesn't work anymore today

quick kiln Oct 26, 2023, 10:48 PM

#

Yeah, I'm not sure. Trying to figure out what it might be...

ionic scroll Oct 26, 2023, 10:51 PM

#

I made another function without wrapping it in try/catch:

  async function testHandler() {
    if (!stripe || !elements) {
      return;
    }
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      elements: elements,
    });
    console.log(paymentMethod);
    console.log(error);
  }

That's what it returns:

quick kiln Oct 26, 2023, 10:52 PM

#

Can you show me that with the files shown on the right?

ionic scroll Oct 26, 2023, 10:53 PM

#

#

quick kiln Oct 26, 2023, 10:54 PM

#

You said this was working before. What changed since then? Did you upgrade any packages? Add other code? Wondeirng if some polyfill or something is causing this?

ionic scroll Oct 26, 2023, 10:56 PM

#

The most bizarre thing is that nothing has changed since then. We deployed a website a week ago and then it was tested and everything worked. We didn't make a single commit since then. Today, during the showcase all of a sudden it stopped working

quick kiln Oct 26, 2023, 10:57 PM

#

Are you loading anything from an external source, like a CDN, that could have changed?

ionic scroll Oct 26, 2023, 10:57 PM

#

  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "prettier": "^3.0.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }

quick kiln Oct 26, 2023, 10:58 PM

#

Wait, why is there nothing for Stripe in that list?

#

How are you loading Stripe.js?

ionic scroll Oct 26, 2023, 10:59 PM

#

We don't use CDN o any external links. Stripe is in regular dependencies

#

    "@stripe/react-stripe-js": "^2.3.1",
    "@stripe/stripe-js": "^2.1.9",

#

At the top level:

const stripePromise = loadStripe(import.meta.env.VITE_REACT_APP_STRIPE_API_KEY);


//LayoutElement
...
    <Elements stripe={stripePromise}>
      ....rest of the code

quick kiln Oct 26, 2023, 11:02 PM

#

🤔

ionic scroll Oct 26, 2023, 11:02 PM

#

I tried to mess around with api key and it failed way before I reached a point for submitting a form.

quick kiln Oct 26, 2023, 11:04 PM

#

If you log elements immediately before calling stripe.createPaymentMethod what do you get?

ionic scroll Oct 26, 2023, 11:05 PM

#

#

^ a proof that it works when I create a payment method with card element instead

#

Logging elements:

quick kiln Oct 26, 2023, 11:10 PM

#

Hm. Can you put a minimal test case somewhere and link it so I can try to debug on my end?

ionic scroll Oct 26, 2023, 11:11 PM

#

Sure, I'll create a sandbox

#

Or probably a github repo would be even better

quick kiln Oct 26, 2023, 11:14 PM

#

Ideally it would be something hosted somewhere so I can visit a link and see the issue live.

ionic scroll Oct 26, 2023, 11:27 PM

#

I'm almost done. Is it better not to wrap the function with try/catch block?

quick kiln Oct 26, 2023, 11:28 PM

#

Yeah, if you could leave that off it would be helpful.

ionic scroll Oct 26, 2023, 11:35 PM

#

https://elaborate-macaron-a0b810.netlify.app/

thank you for your help @quick kiln !

quick kiln Oct 26, 2023, 11:35 PM

#

Looking...

#

Okay, so the underling error is Error: Unable to select session. Make sure Elements is initialized with clientSecret or use the nullableSessionSelector() instead. which I've never seen before, but looking at this test case I'm confused about something: you only have the Card Element on this page. I thought you were trying to use the Payment Element, which wasn't working, but the Card Element was working. Is that not the case? Are you always trying to use the Card Element?

ionic scroll Oct 26, 2023, 11:43 PM

#

Yes, I always used CardElement

quick kiln Oct 26, 2023, 11:44 PM

#

Ah, okay, so you have to use type and card. Using elements is only compatible with the Payment Element, as documented here: https://stripe.com/docs/js/payment_methods/create_payment_method_elements#stripe_create_payment_method_elements-options-elements

The Elements instance that was used to create the Payment Element.

#

Now, that said, we should be handling this much better and throwing a useful error. I'll flag that issue internally and see if we can improve this situation.

ionic scroll Oct 26, 2023, 11:45 PM

#

How were you able to get this error?

Error: Unable to select session. Make sure Elements is initialized with clientSecret or use the nullableSessionSelector() instead.

#

Thanks!

Now, that said, we should be handling this much better and throwing a useful error. I'll flag that issue internally and see if we can improve this situation.

#

I'm still confused how it was working before

quick kiln Oct 26, 2023, 11:47 PM

#

I'm guessing we updated Stripe.js in such a way that this worked before but stopped working now.

#

The way I got that error was to turn on the Pause on uncaught exceptions and Pause on caught exceptions options in Chrome's dev tools, which are in the right sidebar under the Sources tab. Then I triggered the error again.

#

Captured_on_2023-10-26_at_16.49.032x.png

ionic scroll Oct 26, 2023, 11:51 PM

#

Thank you so much for your help @quick kiln

quick kiln Oct 26, 2023, 11:52 PM

#

No problem! Thank you for providing that test case, it was exactly what I needed to help you figure this out! 🙂

#dmitrii_to