How to connect React component to the Quickbooks Button

Question

I am trying to connect to the Quickbooks Button (https://developer.intuit.com/docs/0100_quickbooks_online/0100_essentials/000500_authentication_and_authorization/widgets#/Connect_to_QuickBooks_button) into a React component, and I am trying to copy the following method: Adding script tag to React/JSX.

The Quickbooks button uses the following script code:

<script
     type="text/javascript"
     src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js">
</script>
<script src="https://js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript">
    intuit.ipp.anywhere.setup({
            grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet',
            datasources: {
                 quickbooks : true,
                 payments : true
           },
            paymentOptions:{
                  intuitReferred : true
           }
    });
</script>
<body>
    <ipp:connectToIntuit></ipp:connectToIntuit>
</body>

I have tried to use the following React code, which is not working. Any help is appreciated. Thanks.

import React from 'react';

class ConnectToQuickBooksOnlineButton extends React.Component {
    constructor(props){
        super(props);
        this.state = {
        };
    }

    componentWillMount() {
            const library = document.createElement("script");
            library.src = "https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js";
            library.type = "text/javascript"
            library.async = true;
            document.body.appendChild(library);

            const setup = document.createElement("script");
            setup.src = "https://js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js";
            setup.type = "text/javascript";
            setup.async = true;
            document.body.appendChild(setup);

            const connect = document.createElement("script");
            connect.type = "text/javascript";
            connect.innerHTML = "intuit.ipp.anywhere.setup({grantUrl: '/quickbooksauth',datasources: {quickbooks : true, payments : true}, paymentOptions:{intuitReferred : true}});"
            document.body.appendChild(connect);

            const body = document.createElement("body");
            body.innerHTML = "<ipp:connectToIntuit></ipp:connectToIntuit>";
            body.async = true;
            document.body.appendChild(body);
    }

    render(){
        return <div />;
    }
};

export default ConnectToQuickBooksOnlineButton;

I tried putting the script stuff in index.html, and calling it from the Quickbooks component. The button is still not displaying though.

import React from 'react';

class ConnectToQuickBooksOnlineButton extends React.Component {
    constructor(props){
        super(props);
        this.state = {
        };
    }

    componentWillMount() {
        const connectToIntuit = document.createElement('ipp:connectToIntuit');
        document.body.appendChild(connectToIntuit);
    }

    render(){
        return <div ref="ipp:connectToIntuit"/>;
    }
};

export default ConnectToQuickBooksOnlineButton;

I have also created the following fiddle: https://jsfiddle.net/aewhatley/7eL716mp/

To load the script tags dynamically you'll need to add the first one, wait for it to load, then add the second, wait for it to load, then run your init code (no need to have a script tag for that part). — Brigand, Mar 22 '17 at 04:15
You also need to avoid loading the scripts multiple times, and you should use a ref on the div and set its innerHTML instead of creating a ``. — Brigand, Mar 22 '17 at 04:16
Sorry, I'm not sure I understand what you mean. Could you post some code? Thanks. — Alex, Mar 22 '17 at 04:16

score 7 · Accepted Answer · edited Oct 27 '17 at 14:49

@alex looks like you are trying to access to the Dom before is render, you should use "componentDidMount" to load your intuit button on a div or container.

I've created a WebpackBin who illustrate the implementation, please let me know if this is why you want to achieve?

This is the simple component I've created

QuickBooks.js

Working demo WebpackBin https://www.webpackbin.com/bins/-Kg6yu5JUmy9dD08JI_A

import React from 'react'

class QuickBooks extends React.Component {
  constructor(props){
    super(props);
    
    window.intuit.ipp.anywhere.setup({
      grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet',
      datasources: {
        quickbooks : true,
        payments : true
      },
      paymentOptions:{
        intuitReferred : true
      }
    })
    
  }
  componentDidMount() {
      let buttonContainer = document.getElementById("intuButton")
      const connectToIntuit = document.createElement('ipp:connectToIntuit');
      buttonContainer.appendChild(connectToIntuit);
  }
  render(){
      return (
          <div id="intuButton"></div>
      )
  }
}

export default QuickBooks

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

score 0 · Answer 2 · answered Mar 24 '17 at 08:40

0

where do you render your ConnectToQuickBooksOnlineButton component? like in index.jsx or app.jsx? you can include all your script in your index.html or or create them in your root component (index/app.jsx) and in ConnectToQuickBooksOnlineButton create only the needed html tag, like this:

componentWillMount() {
        const connectToIntuit = document.createElement('ipp:connectToIntuit')
        document.body.appendChild(connectToIntuit)
}

answered Mar 24 '17 at 08:40

Gayane

547
4
12

I tried doing that, putting the script stuff in index.html. It did not work though. I posted the code I used in the edited OP. – Alex Mar 24 '17 at 15:46

score 0 · Answer 3 · answered Mar 04 '21 at 20:58

You dont need to. Just use your backend to generate the link.

// backend (expressJs)
router.post('/authUri', async (req: Request, res: Response, next: NextFunction) => {

  const authUri = oauthClientGlobal.authorizeUri({
    scope: [OAuthClient.scopes.Accounting],
    state: 'intuit-test',
  })

  res.status(200).json(authUri)
})

then frontEnd (React) call your backend route to get the Quickbooks URL then with the response you redirect the page to quickbooks :

      window.location.href = authUri  // response Quickbooks URL From Backend

How to connect React component to the Quickbooks Button

3 Answers3