Widgets

A reference to the QuickBooks API Widgets that enable your application to connect and integrate with a QuickBooks Online company.

Connect to QuickBooks button

The user initiates the authorization flow to a QuickBooks Online company by clicking the Connect to QuickBooks button you provide in your app. Upon clicking this button, a popup window appears that begins the user authorization flow.  During this flow, the user selects a company and then authorizes your app to access the data. You can choose to render the button by using tag markup or by using the graphics directly.

Prerequisite

Include the JavaScript library

Include the JavaScript Library on a page in your app.

// Add this Intuit Anywhere javascript to your web page. 
// Please note JavaScript library versioning. As of this writing, 1.3.3 is the latest version 
// available and is used below.
// See Intuit Developer release notes for the current list of library versions.
// Replace 1.3.3 in intuit.ipp.anywhere-1.3.3.js library name with desired version. 
<script
     type="text/javascript"
     src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js">
</script>

Implement the setup() function

Function

intuit.ipp.anywhere.setup(​)

Parameters
  • grantUrl—The URL of the code on your site that begins the user authorization flow by getting an OAuth request token.  The flow is initiated when the user clicks the Connect to QuickBooks button.  This URL points to the Request Token Code.  Make sure this matches the value of the Host Name Domain field in your app's setting page on its Development tab.  To see the app's settings, select the app from My Apps  
  • datasources—The datasources you are accessing from your app.
    • quickbooks—Enable access to QuickBooks Online company. If not specified, default is true.
    • payments—​Enable access to QuickBooks payment data. If not specified, default is false
  • ​paymentOptions—Payment options if datasources.payments is set to true.
    • intuitReferred—Indicates whether merchant being sent through the connect to QuickBooks flow is referred by Intuit or not. If not specified, default is true: referred by Intuit.
DescriptionThe intuit.ipp.anywhere.setup() function specifies the URL needed by the Connect to QuickBooks button.
<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>
Note

The JavaScript library is versioned. Consult the Intuit Developer release notes for current version information.

Render button using tag markup

StandardC2QB.png

Use the following tag to render the button on your page.

<body>
    <ipp:connectToIntuit></ipp:connectToIntuit>
</body>
  • Display this button to users who have not authorized access, yet. That is, not connected to a QuickBooks Online company.
  • Include this button on any page in your app.
  • Preserve the appearance and behavior of this button.
  • Don't modify the code that implements this button.

Render button using graphics

In place of using the Intuit-provided tag markup to render the button, use your own JavaScript to directly access any one of these button images:

Connect to QuickBooks button graphics

 WhiteGreenImage files
SmallFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_sm_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_sm_default.png

Download button images

Includes Connect to QuickBooks graphics in png format, both base and hover states.

MediumFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_med_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_med_default.png
largeFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_lg_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_lg_default.png

Connect to QuickBooks button graphics for FR locale

 WhiteGreenImage files
SmallFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_sm_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_sm_default.png

Download FR-locale button images

Includes Connect to QuickBooks graphics in png format, both base and hover states.

MediumFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_med_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_med_default.png
largeFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_white_btn_lg_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/C2QB_green_btn_lg_default.png

Of note 

  • Implement your own on-click method with styles to handle both base and hover states. The code below is a sample implementation; configure setup()datasources and paymentOptions per your requirements.  
    Click to view sample
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js"></script>
        <script>
            intuit.ipp.anywhere.setup({
                grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet'
                datasources: {
                    quickbooks: true,
                    payments: true
                },
                paymentOptions: {
                    intuitReferred: true
                }
            });
        </script>
    </head>
    <body>
        <img src="C2QB_green_btn_sm_default.png"
            onmouseover="this.src='C2QB_green_btn_sm_hover.png'"
            onmouseout="this.src='C2QB_green_btn_sm_default.png'"
            onclick="intuit.ipp.anywhere.controller.onConnectToIntuitClicked();" />
    </body>
    </html>
    
    • Display this button to users who have not authorized access, yet. That is, not connected to a QuickBooks Online company.
    • Include this button on any page in your app.
    • Do not modify the appearance of any button graphics.

Sign in with Intuit button

