Recaptcha script on demand loading with react

WithRecaptcha.js

import { compose,
  lifecycle,
  withHandlers,
  withState,
  withStateHandlers,
} from 'recompose';
import { scriptExists } from '../Helper';
import { withSpinnerWhileLoading } from '../Spinner';

export const scriptSrc = 'https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit';

export const withReCaptcha = compose(
  withState('loading', 'setLoading', true),
  withHandlers({
    loaded: ({ setLoading }) => () => setLoading(false)
  }),
  lifecycle({
    componentWillMount() {
      window.onloadCallback = this.props.loaded;
      if (!scriptExists(scriptSrc)) {
        const script = document.createElement('script');
        script.src = scriptSrc;
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);
      } else {
        this.props.loaded();
      }
    }
  }),
  withSpinnerWhileLoading,
);

export const withReCaptchaState = compose(
  withStateHandlers(({
    captchaToken = ''
  }) => ({
    captchaToken
  }), {
    setCaptchaToken: state => captchaToken => ({
      ...state,
      captchaToken,
    }),
    clearCaptchaToken: state => () => ({
      ...state,
      captchaToken: '',
    }),
  }),
);