I am trying to connect to the Quickbooks Button () into a React ponent, 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=".ipp.anywhere-1.3.3.js">
</script>
<script src=".ipp.anywhere-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript">
intuit.ipp.anywhere.setup({
grantUrl: '',
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 = {
};
}
ponentWillMount() {
const library = document.createElement("script");
library.src = ".ipp.anywhere-1.3.3.js";
library.type = "text/javascript"
library.async = true;
document.body.appendChild(library);
const setup = document.createElement("script");
setup.src = ".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 ponent. The button is still not displaying though.
import React from 'react';
class ConnectToQuickBooksOnlineButton extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
ponentWillMount() {
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: /
I am trying to connect to the Quickbooks Button (https://developer.intuit./docs/0100_quickbooks_online/0100_essentials/000500_authentication_and_authorization/widgets#/Connect_to_QuickBooks_button) into a React ponent, 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./Content/IA/intuit.ipp.anywhere-1.3.3.js">
</script>
<script src="https://js.appcenter.intuit./Content/IA/intuit.ipp.anywhere-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript">
intuit.ipp.anywhere.setup({
grantUrl: 'http://www.mypany./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 = {
};
}
ponentWillMount() {
const library = document.createElement("script");
library.src = "https://appcenter.intuit./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./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 ponent. The button is still not displaying though.
import React from 'react';
class ConnectToQuickBooksOnlineButton extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
ponentWillMount() {
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/aewhatley/7eL716mp/
Share Improve this question edited Mar 12, 2019 at 10:51 Magnus Melwin 1,5171 gold badge21 silver badges34 bronze badges asked Mar 22, 2017 at 3:51 AlexAlex 4,27411 gold badges43 silver badges67 bronze badges 3- 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 Commented Mar 22, 2017 at 4: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
<body>. – Brigand Commented Mar 22, 2017 at 4:16 - Sorry, I'm not sure I understand what you mean. Could you post some code? Thanks. – Alex Commented Mar 22, 2017 at 4:16
3 Answers
Reset to default 7 +50@alex looks like you are trying to access to the Dom before is render, you should use "ponentDidMount" 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 ponent I've created
QuickBooks.js
Working demo WebpackBin https://www.webpackbin./bins/-Kg6yu5JUmy9dD08JI_A
import React from 'react'
class QuickBooks extends React.Component {
constructor(props){
super(props);
window.intuit.ipp.anywhere.setup({
grantUrl: 'http://www.mypany./HelloWorld/RequestTokenServlet',
datasources: {
quickbooks : true,
payments : true
},
paymentOptions:{
intuitReferred : true
}
})
}
ponentDidMount() {
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./ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.0.0/react-dom.min.js"></script>where do you render your ConnectToQuickBooksOnlineButton ponent? like in index.jsx or app.jsx? you can include all your script in your index.html or or create them in your root ponent (index/app.jsx) and in ConnectToQuickBooksOnlineButton create only the needed html tag, like this:
ponentWillMount() {
const connectToIntuit = document.createElement('ipp:connectToIntuit')
document.body.appendChild(connectToIntuit)
}
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