The form squarePayment does not work from phone

Hi, let me tell you about the problem I have.
I am developing a web page in react.js and node.js and I am using square to accept payments.
My page is completely responsive, that is, from any IOS or Android phone it works well.
Now the problem this is when the squarePayment form is going to be loaded on the phone, which is the card number, card expiration date, security code and zip code, it gives me an error and does not load anything.
If I do everything from a computer, everything works fine, but from the phone I get that error that I tell you.
My question is for you to function my website from the phone, I must do something else. Here I leave the code where it gives me the error on the phone.

useEffect(() => {

if(auth.token !== '') {
    let sqPaymentScript = document.createElement("script");
    // sandbox:
    // production:
    sqPaymentScript.src = "";
    sqPaymentScript.type = "text/javascript";
    sqPaymentScript.async = false;
    sqPaymentScript.onload = () => {
} else {

  console.log('token false')


this is exactly where I get the error

    sqPaymentScript.onload = () => {

I hope you can help me
thank you very much

What is the error you’re seeing? This looks like it’s just the source of the payment form, but not the actual code to the payment form (where you put the application id etc), so you’re saying the source is failing to load before it even gets to your custom payment form?

but because if it works well for me when I do it from a computer and when I browse from the phone it doesn’t work and it gives me this error

Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See for more information

12 stack frames were collapsed

(anonymous function)