External js is loading in react component only after refresh

Question

My Component.

import useScript from "./useScript";
function MyComponent(): JSX.Element {
useScript("https://dev-kpaymentgateway.kasikornbank.com/ui/v2/kinlinepayment.min.js", "pkey_test_20184OBD88Yvl6uplpR0kY0ZTpVz46h1Tdqyj");
return (
    <div className={greyContainer}>
        <div className={gridContainer}>

            <p id="error-summary">
                Oops something went wrong, please try again.
            </p>

            <div className="flied">
                <label className="label"> name</label>

                <div id="name"></div>
                <label> Name is invalid.</label>
            </div>

            <div className="flied">
                <label className=" label">Number</label>

                <div id="number"></div>
                <label>Number is invalid.</label>
            </div>

        </div>
        <div style={{textAlign: "right", marginBottom: 10, marginTop: 30}}>
            <form method="POST" action="https://httpbin.org/post">
                <button type="submit" className="pay-button">Pay now</button>
            </form>
        </div>

    </div>
);
}

I load script using react hook. This script is supposed to add some field in component above.

import { useEffect } from "react";

const useScript = (url, dataKey) => {
useEffect(() => {
    const script = document.createElement("script");

    script.src = url;
    script["data-key"] = dataKey;
    script["data-lang"] = "en";
    script["data-write-log"] = true;
    script.async = true;

    document.body.appendChild(script);

    return () => { document.body.removeChild(script);};
    }, [url]);
  };

  export default useScript;

My script is loading but only after refresh the page where I have used the component MyComponent. I am using react-router5 for navigation.

Can anybody explain why it is happening and how to overcome it.

after every refresh it will load that file , why is that a problem / — 0xAnon
– 0xAnon, Commented Nov 2, 2019 at 5:20
codesandbox.io/s/unruffled-breeze-pehw0 you are not giving me complete code , may be your'e importing mycomponent somewhere esle, cuz in codesandbox i can only refresh the page to load the script, and there is no button according to your component,that allows me to fetch that kinline without page refresh. — 0xAnon
– 0xAnon, Commented Nov 2, 2019 at 5:28

Aprillion · Accepted Answer · 2019-11-02 09:27:38Z

1

My best guess is that the kinlinepayment.min.js script was executed just fine. But it registers an event listener for an event that already happened and will not happen again:

document.addEventListener("DOMContentLoaded",e())

You could try to dispatch that event (and all backup events if you need to support old browsers) in your useEffect:

...
document.body.appendChild(script);

document.dispatchEvent(new Event('DOMContentLoaded')))

return ...

answered Nov 2, 2019 at 9:27

Aprillion

22.4k6 gold badges59 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mritunjay Upadhyay Over a year ago

sir, I have add the line as you have said. document.dispatchEvent(new Event('DOMContentLoaded'))) But nothing happend.

Mritunjay Upadhyay Over a year ago

I have put this line in setInterval also but it did not worked

Aprillion Over a year ago

oh well, it looks like it will be a more complex problem, so you might need to ask for support directly in kasikornbank.com, how to use their service correctly

Mritunjay Upadhyay Over a year ago

I have loaded the script kinlinepayment.min.js. But I have not been able to use KInlineCheckout object. Can you give any suggestion

Collectives™ on Stack Overflow

External js is loading in react component only after refresh

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related