jasontheadams - Elements | Stripe Developers | Page 1

worldly tusk Dec 30, 2021, 12:22 AM

#

Hello! You still around?

#

Can you share the code you're using that leads to the empty object issue?

glass needle Dec 30, 2021, 12:34 AM

#

Hi! Here you go!

#

        try {
            const {error} = await stripeElement.confirmPayment({
                elements: this.elements,
                confirmParams: {
                    return_url: 'http://givewp.local',
                },
            });

            console.log({error});
        } catch (error) {
            console.log({error});
        }

#

                const elementWrap = document.querySelector(element[1]);
                const options = {
                    clientSecret: elementWrap.dataset.stripeClientSecret,
                };
                this.elements = stripe.elements(options);
                paymentElement.push(this.elements.create('payment'));

worldly tusk Dec 30, 2021, 12:37 AM

#

Ah, was just about to ask for that code as well. 🙂

glass needle Dec 30, 2021, 12:38 AM

#

The fields are showing up just fine. This happens after filling them out and attempting to run stripe.confirmPayment()

worldly tusk Dec 30, 2021, 12:39 AM

#

If you change this line:

const {error} = await stripeElement.confirmPayment({

To this:

const result = await stripeElement.confirmPayment({

And then log the result does that provide more information?

glass needle Dec 30, 2021, 12:40 AM

#

I'm afraid not. Stripe.js is doing throw Error somewhere internally, so if I don't wrap it in a try...catch it just fails.

#

Hmm... what version of @stripe/stripe-js is required for this to work?

worldly tusk Dec 30, 2021, 12:42 AM

#

The version of that package shouldn't matter as the latest version of Stripe.js is always loaded regardless.

glass needle Dec 30, 2021, 12:42 AM

#

Ah, ok.

worldly tusk Dec 30, 2021, 12:42 AM

#

Are you sure the publishable key you're using matches the account of the Payment Intent and context?

#

Do you mind sharing the publishable key?

#

Also, just to confirm, the redirect doesn't happen, right?

glass needle Dec 30, 2021, 12:44 AM

#

Correct, no redirect. Just a console error. Let me track down the publishable key..

#

I believe this is being used:
pk_test_51HAi7MIqONfMPfffm7aqctG4tU9dumWShQ5GzniuKDO749fITyyPCWOiilgaGSCpj80VeGoPyU5AMrkY4LFYVL1500wEdXqr0J

worldly tusk Dec 30, 2021, 12:47 AM

#

That looks like the correct one.

#

Does the error in the console provide a stack trace or any additional details?

glass needle Dec 30, 2021, 12:49 AM

#

Nope, it's quite empty.

worldly tusk Dec 30, 2021, 12:49 AM

#

Cool cool cool. Any activity in the network tab of the dev tools when this happens?

glass needle Dec 30, 2021, 12:50 AM

#

Ohhhh good question

#

Negative.

worldly tusk Dec 30, 2021, 12:51 AM

#

Okay, so it's not even getting that far... 🤔

#

Let me see if I can reproduce on my end if it's okay with you? I might end up confirming that Payment Intent, is that okay?

glass needle Dec 30, 2021, 12:53 AM

#

No problem! I'm going to try removing the try...catch and look at where the Error is being thrown in the stripe code to see if that gives any clues.

#

Nope, I'm not getting any further information. It only tells me that the error occurred in an unresolved promise.

worldly tusk Dec 30, 2021, 1:08 AM

#

Okay, well, I can't reproduce and successfully confirmed on my first try. Let me share the code that worked...

#

      const stripe = Stripe('pk_test_51HAi7MIqONfMPfffm7aqctG4tU9dumWShQ5GzniuKDO749fITyyPCWOiilgaGSCpj80VeGoPyU5AMrkY4LFYVL1500wEdXqr0J');
      
      const elements = stripe.elements({
        clientSecret: 'pi_3KCBmlIqONfMPfff29EXLJfl_secret_<REDACTED>',
      });
      
      const paymentElement = elements.create('payment');
      
      paymentElement.mount("#payment-element");
      
      // Pay Button
      const payButton = document.querySelector('#payButton');
      
      payButton.addEventListener('click', async (event) => {
        outputElement.innerHTML = 'Processing...';
        
        const {error} = await stripe.confirmPayment({
          elements: elements,
          confirmParams: {
            return_url: "https://<REDACTED>/payment-element/discord-test.php?showPaymentResult",
          }
        });

#

I used the 4242 test card and it confirmed no problem.

#

What method of payment have you been using? Maybe spin up another Payment Element and see if the 4242 test card works if you haven't tried that one already?

#

Someone else on my team noticed this thread and mentioned they ran into the same situation with someone who was initializing multiple instances of Stripe.js and using different instances to mount the Payment Element and call stripe.confirmPayment. Could that be happening?

glass needle Dec 30, 2021, 1:13 AM

#

That is entirely possible. I mean this in the best possible way, but our old Stripe code is a mess. 😬

#

I'll try just bypassing much of our code and doing it manually.

#

(And I'm using 4242 as well. Classic.)

worldly tusk Dec 30, 2021, 1:14 AM

#

4242

glass needle Dec 30, 2021, 1:32 AM

#

Oh snap! Tell your buddy thanks! That was it. Apparently our code is spinning up multiple instances of Stripe.js. When I forcefully limited to one it worked. 🎉

worldly tusk Dec 30, 2021, 1:33 AM

#

Nice!

glass needle Dec 30, 2021, 1:34 AM

#

Thanks for your help! I'm not sure how long it would've take me to figure that out.

worldly tusk Dec 30, 2021, 1:34 AM

#

Same, honestly! That's a tricky one!

#

I let them know and told them thank you. 🙂

glass needle Dec 30, 2021, 1:35 AM

#

Seems like we're doing something seriously un-kosher as stripe.js doesn't even throw a meaningful error. Not sure if that should be passed along to the stripe.js team?

Anyway, you all are great. Hope you have a wonderful rest of your holiday season!

#jasontheadams - Elements