Widgets

Note

This content is provided as a reference for existing apps that implement OAuth 1.0a and OpenID 2.0. New or existing developers with no previous apps must implement OAuth 2.0 and OpenID Connect.

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

Connect to QuickBooks button

The user initiates the authorization flow to a QuickBooks 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

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 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 company.
    • Include this button on any page in your app.
    • For the best user experience, when the user clicks this button open a new pop-up window to render the authorize dialog.
    • 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.

Did you find this page helpful?
Your feedback helps us make our docs better. Please let us know if this page helped you, or if it needs improvement.

 Got Questions? Get Answers in our developer forums.