Akshay-confirmError | Stripe Developers | Page 1

wide loom Oct 29, 2021, 5:21 PM

#

grand mauve Oct 29, 2021, 5:22 PM

#

I can paste my confirmCardPayment code

#

// payment confirmation
paymentRequest.on('paymentmethod', async (ev) => {
  console.log(ev.shippingAddress);
  console.log(ev.paymentMethod.billingDetails);
  // Confirm the PaymentIntent without handling potential next actions (yet).
  const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment(
    clientSecret,
    {payment_method: ev.paymentMethod.id},
    {handleActions: false}
  );

  // send full billing details to StoreService
  console.log(ev.paymentMethod.billingDetails);

  if (confirmError) {
    // Report to the browser that the payment failed, prompting it to
    // re-show the payment interface, or show an error message and close
    // the payment interface.
    ev.complete('fail');
  } else {
    // Report to the browser that the confirmation was successful, prompting
    // it to close the browser payment method collection interface.
    ev.complete('success');
    // Check if the PaymentIntent requires any actions and if so let Stripe.js
    // handle the flow. If using an API version older than "2019-02-11"
    // instead check for: `paymentIntent.status === "requires_source_action"`.
    if (paymentIntent.status === "requires_action") {
      // Let Stripe.js handle the rest of the payment flow.
      const {error} = await stripe.confirmCardPayment(clientSecret);
      if (error) {
        // The payment failed -- ask your customer for a new payment method.
        console.error("PAYMENT FAILURE", error);
      } else {
        // The payment has succeeded.
        console.log("PAYMENT SUCCESS.");
      }
    } else {
      // The payment has succeeded.
      console.log("PAYMENT SUCCESS.");
    }
  }
});

#

is it because I'm using an async function?

wide loom Oct 29, 2021, 5:24 PM

#

Is this an error you get everytime you try out the payment request button, or just sometimes?

grand mauve Oct 29, 2021, 5:25 PM

#

Everytime

#

although sometimes the payment actually does succeed confirmation

#

Other times, I see "There was an error processing your order"

#

it seems like the event is triggered twice simultaneously, as I can see my console log statements being output twice

#

And now I reloaded my page and suddenly it worked... so I'm not sure if it's a one-off thing or if I should be doing the event listening better

harsh skiff Oct 29, 2021, 5:32 PM

#

You seem to have logs to most parts of the code, when it happens read them carefully to see what is called twice

#

like do you get the entire callback called twice? If so, maybe you added the .on twice?

grand mauve Oct 29, 2021, 5:33 PM

#

I have 2 .on methods, but the first one tracks shipping address change and is only called once. the other tracks payment method and is called twice at the same time

harsh skiff Oct 29, 2021, 5:34 PM

#

