Connection Failure text in CardNumberElement

[serkolch]

Hey there,

We've got an issue where sometimes users are unable to interact with our checkout page's CardNumberElement, CardExpiryElement, and CardCVCElement. The only time someone on our team was able to reproduce the issue, they saw Connection Failure inside the CardNumberElement.

Trying to upgrade and migrate has its own issues for our codebase (we're having trouble bc we use Material UI and use those elements as input props into TextField)

What I'm hoping for is any of 3 things:

1. a way to more consistently reproduce this issue (I've tried every combination of browser and adblocker)
2. a way to better diagnose this issue (add more logging)
3. just resolve the issue

---

1. a way to more consistently reproduce this issue (I've tried every combination of browser and adblocker)

Has anyone actually run into something similar? We had a user today unable to interact with the checkout form, but switching to an incognito browser immediately resolved the issue for them.

---

2. a way to better diagnose this issue (add more logging)

I'd love to be able to use onReady for the elements, but without being able to reproduce, I'm not sure what onReady would return for an errored state versus a successful state.

---

3. just resolve the issue

I have the least hope for this one. I'll share below how we load and use Stripe to render the fields

load stripe async, pass that value into redux

  if (window.Stripe) {
    dispatch(setStripeConfig(window.Stripe(key)));
  } else {
    document.querySelector('#stripe-js').addEventListener(
      'load',
      // Create Stripe instance once Stripe.js loads
      () => dispatch(setStripeConfig(window.Stripe(key))),
      {
        once: true,
      }
    );
  }

pass that redux stored value into StripeProvider at our App level

<StripeProvider stripe={stripe}>
  <Elements>
      <Routing />
  </Elements>
</StripeProvider>

render fields with Material UI

function onChange(){ ... }

return (
<MUI_FormControl {props}>
  <MUI_InputLabel {props}>{lorem ipsum}</MUI_InputLabel>
  <MUI_Input
    {props}
    inputComponent={CardNumberElement}
    inputProps={{
      onChange={onChange}
    }}
  </MUI_Input>
</MUI_FormControl>
);

[twdrake-ap]

Looking for a solution to this same issue.

[sashko-stripe]

Closing this as this project has migrated to React Stripe.js as of early 2020, which also has a somewhat different API. If you believe this is still important, please re-open it there.

[sashko-stripe]

Oh whoops, I saw the wrong year in the issue, sorry for the canned response. More detailed answer:

I don't think we'll be able to address this without a more consistent reproduction. I wonder if it's something related to storing the Stripe instance in Redux, and either a timing issue or something related to storing non-JSON data in Redux.

If you are able to put together a reproduction, can you please open it on the new repository here: React Stripe.js