Webinar: Learn how to get paid early & scale via the Turner Accelerated Payment Program powered by Billd.
Step 1: Receive Initial NPM Package Info
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
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
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);
}
}
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
| 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;
| 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;