[BUG]: Please check your internet connection

[renanstuchi]

What happened?

Hey everybody,

We have some integrations with Stripe for a very long time (old Checkout, old Card Elements) and we introduced "Payment Elements" recently into our platform. During the past 6 months we've been receiving complaints from our customers saying "they can't pay". After months of investigation and adding logs to most variety of places we finally found stripe sdk is returning error below: {"message":"We are experiencing issues connecting to our payments provider. Please check your internet connection."}

I've been tracking this during past months and i can't find a single evidence that our customers were having internet issues...

• we can see they going back and forward, trying to load the payment form multiple times.
• all requests are fine, not a single one failing
• all react components being loaded fine, no delays
• customer interactions with buttons / sections / etc ... all fine, no delays.
• some customers were able to try many times and it suddenly loads and he is able to pay.
• we have print-screens from customers using wifi, mobile 4G, mobile 5G... basically every kind of network

Tracking the issue, seems the most users have issues during the Payment Elements load. See our code below. BUT i need to mention that i've found customers having the same issue during the payment form submit.

Payment Elements Form load.

this._elems.link = StripeElements.create('linkAuthentication', { defaultValues: { email: email, phone: phone } });
    this._elems.payment = StripeElements.create('payment', {
      layout: {
        type: 'accordion',
        defaultCollapsed: false,
        radios: true,
        spacedAccordionItems: false
      },
      fields: {
        billingDetails: {
          address: {
            line1: addressFieldsConfig,
            line2: addressFieldsConfig,
            city: addressFieldsConfig,
            country: addressFieldsConfig,
            postalCode: addressFieldsConfig,
          },
        },
      },
      defaultValues: {
        billingDetails: {
          phone: phone,
          email: email,
          address: {
            country: this.options.country,
          },
        },
      },
      wallets: {
        applePay: 'never',
        googlePay: 'never',
      },
    });

    // callbacks
    this._elems.link.on('change', this.handleLinkElementChange.bind(this));
    this._elems.payment.on('change', this.handlePaymentElementChange.bind(this));
    this._elems.payment.on('loaderror', this.onErrorLoadingElements.bind(this));
    this._elems.link.on('loaderror', this.onErrorLoadingElements.bind(this));
    this._elems.payment.on('ready', this.onFormLoaded.bind(this));
    this._elems.link.on('ready', this.onFormLoaded.bind(this));

    // render
    this._elems.payment.mount(`#${this.$element.id}`);
    this._elems.link.mount(`#${this.$linkElement.id}`); 

Note1: loaderror listener is not catching this error. The error is being throw globally.

Note2: worth to mention that we have Card Elements and Checkout from Stripe running in the same platform, same code... and we can't see the same errors being throw there in the past 1 year. So seems restricted to Payment Elements only ?

Note3: it doesnt affect a large number of customers, so for the past 3 days we have 8 errors (thousand of payments).

Note4: unfortunately i was only able to see the right error recently thats why i only have occurrences from Windows 10+ and iOS. But i m pretty sure the error was hidden in an unparseable error message before... so i wouldn't say it only occurs in those devices.

Dev Stacks: "react": "18.2.0"

We are injecting https://js.stripe.com/v3/ inline during platform load.

We were never able to reproduce this using any of our devices. Also, reaching out for "Stripe support" didnt help much... they said we were unable to detect any ongoing issues on our site ... thats not clear enough. Would really appreciate a deep looking into this issue, please.

Regards.

Environment

Chrome on WIndows 10+, Safari on iOS 17, 18

Reproduction

No response

[renanstuchi]

Again, just to be clear enough... issue is there for a long time, probably since we introduced "Payment Elements" into the platform. But the error was hidden in the logs. So i can't see old occurrences.

[brendanm-stripe]

How does this manifest for customers? At what point in your integration does this happen (initialization, payment confirmation, etc)? Have you noticed any patterns about affected customers?

Broadly speaking, transient network connection issues can block Stripe.js (or pieces of it) from loading, and this is expected to happen a low frequency. When happening reliably, this is usually due to either network blocking/filtering or connection reliability.

[renanstuchi]

@brendanm-stripe

1. When it occurs during form initialization: Customers can't see the payment form. Does not load.
2. When it occurs during form submit: Customers click "pay" but see an error (our generic error message for non human readable messages for the customers).
3. i couldn't find any patterns. During a long time i thought it was related to iOS but i have Windows occurrences now too.

So, i absolutely understand the fact that "network issues" can happen but i can't see any indicative this is happening to the majority of these customers. The fact that customers are using fine our platform during the entire flow and suddenly gets stuck in the payment form its a bit weird... We have so many examples of customers that tried to re-create their entire basket 4, 5 times before they gave up (this means a lot of requests to our server, including validations, connections with third party libs in the frontend and in the backend, connections with at least 3 APIs)

Also, how come i can't see same errors for old Stripe forms ? We have years of usage of those components... we supposed to have a small number of issues, right ? But not a single one ?

If we at least could listen events or callbacks that could potentially prove the "network issue" thing...i would be fine. But seems there is nothing ? How can we dive deep to debug this ?