Onboarding Company Guide
This onboarding guide assumes that you have already completed the TheM>Getting Started>Quick Start guide and are familiar with TheM class, TheM submodule initialization, and creating/listening for custom events. This guide also assumes that you have already installed the amplifi_mobile_sdk package into your project and placed the following minified libraries in the /lib folder of your project: axios.min.js (Optional - fetch will be used if axios is not present), crypto-js.min.js, lz-string.min.js, moment.min.js, and socket.io.min.js.
End-users can be either individuals or businesses. This guide is an example of how to onboard a business user, also referred to as a company in this guide.
1. In the src folder of your project (from the Quick Start guide of the TheM Getting Started section), create a new file called onboarding-company.js with the following code.
onboarding-company.js
import ClassTheM from "../node_modules/@PayGearsCorp/amplifi_mobile_sdk/TheM/them.mjs";
import AMPLIFI_IMAGE_B64 from "./image-b64.js"; //sample b64 image for testing onboarding
import { sampleClientCompany } from "./sample-client-company.js"; //sample company client for testing onboarding
import { thisDevice } from "./android-demo-device.js"; //android device emulator for testing onboarding
const AMPLIFI_BASE_URL = "PUT_YOUR_INSTANCE_URL_HERE"; //Speak to a support representative to be issued a sandbox instance URL
const AMPLIFI_CORE_URL = `${AMPLIFI_BASE_URL}core/`;
//need AMPLIFI_FACE_IMAGE_B64, AMPLIFI_DL_FRONT_B64, AMPLIFI_DL_BACK_B64 for onboarding
AMPLIFI_FACE_IMAGE_B64 = AMPLIFI_IMAGE_B64; //declared in onboarding-company.html
AMPLIFI_DL_FRONT_B64 = AMPLIFI_IMAGE_B64; //declared in onboarding-company.html
AMPLIFI_DL_BACK_B64 = AMPLIFI_IMAGE_B64; //declared in onboarding-company.html
const subClassesToInit = [
//"accounts",
//"beneficiaries",
//"cards",
//"cheques",
"common",
//"externalAccounts",
//"fdrs",
//"fundstransfer",
//"fxrates",
//"genericRequests",
//"ious",
"onboarding",
//"payees",
//"remittance",
//"restrictions",
//"statics",
"user"
];
sampleDemoClient = { //declared in onboarding-company.html
...sampleClientCompany
};
export const onboardingCompanyTutorial = async (subClasses = "") => {
TheM = new ClassTheM({
config: {
AFiInstanceId: "qwe",
modulesFolder: "",
modulesFolderOnboarding: "",
webworkerFolder: "../TheM/",
baseLibURL: "../demo/lib/",
backEndURL: AMPLIFI_CORE_URL,
socketURL: AMPLIFI_BASE_URL,
user: {
DEFAULT_HOMECOUNTRY: "US"
},
onboarding: {
PRESEGMENTS_ALLOWED: {
"ccc_oqiwhfgoiuapoiuekdovnmcnv": "CCC" //demo presegment for a company user
}
}
},
libs: {
}
});
//Emulate user device before initializing TheM submodules
TheM.thisDevice = { ...thisDevice, TheM };
//Initialize desired submodules
//Some modules depend on others so must be initialized together
//For instance, most submodules require the "common" subclass to be initialized
await TheM.doInit(subClasses);
//onboarding workflow to try
//Uncomment to run the whole workflow or follow the instructions in the browser
/*
TheM.onboarding.doSetClient("ccc_oqiwhfgoiuapoiuekdovnmcnv"); //Set the client presegment for a demo company.
await TheM.onboarding.doConnectSocket(); //Open a socket connection. This command enables bidirectional, event-based communication.
for (let key of Object.keys(sampleClientCompany)) { //Fill out TheM.onboarding.client details
try {
if (["name", "businessName", "businessPhone", "ein", "businessRepresentativeType", "firstName", "middleName", "lastName", "gender", "email", "mobile", "citizenshipCountryCodeA3", "isIntroSeen", "isTCSeen", "ssn", "languageCode"].includes(key)) {
TheM.onboarding.client[key] = sampleClientCompany[key];
}
if (key === "businessAddress") {
TheM.onboarding.client[key].addressLine1 = sampleClientCompany[key].addressLine1;
TheM.onboarding.client[key].city = sampleClientCompany[key].city;
TheM.onboarding.client[key].state = sampleClientCompany[key].state;
TheM.onboarding.client[key].postalCode = sampleClientCompany[key].postalCode;
TheM.onboarding.client[key].countryCode = sampleClientCompany[key].countryCode;
TheM.onboarding.client[key].country = sampleClientCompany[key].country;
}
if (key === "address") {
TheM.onboarding.client[key].addressLine1 = sampleClientCompany[key].addressLine1;
TheM.onboarding.client[key].city = sampleClientCompany[key].city;
TheM.onboarding.client[key].state = sampleClientCompany[key].state;
TheM.onboarding.client[key].postalCode = sampleClientCompany[key].postalCode;
TheM.onboarding.client[key].countryCode = sampleClientCompany[key].countryCode;
TheM.onboarding.client[key].country = sampleClientCompany[key].country;
}
if (key === "dob") {
TheM.onboarding.client[key].day = sampleClientCompany[key].day;
TheM.onboarding.client[key].month = sampleClientCompany[key].month;
TheM.onboarding.client[key].year = sampleClientCompany[key].year;
}
if (key === "extra") {
TheM.onboarding.client[key].sex = sampleClientCompany[key].sex;
TheM.onboarding.client[key].eyeColor = sampleClientCompany[key].eyeColor;
TheM.onboarding.client[key].hairColor = sampleClientCompany[key].hairColor;
TheM.onboarding.client[key].heightMetric = sampleClientCompany[key].heightMetric;
TheM.onboarding.client[key].weightMetric = sampleClientCompany[key].weightMetric;
}
if (key === "document") {
TheM.onboarding.client[key].type = sampleClientCompany[key].type;
TheM.onboarding.client[key].number = sampleClientCompany[key].number;
TheM.onboarding.client[key].issued = sampleClientCompany[key].issued;
TheM.onboarding.client[key].expires = sampleClientCompany[key].expires;
TheM.onboarding.client[key].issuingState = sampleClientCompany[key].issuingState;
TheM.onboarding.client[key].issuanceCountryCodeA3 = sampleClientCompany[key].issuanceCountryCodeA3;
TheM.onboarding.client[key].raw = {};
}
} catch (err) {
console.log(err);
}
}
// Push client business representative images onto the imageQueue to be sent to the server
TheM.onboarding.imageQueue.push({ type: "Face image", imageBase64: AMPLIFI_FACE_IMAGE_B64 });
TheM.onboarding.imageQueue.push({ "type": "US driving license front document image", "imageBase64": AMPLIFI_FACE_IMAGE_B64 });
TheM.onboarding.imageQueue.push({ "type": "US driving license back document image", "imageBase64": AMPLIFI_FACE_IMAGE_B64 });
if (TheM.onboarding.client.isValid) { // Check to make sure TheM.onboarding.client is fully filled out and appears to be valid
console.log(`TheM.onboarding.client.isValid: ${TheM.onboarding.client.isValid}`);
} else {
throw "Client is not valid"
}
try {
let temp = await TheM.onboarding.doSendData(); //Send the data to the server
if (!temp) {
throw "Failed sending the data"
}
} catch (err) {
console.log(err);
}
await TheM.on("modelBank registration complete", () => { // Set a listener that will react to a successfull conversion of the client from prospect to user
console.log("SUCCESS: the user has been registered successfully");
}, true);
await TheM.on("modelBank onboarding device ready for logging in", () => { // Set a listener that will react to a custom device event
//Once successfully registered, the client can log in using the device for the first time
TheM.thisDevice.doAuthenticate();
}, true);
await TheM.onboarding.doRegister({ pin: "1234" }); // Register the client (server will attempt to convert the client from a prospect to a user)
*/
};
await onboardingCompanyTutorial(subClassesToInit.join(" "));
2. The onboarding-company.js source file will require a base64 encoded image. Create a file in the src folder of your project called image-b64.js if you have not already done so for the Onboarding Individual guide tutorial. In this tutorial, the same image file is used whereever needed to represent the required image for testing purposes. However, in production, each image would be represented by its own base 64 encoded string.
image-b64.js
const AMPLIFI_IMAGE_B64 ="PUT YOUR B64 ENCODED IMAGE STRING HERE"; //a very long base 64 encoded image string
3. The onboarding-company.js file also references a sampleClientCompany that has been prepared for testing purposes. Create a file in the src folder of your project called sample-client-company.js.
sample-client-company.js
/*
* This sample company client has been provided for testing and exploring TheM.onboarding functionality
* in the browser while running the provided onboarding demo for a company.
*
* Example: mobile = sampleClientCompany.mobile;
*
*/
const SSN = "3" + (new Date().valueOf() / 1000).toString().substring(1, 9);
const EIN = "4" + (new Date().valueOf() / 1000).toString().substring(1, 9);
export const sampleClientCompany = {
name: "Company ABC",
businessName: "Company ABC Inc.",
businessAddress: {
addressLine1: "123 Main Str.",
city: "Harrisburg",
postalCode: "12345",
state: "PA",
country: "US"
},
businessPhone: "5556667777",
ein: EIN,
businessRepresentativeType: "principal_owner", // or "authorized_signer"
firstName: "Suzy",
middleName: "Queue",
lastName: "Tester",
gender: "female",
mobile: "5556667777",
email: "testemail@email.test",
citizenshipCountryCodeA3: "USA",
isIntroSeen: true,
isTCSeen: true,
dob: {
day: "15",
month: "10",
year: "1975"
},
address: {
addressLine1: "123 Main Str.",
addressLine2: undefined,
city: "Harrisburg",
state: "PA",
postalCode: "12345",
countryCode: "US",
country: "US"
},
extra: {
sex: "female",
eyeColor: "BRO",
hairColor: "BLK",
heightMetric: "181",
weightMetric: "85"
},
ssn: SSN,
document: {
type: "US driving license",
number: "99999999",
issued: "10052019",
expires: "08042029",
issuingState: "PA",
issuanceCountryCodeA3: "USA",
raw: {},
},
languageCode: "en"
};
4. The onboarding module expects the end-user (prospect) to be onboarded via a device. We will emulate the device that the end-user is using to onboard. Create a file in the src folder of your project called android-demo-device.js if you have not already for the Onboarding Individual guide tutorial.
android-demo-device.js
//import fs from "fs"; //node.js environment
const _DEVICE_TAG = Math.random().toString(36).substring(2, 20);
const _SUPER_SECRET = "0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000";
export const thisDevice = {
deviceTag: _DEVICE_TAG,
isDeviceReady: false,
isRegistered: false,
isEnrolled: false,
isEnroledWithFingerprint: false,
isFingerprintAvailable: false,
isFingerprintDeviceChecked: false,
linkinjected: undefined,
isFirstRun: true,
isRecoveryMode: false,
platform: "android_v1",
isDebugTelemetryEnabled: false,
build: "0.0.01",
deepLink: undefined,
pushMessToken: undefined,
dynamicScreensVersion: 1,
data: {
platform: "android",
build: "0.0.01"
}
};
let _timeoutIsScheduledToSave = false;
thisDevice.doEnroll = function (given) {
return new Promise(async (resolve, reject) => {
TheM.newEvent("onboarding enrolling");
return resolve(_SUPER_SECRET);
});
};
thisDevice.doSave = function () {
return new Promise(async (resolve, reject) => {
return resolve();
});
};
thisDevice.storeLocally = function (tag, data) {
console.log("SAVING:", tag, data);
if (!TheM.isBrowser) { //node.js environment
//return fs.writeFileSync(`./secrets/${thisDevice.deviceTag}_${tag}`, JSON.stringify(data, null, 2));
}
if (_timeoutIsScheduledToSave) return true;
_timeoutIsScheduledToSave = true;
setTimeout(() => {
let savable = { ...data };
TheM.common.storeLocally({
tag: tag,
payload: savable
}).then(() => {
TheM.newEvent("modelBank onboarding device ready for logging in");
});
_timeoutIsScheduledToSave = false;
}, 1000);
return true;
};
thisDevice.retrieveLocally = async function (tag, isJSON) {
console.log("RETRIEVING:", tag);
let data;
if (!TheM.isBrowser) { //node.js environment
//data = fs.readFileSync(`./secrets/${thisDevice.deviceTag}_${tag}`, 'utf8');
} else {
data = await TheM.common.retrieveLocally(tag, isJSON ? {} : false);
}
try {
if (data && isJSON) data = JSON.parse(JSON.stringify(data));
} catch (err) {
console.log(data);
console.log(err);
}
return data;
};
thisDevice.doAuthenticate = function (deviceTag) {
return new Promise(async (resolve, reject) => {
if (deviceTag) {
thisDevice.deviceTag = deviceTag;
}
let _dts = new Date();
let _dtsValueString = (_dts).valueOf().toString();
let temp = await thisDevice.retrieveLocally("encryptedServerSecret", true);
let encryptedServerSecret = temp.encryptedServerSecret;
let serverSecret = CryptoJS.AES.decrypt(encryptedServerSecret, _SUPER_SECRET).toString(CryptoJS.enc.Utf8);
let cryptotext = CryptoJS.AES.encrypt((thisDevice.deviceTag) + _dtsValueString, serverSecret).toString();
thisDevice.halfRef = TheM.common.GetRandomSTR(40);
console.log(`deviceTag: ${thisDevice.deviceTag}`);
await TheM.user.doLogin({
"dtsValueString": _dtsValueString,
"deviceTag": thisDevice.deviceTag,
"deviceData": thisDevice.data,
"channel": thisDevice.platform,
"dynamicScreensVersion": thisDevice.dynamicScreensVersion,
"socket": {
halfRef: thisDevice.halfRef
},
"pushMessToken": thisDevice.pushMessToken,
"cryptotext": cryptotext
});
return resolve();
});
};
5. Create a new file in the /demo folder of your project called onboarding-company.html with the following code.
onboarding-company.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>ampliFi</title>
<script>
var TheM;
var TheM_config;
var AMPLIFI_FACE_IMAGE_B64;
var AMPLIFI_DL_FRONT_B64;
var AMPLIFI_DL_BACK_B64;
var sampleDemoClient;
</script>
<script src="../lib/socket.io.min.js"></script>
<script src="../lib/lz-string.min.js"></script>
<script src="../lib/moment.min.js"></script>
<script src="../lib/axios.min.js"></script>
<script src="../lib/crypto-js.min.js"></script>
<script type="module" src="/../src/onboarding_company.js"></script>
<style>
html {
color: white;
background-color: black;
}
</style>
</head>
<body>
<div>
Hit F12 to open the browser console.
Start working with TheM by typing "TheM" into the browser console.
</div>
<br />
<br />
<div>
1. Try typing the following into the browser console to onboard a new company user:
<br /><br />
<code>TheM.onboarding.doSetClient("ccc_oqiwhfgoiuapoiuekdovnmcnv"); //This command will set a default base client (TheM.onboarding.client) that corresponds to the presegment argument chosen, if it is an allowed presegment for this instance of TheM.</code>
<br /><br />
You can view the client you set by typing TheM.onboarding.client into the browser console.
Notice that several fields have been prepared which will now need to be filled out, such as name, address,
mobile number, email, etc.
<br /><br />
2. Open a socket connection. This command enables bidirectional, event-based communication.
<br /><br />
<code>TheM.onboarding.doConnectSocket();</code>
<br /><br />
3. Now, fill out the client fields (name, address, email, mobile. etc.)
You can choose your own sample data or use the sampleClientCompany created for this demo.
You can view the sampleClientCompany by typing <code>sampleDemoClient;</code> into the browser console and
hitting
enter.
Reference specific fields by typing sampleDemoClient.address.address1, sampleDemoClient.email,
sampleDemoClient.mobile, etc.
<br /><br />
<code>
//Information about the company<br />
TheM.onboarding.client.name = "ACME"; //or sampleDemoClient.name;<br />
TheM.onboarding.client.businessName = "ACME INC";<br />
TheM.onboarding.client.businessAddress.addressLine1 = "123 Main Str.";<br />
TheM.onboarding.client.businessAddress.city = "Harrisburg";<br />
TheM.onboarding.client.businessAddress.postalCode = "19335";<br />
TheM.onboarding.client.businessAddress.state = "PA";<br />
TheM.onboarding.client.businessAddress.country = "US";<br />
TheM.onboarding.client.businessPhone = "5556667777";<br />
TheM.onboarding.client.ein = "123452222"; //Must be unique<br />
<br />
//Information about the business representative (a "principal owner or authorized signer representing the company")<br />
TheM.onboarding.client.businessRepresentativeType = "principal_owner"; // or "authorized_signer"<br />
TheM.onboarding.client.address.address1 = "123 Sample Street"; //or sampleDemoClient.address.address1;<br />
TheM.onboarding.client.address.addressLine2 = "Apt 456";<br />
TheM.onboarding.client.address.city = "Harrisburg";<br />
TheM.onboarding.client.address.state = "PA";<br />
TheM.onboarding.client.address.countryCode = "US"; //default is "US"<br />
TheM.onboarding.client.address.postalCode = "12345";
</code>
<br /><br />
4. As we move through the client data, we can test to see if the fields appear valid like so.
<br /><br />
<code>
TheM.onboarding.client.isValidField("businessName"); //returns true if businessName appears to be valid<br />
TheM.onboarding.client.isValidField("businessPhone"); //returns true if businessPhone appears to be valid<br />
TheM.onboarding.client.isValidField("ein"); //returns true if ein appears to be valid<br />
TheM.onboarding.client.businessAddress.isValid; //returns true if businessAddress appears to be valid<br />
TheM.onboarding.client.address.isValid; //returns true if business representative address appears to be valid<br />
</code>
<br /><br />
5. Fill out the remaining client fields.
<br /><br />
<code>
TheM.onboarding.client.email = "name.email@email.test";<br />
TheM.onboarding.client.isValidField("email"); //returns true of email appears to be OK
</code>
<br /><br />
<code>
TheM.onboarding.client.mobile = "1234567890";<br />
TheM.onboarding.client.isValidField("mobile"); //return true if mobile appears to be OK
</code>
<br /><br />
<code>
TheM.onboarding.client.firstName = "Suzy";<br />
TheM.onboarding.client.middleName = "Queue";<br />
TheM.onboarding.client.lastName = "Tester";<br />
TheM.onboarding.client.isValidField("firstName"); //returns true if firstName appears to be valid<br />
TheM.onboarding.client.isValidField("lastName"); //returns true if lastName appears to be valid<br />
<br />
TheM.onboarding.client.dob.day = "15";<br />
TheM.onboarding.client.dob.month = "10";<br />
TheM.onboarding.client.dob.year = "1975";<br />
<br />
TheM.onboarding.client.dob.isValid; //returns true if date appears to be valid<br />
<br />
TheM.onboarding.client.gender = "female";<br />
TheM.onboarding.client.citizenshipCountryCodeA3 = "USA";
</code>
<br /><br />
<code>
TheM.onboarding.client.extra.sex = "male"; // or "female"<br />
TheM.onboarding.client.extra.eyeColor = "BRO"; //optional<br />
TheM.onboarding.client.extra.hairColor = "BLK"; //optional<br />
TheM.onboarding.client.extra.heightMetric = "181"; //optional<br />
TheM.onboarding.client.extra.weightMetric = "85"; //optional
</code>
<br /><br />
<code>
TheM.onboarding.client.ssn = "123456789"; <br /> //Must be unique
TheM.onboarding.client.isValidField("ssn"); //returns true if SSN appears to be OK
</code>
<br /><br />
6. As the client progresses through the onboarding process, set the following flags at some point.
<br /><br />
<code>
TheM.onboarding.isTCSeen = true; //Client has seen the terms&conditions<br />
TheM.onboarding.client.isIntroSeen = true; //Client has seen the first intro screen
</code>
<br /><br />
7. If the client has a referral code, fill it in.
<br /><br />
<code>
TheM.onboarding.client.referral = "";<br />
TheM.onboarding.client.isReferralValid; //returns true if referral code appears to be OK
</code>
<br /><br />
8. Add the business representative document data.
<br /><br />
<code>
TheM.onboarding.client.document.type = "US driving license"; //or "Passport"<br />
TheM.onboarding.client.document.number = "99999999"; //alphanumeric<br />
TheM.onboarding.client.document.issued = "10052019"; //MMDDYYYY<br />
TheM.onboarding.client.document.expires = "08042029"; //MMDDYYYY<br />
TheM.onboarding.client.document.issuingState = "PA"; //Required for driver licenses<br />
TheM.onboarding.client.document.issuanceCountryCodeA3 = "USA";<br />
TheM.onboarding.client.document.issuingCountry_ISO3166_alpha3 = "USA"; //Required for passports<br />
TheM.onboarding.client.document.raw = {}; // an optional JSON blob with arbitrary data<br />
TheM.onboarding.client.isValidDocument; //returns true if document appears to be OK<br />
TheM.onboarding.client.isDocumentAlmostExpired; //returns true if the document expiry date is near
</code>
<br /><br />
9. Check to see if the client is now valid.
<br /><br />
<code>
TheM.onboarding.client.isValid;
</code>
<br /><br />
10. If the client is filled out and valid, then send the data to the server.
<br /><br />
<code>
let temp = await TheM.onboarding.doSendData();<br />
if (!temp) throw "Failed sending the data";
</code>
<br /><br />
11. Convert png images for the documents to base64 and add them too.
<br /><br />
<pre><code>TheM.onboarding.imageQueue.push({<br /> type: "Face image", //selfie of the client business representative<br /> imageBase64: AMPLIFI_FACE_IMAGE_B64 //sample b64 image for testing<br />});<br /></code></pre>
<pre><code>TheM.onboarding.imageQueue.push({<br /> type: "US driving license full document image",<br /> imageBase64: AMPLIFI_DL_FRONT_B64 //sample b64 image for testing<br />});<br /></code></pre>
<pre><code>TheM.onboarding.imageQueue.push({<br /> type: "US driving license back document image",<br /> imageBase64: AMPLIFI_DL_BACK_B64 //sample b64 image for testing<br />});<br />
</code></pre>
Image types required consist of one of the following sets:<br /><br />
* ["Face image", "US driving license front document image", "US driving license back document image"], or<br />
* ["US driving license full front document image", "US driving license full back document image", "Face image"], or<br />
* ["US driving license front document image", "US driving license back document image", "Face image"], or<br />
* ["US driving license full front document image", "US driving license back document image", "Face image"], or<br />
* ["US driving license full front document image", "US driving license full back document image", "Face image"], or<br />
* ["Passport raw image", "Passport full document image", "Face image"], or<br />
* ["Passport full document image", "Face image"]
<br /><br />
12. As soon as the first image is added, `TheM.onboarding.isDocumentCaptured` will be `true`.
<br /><br />
Depending on the comm channel, delivering images may take a few seconds.
Once all the images are sent `TheM.onboarding.imageQueue.isSendingDone` turns `true`.
Once the server accepts the document images, `TheM.onboarding.isDocumentDelivered` will be `true`.
<br /><br />
<code>
TheM.onboarding.isDocumentCaptured;<br />
TheM.onboarding.imageQueue.isSendingDone;
</code>
<br /><br />
13. Now register the filled out client as a prospect.
Behind the scenes, if everything looks good, the prospect will be converted to a new user.
Once converted, the new user will be able to log in for the first time.
<br /><br />
<pre><code>TheM.on("modelBank converted from prospect to user", () => {<br /> console.log("SUCCESS: the user has been registered successfully");<br >});<br />await TheM.onboarding.doRegister({ pin: "1234" });<br />
</code></pre>
14. After the registration is successful, the user can log in for the first time on this device.
<br /><br />
<code>
TheM.thisDevice.doAuthenticate();
</code>
<br /><br />
</div>
</body>
</html>
6. Start a server in the root folder of your project.
7. Open a browser and enter the following URL: http://localhost:8000/demo/
8. Click on the link for "onboarding-company.html" and follow the instructions to onboard a new business prospect, convert the prospect to a user, and log the user in for the first time.