Xero Accounting Plugin

Demo to preview the settings

Introduction

Xero is a leading online accounting and reporting tool and this plugin allows you to authenticate your app users with their Xero accounts and then read and write data.

Prerequisites

In order to interact with the plugin you'll need to get the API credentials client Key and Client Secret.
Create your development account at: https://developer.xero.com/
Check API Calls limits here - https://developer.xero.com/documentation/oauth2/limits​
Image without caption

How to setup

I. Setup Xero Development application

  1. First, you will want to head over to your Xero Developers Console,
  1. Create an account (or log in with an existing one) & Create a new 'Public App'.
Image without caption
Fill in the details of your company and the redirect URI , accept Xero's TOS and Create the App.
☝
Note: Make sure to copy and paste your secret immediately. You won't be able to see it again.
3. Once done you will have the required 'Consumer Key' (Client ID) & 'Consumer Secret' (Client Secret) to provide in the Xero bubble plugin settings.
Image without caption

II. Setup Xero plugin on Bubble side

  1. In your Bubble app, select the data tab and then open the 'User' data tab. We need to add a few fields here so that the authorization process is easier to manage. The fields are case-sensitive & need to be created exactly as shown below including the type of field:
Image without caption
2. Add the Client Secret and Client ID alongside the redirect URI which you've set in the Xero app dashboard to the Plugin Settings tab:
Image without caption
3. Create the authorization workflow by placing Plugin Element Connect Xero Button Oauth 2.0 on the page editor
Image without caption
4. The workflow to complete the authorization between the user & Xero is fairly easy, set an event when the URL contains a token from Xero and add the action Get Xero Token From URL Oauth 2.0 and this action it is necessary only to get value from the page URL.
Image without caption
5. To get the user information use action Get user from token Oauth 2.0 which will return Email, Given Name, and Family Name. And in order to retrieve these values provide the Token ID from the previous step
Image without caption

Plugin Element Proprieties

The plugin contains Connect XeroButtonOauth 2 visual element which should be used on the page.
Image without caption

PLUGIN ACTIONS DETAILED

  1. Xero: Remove OAuth URL Parameters - This action should be used for removing OAuth parameters after redirecting from the grant access screen.
  1. Create/Edit Xero Data - This action should be used to create or edit Xero data.
    1. Fields:
      Title
      Description
      Type
      Xero Endpoint
      The Xero endpoint includes the object id if needed.
      string
      Bubble Endpoint URL
      Bubble Endpoint URL that is created in the backend workflow. eg. https://yourapp.bubbleapps.io/api/1.1/wf/invoices or when initializing, https://yourapp.bubbleapps.io/version-test/api/1.1/wf/invoices/initialize
      string
      Method
      The Method required by the endpoint you calling.
      Dropdown
      JSON Body
      The JSON body you want to post to the endpoint.
      string
      Returns:
      Title
      Description
      Type
      Status
      Obtained status code after request.
      string
  1. Get Xero Token From URL Oauth 2.0 - This action should be used to obtain an access token from Xero.
    1. Fields:
      Title
      Description
      Type
      Response URL
      Page URL obtained from Xero after grant access screen.
      string
      Returns:
      Title
      Description
      Type
      Access Token
      An API access token that can be used to access the Xero account data.
      string
      Token Type
      Token Type is Bearer.
      string
      Id Token
      The token containing user identity details (only returned ifΒ OpenID Connect Β scopes are requested).
      string
      Refresh Token
      The token used to refresh the access token once it has expired (only returned if theΒ offline_access Β the scope is requested)
      string
      Expires At
      The date until the access token is valid.
      number
      Session State
      Represents a session token.
      string
      Scope
      The list of access scopes that were granted to the application and are associated with the access token.
      string
  1. Get user from token Oauth 2.0 - This action should be used to obtain user data from Xero.
    1. Fields:
      Title
      Description
      Type
      ID Token
      The ID Token Obtained from above action.
      string
      Returns:
      Title
      Description
      Type
      Xero user id
      The User Id from the Xero account.
      string
      Email
      The User email from the Xero account.
      string
      Given Name
      The User is given the name from the Xero account.
      string
      Family Name
      The User's family name is from the Xero account.
      string
  1. Xero: Refresh Token - This action should be used to obtain a refresh token from Xero.
    1. Fields:
      Title
      Description
      Type
      Refresh Token
      The token used to refresh the access token once it has expired (only returned if theΒ offline_access Β the scope is requested)
      string
      Returns:
      Title
      Description
      Type
      Id Token
      The token containing user identity details (only returned ifΒ OpenID Connect Β scopes are requested).
      string
      Access Token
      The token used to call the API.
      string
      Expires In
      The amount of seconds until the access token expires.
      datetime
      Refresh Token
      The token used to refresh the access token once it has expired (only returned if theΒ offline_access Β the scope is requested).
      string

API Calls

Plugin Data Calls

Plugin Action Calls

Workflow example

In this workflow,, we will show you how to retrieve and display, Accounts, Employees and Users values on Bubble via action when a Button is clicked.
  1. Place an element Button on the page
Image without caption
2. Add an action on the button clicked, Refresh Token
Image without caption
3. Next we make changes to user fields
Image without caption
4. In last step we save the values in custom states retrieved from Xero
Image without caption
5. The retrieved values on front-end, (ex Accounts and Users)
Image without caption
Image without caption
Image without caption

Changelogs