Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to connect React component to the Quickbooks Button

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/

like image 597
Alex Avatar asked Mar 22 '17 03:03

Alex


1 Answers

@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>
like image 69
diegochavez Avatar answered Sep 21 '22 04:09

diegochavez