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