WendyLin-React

[leaden rain]

how are you initializing the page?

[olive notch]

import React, { useImperativeHandle} from 'react';
import { Elements, CardCvcElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';

const Promise = loadStripe(STRIPE_KEY)
.then(stripe => {
return stripe;
})
.catch(err => {
throw err;
});

const StripeCVV = (props, ref) => {
const stripe = useStripe();
const elements = useElements();
useImperativeHandle(ref, () => ({
getCvcToken: async () => {
try {
const cardCvc = elements.getElement(CardCvcElement);
const result = await stripe.createToken('cvc_update', cardCvc);
return result;
} catch (error) {
console.error(error);
}
},
}));

return (
<Elements stripe={Promise}>
<div>
<CardCvcElement />
<div className="stripe-cvc-card-image">
<img alt="CVC" src={CVCCardImage} />
</div>
</div>
</Elements>
);
};

[leaden rain]

hmm that looks nomal

Not sure about the StripeCVV block

But I think the error is completely unrelated

a quick google suggest navigator.online? i.e. https://www.codementor.io/@nedson/a-guide-to-handling-internet-disconnection-in-react-applications-rs7u9zpwn

[olive notch]

This error is actually an expected error. If the chunk files of react-stripe-js are loaded, the network is suddenly interrupted, but the files are not completely downloaded.

If we encounter a similar situation, we hope to be able to display an alert to prompt the user, can we get this error return from react-stripe-js? and how to get it?

[leaden rain]

it should be very rare, correct?

I still researching how to catch it, but for us to align

[olive notch]

It should be rare, but if it is true in some catering shops and other places, the probability of this situation will increase, because many shops do have weak network signals.

[olive notch]

thanks

[leaden rain]

Um i see the issue. If it failed on load did you catch it via the loadStripe promise? This part

const Promise = loadStripe(STRIPE_KEY)
  .then(stripe => {
    return stripe;
  })
  .catch(err => {
    throw err;
  });

How about forcing a refresh?

[olive notch]

yeah, this part can catch. If mainly stripe-js loaded failure and will throw an error and refresh the page. But if react-stripe-js can not be catched

[leaden rain]

Um I see what you mean

In that case can you catch it by checking if this object be null? const stripe = useStripe();

[olive notch]

can not. I tried this way. But seem useStripe still can be initial.

[leaden rain]

useStripe still be initialized, but then you got network connection error for loading react-stripe-js?

[olive notch]

yeah

[leaden rain]

that sounds weird. useStripe is from '@stripe/react-stripe-js' You sure react-stripe-js is the culprit?

[olive notch]

In fact, it should be said that the content of the iframe except for the input of CVV is basically loaded.

[leaden rain]

Is this a intermittent or permanent connection issue?

[olive notch]

intermittent

At present, if stripe encounters this situation, can it only alert network error and refresh the page?

[leaden rain]

Yeah only that I can think of

[olive notch]

Is it possible to consider giving some special-case error prompts for rendering in the future? After all, payment is more sensitive to network broken

[leaden rain]

Sorry I don't follow the last question. Do you mean something automatically displayed from stripe.js?

When it's not loaded it has no power to trigger anything, no?

I would need to step down for the day. If you have further concern or other questions, feel free to open another question in the channel!

[olive notch]

yeah, can get some error prompt from UI DOM.

[olive notch]

okie, thank you so much