Billd SDK Installation Documentation

Overview
This document describes Billd’s Widget SDK implementation as a package within a partner web application. Also included are code examples of implementation within a frame and the authorization process for both QA and Production.

Implementation

Prerequisites
Please provide Billd with the QA and Production domains that will host the NPM package. Since the NPM package will be making calls to Billd APIs, it is essential that these domains are added to the Billd allow list.

Step 1: Receive Initial NPM Package Info

From Billd, you will receive a link to the NPM package that will need to be added to your application. And a set of credentials.
Step 2: Application server setup

Next, you will need to create an NPM configuration file called .npmrc, at the root of your web application if it doesn’t already exist.

Within the .npmrc file you will need to add a registry entry for the @billd scope.

				
					@billd:registry=https://repo.billd.com/repository/npm-private
registry=https://registry.npmjs.org
Step 3: Download and install the package

Open a terminal window and cd to the root directory of your web application. This will be the location where the NPM package will be installed. It is also the directory where the .npmrc file is located.

Login to the Billd NPM repository using the following command with the credentials that Billd provided. This is where you actually retrieve that package.

				
					npm login --registry https://repo.billd.com/repository/npm-private

After successful login, you are ready to install the SDK widget with the following command:

				
					npm install @billd/widget-sdk
Step 4: Implement the widget in your application

Implementation example using Angular.

				
					import { Component } from '@angular/core';
import { WidgetSdk, WidgetSdkConfig, WidgetSdkFlow, WidgetSdkEnvironment } from '@billd/widget-sdk'

@Component({
  selector: 'billd-widget',
  templateUrl: './billd-widget.component.html',
  styleUrls: ['./billd-widget.component.scss']
})

private config: WidgetSdkConfig = {
    environment: WidgetSdkEnvironment.PRODUCTION,
    accessToken: '',
    onSuccess: this.enrollmentSuccess(),
    onExit: this.closeModal(),
    onError: this.errorHandling(),
    params?: {
      // *****
      // Parameters map provided by BILLD
      // *****
    };
 }

  async openWidget() {
    //* Before opening the widget you will need to add the access token in configuration
    const response = await this._authentication.getAccessToken();
    this.config.accessToken = response.access_token;

    //* Open the widget
    WidgetSdk(this.config);
  }

  closeModal($event): void {
    console.log('closed', $event);
  }

  enrollmentSuccess($event): void {
    console.log('enrollment success', $event);
  }

  errorHandling($event): void {
    console.log('Error: ', $event);
  }
}
Additional Information: Below is a set of sample fields that can be passed in as intake parameters within the session. 
				
					params: {
      externalPartnerPartyIdentifier: string;
      externalPartnerProjectIdentifier: string;
      externalPartnerPayAppIdentifier: string;
      taxId: string;
      projectDescription: string;
      projectStreetAddress: string;
      projectCity: string;
      projectState: string;
      projectZip: string;
      projectCounty: string;
      projectContractAmount: string;
      payAppNumber: string;
    };

Field Definitions:

externalPartnerPartyIdentifier:
Unique ID for the contractor

externalPartnerProjectIdentifier:
Unique ID for the project

externalPartnerPayAppIdentifier:
Unique ID for the Payment Application

taxId:
Tax ID for the contractor

projectDescription:
Description of the project scope

projectStreetAddress:
Physical address of project

projectCity:
Physical address of project

projectState:
Physical address of project

projectZip:
Physical address of project

projectCounty:
Physical address of project

projectContractAmount:
Contract amount between subcontractor and general contractor

payAppNumber:
Number for the Pay App being referenced

SDK QA Get the Access Token

Environment QA
auth_url POST https://auth-qa.billd.com/oauth2/token
client_id from Billd
client_secret from Billd
scope from Billd

Sample:

				
					var myHeaders = new Headers();

myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

var urlencoded = new URLSearchParams();
urlencoded.append("grant_type", "client_credentials");
urlencoded.append("scope", "{{scope}}");
urlencoded.append("client_id", "{{client_id}}");
urlencoded.append("client_secret", "{{client_secret}}");

var requestOptions = {
  method: "POST",
  headers: myHeaders,
  body: urlencoded,
};

const response = fetch("{{auth_url}}", requestOptions).then((response) => response.json());
 
var accessToken = response.access_token;

SDK PROD Get the Access Token

Environment QA
auth_url POST https://auth.billd.com/oauth2/token
client_id from Billd
client_secret from Billd
scope from Billd

Sample:

				
					var myHeaders = new Headers();

myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

var urlencoded = new URLSearchParams();
urlencoded.append("grant_type", "client_credentials");
urlencoded.append("scope", "{{scope}}");
urlencoded.append("client_id", "{{client_id}}");
urlencoded.append("client_secret", "{{client_secret}}");

var requestOptions = {
  method: "POST",
  headers: myHeaders,
  body: urlencoded,
};

const response = fetch("{{auth_url}}", requestOptions).then((response) => response.json());
  
var accessToken = response.access_token;

News & Updates: