score:4
Accepted answer
const addpaypalscript = () => {
const script = document.createelement("script");
script.type = "text/javascript";
script.src = `https://www.paypal.com/sdk/js?client-id=${process.env.paypal_client_id}`;
// script.setattribute("data-namespace", "paypal_sdk");
script.async = true;
script.onload = () => {
setsdkready(true);
};
document.body.appendchild(script);
};
script.onload will flag that it is ready. track it in usestate
const [sdkready, setsdkready] = usestate(false);
then call addpaypalscript inside useeffect or componentdidmount. i use useeffect
useeffect(() => {
dispatch(orderdetailrequeststart(paramsid));
if (!window.paypal) {
addpaypalscript();
} else {
// flags that it is ready
setsdkready(true);
}
}, []);
Source: stackoverflow.com
Related Query
- wait for loading paypal script in nextjs page
- How to wait for React context to load before loading page in Next.js
- React - correct way to wait for page load?
- Nextjs stuck loading the home page
- Wait for external script to load before the React component
- How to make Telegram Instant View wait for page to render javascript?
- Loading webpack bundle via script tag for microfrontend approach
- External script not loading on page change
- Percentage loading bar for React / Redux app like Pace.js that only shows on initial page load
- How to wait for fetch to complete before rendering page in React.js
- React-query + Nextjs using hydration config for SSR doesn't use cached results and always have to wait fetch again
- Wait for ComponentDidMount to finish loading in highest component in ReactJS
- how to make disable file system routing for specific page in nextjs
- Sharpspring script not loading consistently on a Gatsby page
- How to wait for redux state change and then render page in React
- Individual loading animation for each page with Next.js
- PrivateRoute always redirects to sign in page when refreshing the page; How to wait for useEffect() and localStorage?
- Update a state variable only on loading the page for the first time in react js
- Material-ui V3 is not loading first tab for after fetch data (or page load)
- How can I generate a separate NextJS page for each FaunaDB Document?
- NextJS - Load external script on page component load
- Alternative for typing a nextjs page - one line
- NextJS Videos not loading without a page refresh when the page is accessed via a link
- html.js loading the script only once on page load Gatsby
- Is there a function in ReactJS to wait for a Redux Action to be complete before loading anything in a class?
- Change navsection background for each page route nextjs
- Error: Collecting page data for /dashboard/widget is still timing out after 2 attempts nextjs
- Use effect wait for Data from previous page
- NextJs script component should hide on a specific page
- React/NextJS: Loading an external script only for non-authenticated users
More Query from same tag
- How to send file metadata over api using fetch
- Form.Control as="select"
- React router doesn't route traffic when hosted on firebase
- Passing ref down to child in React + Typescript
- How to implement SSR for Material UI's media queries in NextJs?
- Editable table react
- Scrollcontainer with fixed element inside not scrollable on fixed element
- Invalid configuration object. Webpack has been initialized using a configuration object that does not match
- Getting multiple svg element when data get loaded D3
- Dispatch multiple actions using Redux Thunk and the await/async syntax to track loading
- How to set a date string to a the following format
- React Route Component handle all "/" routes EXCEPT for "/login"
- How can i store api response in variable and pass it to react popup video player
- Return multiple <tr> lines in React
- Google tag manager with react +redux
- Checkbox property DefaultChecked in reactjs not working with states updated by radio button
- React conditional style components not working in chrome?
- Confusing Syntax of Spreading React Props
- Reference file in public folder from CSS in create-react-app
- React component not reloading on history.push
- React router 4 how to nested routes /admin and /
- React localStorage issue
- Infinite re-render due to function inside dependency array in React hooks
- Redirect doesn't work in React Router
- OnChange Void issue using Typescript
- How to test Firebase login action (React/Jest)
- How to post data with asp.net core/react
- React and setState and autocomplete
- React/React-Hooks: I need to run a validation on an input field depending on active/inactive state
- Redux-saga call multiple functions/actions