I have been trying to integrate docusign with focus view within my react app. I am using docusign SDK for nodejs and express server makes all the API requests and fetches the data through docusign so I am able to fetch the URL using postman and visiting the link directly opens up the form fine, but when embed fresh URL in react app, the docusign loading icon goes in infinite loop in focus view.

The console log show errors with Content Security Policy. Haven’t had much luck with docusing react sample app.

Below is the code taken from docusing How-to guide and adjusted for react: LINK

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

function DocumentSignUI({ integrationKey, docUrl }) {
  useEffect(() => {
    const loadDocuSign = async () => {
      try {
        const docusign = await window.DocuSign.loadDocuSign(integrationKey);
        const url = `${docUrl}&output=embed`;

        const signing = docusign.signing({
          url,
          displayFormat: 'focused',
        });

        signing.mount('#agreement');
      } catch (ex) {
        console.error(ex);
        // Handle error
      }
    };

    console.log('DOCUSIGN RENDER');
    loadDocuSign();
  }, []);

  return (
    <div className="docusign-agreement" id="agreement" />
  );
}

DocumentSignUI.propTypes = {
  integrationKey: PropTypes.string.isRequired,
  docUrl: PropTypes.string.isRequired,
};

export default DocumentSignUI;

Errors encountered in console log (Chromium)
enter image description here

Errors encountered in console log (Firefox)

Tried disabling content security policy on server it didnt work, tried adding meta tags in index.html and that didn’t work either.