so if you do paymentRequest.on('paymentmethod', async (ev) => { it will be called twice for every time you go through Apple Pay or Google Pay which is not what you want right?

grand mauve Oct 29, 2021, 5:34 PM

#

yes seems like it's called twice, but not always

harsh skiff Oct 29, 2021, 5:34 PM

#

it's going to be hard to say why without you adding more logs and breakpoints as you debug this

grand mauve Oct 29, 2021, 5:35 PM

#

It seems like reloading the page always fixes it, but afterwards it may or may not occur again

harsh skiff Oct 29, 2021, 5:38 PM

#

My gut tells me you have some code that sets paymentRequest.on('paymentmethod', async (ev) => { and that specific code is called more than once so it sets a duplicate callback sometimes
Add logs before that line of code and see if you see it hit more than once over the duration of your page

grand mauve Oct 29, 2021, 5:46 PM

#

Ok let me try that and see what happens

#

logs right before the event trigger only show up once

harsh skiff Oct 29, 2021, 5:51 PM

#

despite the .on being called twice? Because that seems ~impossible

grand mauve Oct 29, 2021, 5:52 PM

#

I put the console.log above/outside the paymentRequest.on

harsh skiff Oct 29, 2021, 5:53 PM

#

I'm sorry, I have never seen this, and there are thousands of devs using this all the time. It has to be bug in the code. It's going to be really hard to debug without seeing it live

grand mauve Oct 29, 2021, 5:54 PM

#

console.log("before paymentmethod event trigger");
// payment confirmation
paymentRequest.on('paymentmethod', async (ev) => {

#

"before paymentmethod event trigger" only happened once afaik

#

but let me send a link here with just the payment request button

#

https://e5a8-2601-640-8981-6b90-45e7-fda2-7f8f-2721.ngrok.io/checkout/b/kitava/acne-skincare-kit/KzTeM2

harsh skiff Oct 29, 2021, 5:59 PM

#

where is your code?

#

oh wow okay, are you using a lot of complex stuff? It's all minified and hard to read

grand mauve Oct 29, 2021, 6:00 PM

#

Oh sorry I thought you wanted to inspect the website and see console logs

harsh skiff Oct 29, 2021, 6:00 PM

#

yes but I also want to step through the code and understand it, or try to

grand mauve Oct 29, 2021, 6:01 PM

#

https://paste.ofcode.org/CpLyqGYxaermP7EW5DSWAd

#

and the StripeBuy class is initialized like:

<Elements stripe={stripePromise}>
  <StripeBuy
    clientSecret={clientSecret}
  />
</Elements>

harsh skiff Oct 29, 2021, 6:06 PM

#

Ah damn you use React on top of it 😦

#

(not your fault, I just really struggle with this myself)

grand mauve Oct 29, 2021, 6:07 PM

#

hahaha it was not my choice, I'm just working with what we've got

#

this is also my first ever frontend experience sooooo

harsh skiff Oct 29, 2021, 6:07 PM

#

Okay so walk me through this like I'm 3 years old. Because I load your page and see

Screen_Shot_2021-10-29_at_11.07.47_AM.png

#

what do you need me to do? Is this only Google Pay bug or only Apple Pay or both?

grand mauve Oct 29, 2021, 6:08 PM

#

does your browser have a saved card?

#

If you're on a windows computer, you can use chrome and if you have a saved card the GooglePay button will show up automatically

harsh skiff Oct 29, 2021, 6:08 PM

#

okay so it is google pay that you want me to test

grand mauve Oct 29, 2021, 6:08 PM

#

yeah that's what I'm using rn

#

Apple Pay requires using a live stripe account so it's harder to test, but the code should all be the same which is why i'm sticking with GPay atm

harsh skiff Oct 29, 2021, 6:09 PM

#

Screen_Shot_2021-10-29_at_11.09.16_AM.png

#

does the bug happen with ^

#

or only Google Pay specifically

grand mauve Oct 29, 2021, 6:09 PM

#

I've never seen the purple option, i only see GPay

#

are you on chrome?

harsh skiff Oct 29, 2021, 6:10 PM

#

I am but I don't want you to know my real identity if possible so I can't use Google Pay 😦

#

I'll try this and see what happens I guess

grand mauve Oct 29, 2021, 6:10 PM

#

can you add a fake card? is that even possible

harsh skiff Oct 29, 2021, 6:10 PM

#

no Google Pay the real one wants a real card with real address

grand mauve Oct 29, 2021, 6:11 PM

#

darn, well hopefully the issue will appear with that button too

harsh skiff Oct 29, 2021, 6:12 PM

#

it's okay I'll figure it out

#

sorry it will be really slow, the channel is extremely busy

grand mauve Oct 29, 2021, 6:12 PM

#

no worries

#

I see you were able to complete the payment, did you see the in-flight error?

harsh skiff Oct 29, 2021, 6:33 PM

#

nope, I need to try a few times but I keep switching threads sorry 😦

grand mauve Oct 29, 2021, 6:35 PM

#

all good, if you end up seeing let me know

harsh skiff Oct 29, 2021, 6:39 PM

#

hum when I reload the page I get an already confirmed PI so it fails every time, is this expected? did you hardcode the client secret maybe?

grand mauve Oct 29, 2021, 6:39 PM

#

yeah the client secret is hardcoded rn

harsh skiff Oct 29, 2021, 6:39 PM

#

ah damn

#

can you get me a new one to try again?

grand mauve Oct 29, 2021, 6:39 PM

#

Let me put a fresh one

#

yeah

#

ok try now

#

I can see the duplicate console logs again, this time even for the shipping address change event

harsh skiff Oct 29, 2021, 6:55 PM

#

Screen_Shot_2021-10-29_at_11.55.50_AM.png

#

here's what I see, what's a duplicate here?

shrewd nexus Oct 29, 2021, 7:11 PM

#

Hello! I'm taking over for @harsh skiff and getting caught up now...

#

Is the core problem still this error?

Uncaught (in promise) IntegrationError: You have an in-flight confirmCardPayment! Please be sure to disable your form submit button when confirmCardPayment is called

harsh skiff Oct 29, 2021, 7:39 PM

#

yes that's the issue they had and it was due to the .on being called twice for shipping change and payment_method event

grand mauve Oct 29, 2021, 7:46 PM

#

#

you can see the console log at lines 39 & 70 is called twice

shrewd nexus Oct 29, 2021, 7:51 PM

#

Looking, hang on...

#

You said Apple Pay isn't working, right? Only Google Pay?

grand mauve Oct 29, 2021, 7:54 PM

#

Apple Pay works if I use a live stripe account like we talked about yesterday

#

I'm not testing it right now though bc I know the only difference is the stripe account

shrewd nexus Oct 29, 2021, 7:54 PM

#

Can you give me a link to the page so I can test?

grand mauve Oct 29, 2021, 7:54 PM

#

https://e5a8-2601-640-8981-6b90-45e7-fda2-7f8f-2721.ngrok.io/checkout/b/kitava/acne-skincare-kit/KzTeM2

shrewd nexus Oct 29, 2021, 7:55 PM

#

Looking, hang on...

#

So the "duplicate" console logs are from your code that listens for shippingaddresschange and shippingoptionchange events. Those will often get called multiple times. Can you add this under line 86 and then try again?

console.log('paymentmethod event:', ev);

grand mauve Oct 29, 2021, 8:10 PM

#

I'm not even able to reproduce it on my end 💀

#

I feel like it's a browser issue or something rather than a code issue

#

When I reload the page the issue is fixed, and only after repeated button presses does the error come back

shrewd nexus Oct 29, 2021, 8:12 PM

#

Repeated button presses? As in you're rapidly clicking the button over and over?

grand mauve Oct 29, 2021, 8:15 PM

#

not exactly rapidly, but after multiple attempts it has the error

shrewd nexus Oct 29, 2021, 8:15 PM

#

🤔

grand mauve Oct 29, 2021, 8:15 PM

#

but i'm still not able to reproduce the error sigh

shrewd nexus Oct 29, 2021, 8:15 PM

#

Hang on, I think I'm missing something. If you're not able to reproduce the error where did the screenshot above come from?

grand mauve Oct 29, 2021, 8:16 PM

#

It's a flaky error lol, sometimes I can reproduce it sometimes I can't

#

Ok I think when i change some data in my code and then save the reactapp, it soft-reloads the page or something

#

Which causes two threads to be open (or something similar, idrk how frontend works)

#

and then it tries to call confirmCardPayment twice

#

If I reload the page manually this error doesn't occur

shrewd nexus Oct 29, 2021, 8:18 PM

#

Ah, so it's an artifact of the React development process?

grand mauve Oct 29, 2021, 8:18 PM

#

could be

shrewd nexus Oct 29, 2021, 8:19 PM

#

Can you do more testing to confirm that's the issue?

grand mauve Oct 29, 2021, 8:20 PM

#

Here are the steps I did to reproduce it:

run the code I sent you
without reloading the page, change the client_secret to a different one
try clicking Pay Now
error occurs
manually reload page and error should go away

#

If you try the link right now, you should see an error

#

as long as you had the page open without reloading the whole time

shrewd nexus Oct 29, 2021, 8:22 PM

#

I can't go through the actual payment flow, but I think what you're saying makes sense. If the code is injecting a new value live it's probably creating a second instance of the underlying Payment Request object that's also bound to the one Payment Request Button, so when you click on the button and go through the process both underlying Payment Request objects run the code. Maybe.

grand mauve Oct 29, 2021, 8:23 PM

#

Yeah exactly, that makes sense to me

#

And while we're speaking of the paymentRequest button, I have been seeing this warning frequently:

react-stripe.umd.js:281 Unsupported prop change: options.paymentRequest is not a mutable property.

do you know what causes this?

#

I wonder if it's related to this issue where PaymentRequest should be a singleton

shrewd nexus Oct 29, 2021, 8:26 PM

#

Does that only happen with the React change workflow or all the time?

grand mauve Oct 29, 2021, 8:26 PM

#

always

#

It's probably unrelated then, huh

shrewd nexus Oct 29, 2021, 8:28 PM

#

I think it's this: setPaymentRequest(pr);

grand mauve Oct 29, 2021, 8:29 PM

#

that is what the documentation suggest using though:

pr.canMakePayment().then(result => {
        if (result) {
          setPaymentRequest(pr);
        }
      });

#

https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=react#react-mount-element

shrewd nexus Oct 29, 2021, 8:35 PM

#

I'm not very familiar with React, but I think the key difference is that the code in the docs is intended to attempt creations of a Payment Request object once and then only show the button if that object exists, and then the whole form/component should not be changed after that. Is your code doing things differently?

grand mauve Oct 29, 2021, 8:42 PM

#

I don't think so, I'm pretty sure the component is not changing, only the paymentRequest object values might change

#

But since this doesn't actually block my integration, you can close this thread and if it ends up being an issue later I'll ask in the main channel again

#

thanks for your time and help!

#Akshay-confirmError