React Component to show ConnectTo Quickbooks Online Button

ConnectToQuickbooksOnlineButton.jsx

import React, { PropTypes } from 'react';
/**
 * Connect to QBO Button
 * @param props
 * @returns {XML}
 */
const ConnectToQuickBooksOnlineButton =  (props)=>{

    const {callbackURL} = props;

    const QBLogin = () => {

        // we wrap QBO's button in a template string
        // becuase it has some stuff that isn't supported by JSX and react
        // like xml name spaces
        const template = `
        <script type="text/javascript" src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js"></script>
         <script>
         intuit.ipp.anywhere.setup({
           menuProxy: '',
           grantUrl: '${callbackURL}'
           });
         </script>
         <ipp:connectToIntuit></ipp:connectToIntuit>`

        // then we return it in a format ready for dansgeouslySetInnerHTML
        return {
            __html: template
        }
    };


    return (
        <div dangerouslySetInnerHTML={QBLogin()} ></div>
    )
};


//validate props
ConnectToQuickBooksOnlineButton.propTypes = {
    callbackURL : PropTypes.string.isRequired
};


export default ConnectToQuickBooksOnlineButton

I should mention that I needed this to render Server Side using renderToString(). No Client side rendering here. I was using Hapi.js and hapi-react-views using React as a server side template engine. Which is totally fun :-)

Hi I see that you use React, so I am sure that you will find interesting the https://reactjs.co - this is the free online convention and tutorial book for React.JS Developers. React is not only the View (in MVC) anymore. ReactJS For Dummies: Why & How to Learn React Redux, the Right Way.

Hi, the code that you wrote is not working for me. Can you take a look at the fiddle I made: https://jsfiddle.net/aewhatley/jg82osm7/2/. Thanks for your help.