To enable your user to sign into your app with their Intuit user ID (email) and password, provide the Sign in with Intuit button in your app. Upon clicking this button, the browser is redirected to the Intuit App Center sign-in window, which prompts the user to log in with the Intuit user ID (email) and password.  After user authentication is complete, the browser is redirected back to your app.  You can choose to render the button by using tag markup or by using button graphics directly.

 If you're implementing modified single sign-on, adding this button is optional.

Prerequisite

Include the JavaScript library

Include the JavaScript Library on a page in your app.

// Add this Intuit Anywhere javascript to your web page. 
// Please note JavaScript library versioning. As of this writing, 1.3.3 is the latest version 
// available and is used below.
// See Intuit Developer release notes for the current list of library versions.
// Replace 1.3.3 in intuit.ipp.anywhere-1.3.3.js library name with desired version. 
<script
     type="text/javascript"
     src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js">
</script>
Note

The JavaScript library is versioned. Consult the Intuit Developer release notes for current version information.

Render button using tag markup

sign-in-button-2.png

Intuit Developer provides JavaScript to render the Sign in with Intuit button as shown above. 

  1. Include the following tag:
    <ipp:login href="..." type="..."></ipp:login>
  2. For the href attribute, enter the URL of the code on your site that sends the authentication request to the Intuit OpenID provider service. You provide this code in a later step.

Tag Attributes:

The <ipp:login> tag has the following attributes:

  • type: Specifies the placing of the "Sign in with" string and the logo.  Optional.  Allowed values for the type attribute are:
    • horizontal: string is to the left of the logo (default)
    • vertical: string is above the logo
    • logo: logo only with no string
  • href: The destination URL.  Required.  When the user clicks the Sign in with Intuit button, the browser goes to the URL indicated by the href attribute.  This URL references the code on your site that sends an authentication request to the Intuit OpenID provider service.
    Click to view source.
    <body>
            <ipp:login href="http://example.com/myapp/SendOpenIDRequest" type="vertical">
            </ipp:login>
    </body>
  • Specify the href attribute for the destination.
  • Place this button anywhere on a page, display it only for users not already signed in.
  • Optional: when the user signs out from your app, sign the user out from Intuit by calling the logout() function.
  • Preserve the appearance or behavior of this button.
  • Do not use a link or another widget to start the sign in process.

Render button using graphics

In place of using the Intuit-provided tag markup to render the button, use your own JavaScript to render any one one of these button graphics.

Sign in with Intuit button graphics

 WhiteBlueImage files
SmallFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_white_btn_sm_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_blue_btn_sm_default.png

Download Files

Includes Sign in with Intuit graphics in png format. Includes base and hover states.

MediumFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_white_btn_med_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_blue_btn_med_default.png
LargeFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_white_btn_lg_default.pngFile:0050_QuickBooks_API/0020_Authentication_and_Authorization/Widgets/Sign_in_blue_btn_lg_default.png

Retina images

 WhiteBlueImage files
SmallIntuitSignIn-sm-white2x.jpgIntuitSignIn-sm-blue2x.jpg

Download files

Includes Sign in with Intuit graphics in jpg format. Includes base and hover states.

MediumIntuitSignIn-med-blue@2x.jpg
LargeIntuitSignIn-lg-white@2x.jpgIntuitSignIn-lg-blue@2x.jpg

Of note 

  • Implement your own on-click method to invoke the destination URL that sends the authentication request and to define classes for both base and hover states.
    Click to view sample.
    
    ​<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js"></script>
        <script type="text/javascript">
             window.onload = function() {
                    function startOpenIdFlow(){
                           $.get("http://localhost:8080/openIdStart",null)
                    });
              }
        </script>
    </head>
    <body>
        <img src="Sign_in_blue_btn_lg_default.png"
              onmouseover="this.src='Sign_in_blue_btn_lg_default.png'"
              onmouseout="this.src='Sign_in_blue_btn_lg_hover.png'"
              onclick="startOpenIdFlow();" />
    </body>
    </html>
    
  • Place this button anywhere on a page, display it only for users not already signed in.
  • Optional: when the user signs out from your app, sign the user out from Intuit by calling the logout() function.
  • Preserve the appearance or behavior of any graphics you use directly.
  • Don't use a link or another widget to start the sign in process.

 Got Questions? Get Answers in our developer forums.