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

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.

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

				
					@billd:registry=http://repo.billd.com:8081/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 http://repo.billd.com:8081/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']
})

export class BilldWidgetComponent {

  private config: WidgetSdkConfig = {
    environment: WidgetSdkEnvironment.PRODUCTION,
    accessToken: {{access_token}},
    flow: WidgetSdkFlow.GENERIC_FLOW,
    onSuccess: this.enrollmentSuccess,
    onExit: this.closeModal,
 }

  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);
  }
}

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

EnvironmentQA
auth_urlPOST https://auth-qa.billd.com/oauth2/token
client_idfrom Billd
client_secretfrom Billd
scopefrom 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: