Create Account Widget

The following applications can be bootstrapped on to your own website using a combination of adding a JavaScript tag to your website and calling a few JavaScript functions. These tools will then create an iframe that loads the specific application you wish to integrate with.

Get started

Script tag

First thing you'll need is to grab the script code for your environment, depending on if you're working in our Sandbox or in Production.

  • <script type="text/javascript" src="https://bootstrapper.primetrust-cdn.com/bootstrap.js" defer></script>

  • <script type="text/javascript" src="https://sandbox.bootstrapper.primetrust-cdn.com/bootstrap.js" defer></script>

You can place this script tag in your <head> or before your </body> tag. The scripts are defer'd to ensure that the complete DOM is available.

Initialization

Once you've included this script on your website, you'll need to create the code that will bootstrap this application and render the iframe.

Your code must assign a function to window.primeTrustReady that accepts 1 argument, an instance of the Prime Trust Embedding API. This function will be run once embedding is possible. You can set this function up before or after loading the the script tag.

This is an example of initializing our account creation application:

<script type="text/javascript" src="https://bootstrapper.primetrust-cdn.com/bootstrap.js" defer></script>
<script type="text/javascript">
console.log('[primetrust] 1. Loading Prime Trust Embedding API');
window.primeTrustReady = function (pt) {
console.log('[primetrust] 2. Loading embedded account creation...');
// or launchCreditCard, launchCreateCompany, launchCreateNaturalPerson
pt.launchCreateAccount({
target: document.getElementById('main'),
// this token is generated server-side with our `/v2/resource-tokens` API
resourceTokenHash: 'TOKEN',
events: {
loaded: function () {
console.log('[primetrust] 3. Embedded account creation loaded!')
},
resourceCreated: function (accountId) {
console.log('[primetrust] 4. Account created with ID: ', accountId);
}
}
});
};
</script>

Applications

Shared options

+target - HTMLElement or string of an element's id: target to create iframe inside. This should be a block-level element (div, section, etc) with no children.

  • theme - object: an object of hexadecimal colors to customize the appearance of the embedded applications. You only need to specify the colors you wish to override. The most common values to change are primary (controls the accent color that defaults to blue) and success (controls the color of the Next and Previous buttons).

Defaults:

{
...
theme: {
background: "#ffffff",
foreground: "#000000",
primary: "#1890ff",
success: "#69e2a0",
error: "#f5222d",
},
...
}
  • resourceTokenHash - string: used to make authenticated API calls cand created via the /v2/resource-tokens or /v2/credit-card-resources API

  • width - number: overrides the default width of the iframe, currently defaults to 632 pixels

  • height - number: overrides the default height of the iframe, currently defaults to 850 pixels

  • events: - object: an object of callbacks. All applications have a loaded event, but individual applications will have other events available as well.

Example of a loaded event hook:

{
...
events: {
loaded: function () {
console.log('The Prime Trust application is ready for user input');
}
},
...
}

launchCreateAccount

An application to create a new account with all the necessary KYC information and documentation.

Resource Token Hash Request

// POST /v2/resource-tokens
{
"data": {
"type": "resource-tokens",
"attributes": {
"resource-type": "user",
"resource-id": "{{ id (uuid) of your user }}",
"resource-token-type": "create_account",
// optional, defaults shown
"data": {
// optional, default shown. this is used to limit the account types permissible by the widget
"account_types": ["custodial", "ira_trust"],
// optional, default shown. this is used to limit the owner of the account
"contact_types": ["natural_person", "company"]
}
}
}
}
// 201 Created
{
"data": {
"type": "resource-tokens",
"id": "TOKEN_ID",
"attributes": {
...
"token": "{{ token to use for embed }}"
},
...
},
...
}

The token hash you use with the embedded application in available in the resource-token-hash attribute.

Events

  • resourceCreated required: receives one argument, the newly-created account's id

Example

<script type="text/javascript" src="https://bootstrapper.primetrust-cdn.com/bootstrap.js" defer></script>
<script type="text/javascript">
console.log('[primetrust] 1. Loading Prime Trust Embedding API');
window.primeTrustReady = function (pt) {
console.log('[primetrust] 2. Loading embedded account creation...');
pt.launchCreateAccount({
target: document.getElementById('main'),
// from `resource-token-hash` in the request above
resourceTokenHash: 'TOKEN',
events: {
loaded: function () {
console.log('[primetrust] 3. Embedded account creation loaded!')
},
resourceCreated: function (accountId) {
console.log('[primetrust] 4. Account created with ID: ', accountId);
}
}
});
};
</script>

launchCreateNaturalPerson

An application to add a new contact of type natural_person to an existing account.

Resource Token Hash Request

// POST /v2/resource-tokens
{
"data": {
"type": "resource-tokens",
"attributes": {
"resource-type": "account",
"resource-id": "{{ id (uuid) of the account to add the contact to }}",
"resource-token-type": "create_contact",
"data": {
"contact_types": ["natural_person"]
}
}
}
}
// 201 Created
{
"data": {
"type": "resource-tokens",
"id": "TOKEN_ID",
"attributes": {
...
"token": "{{ token to use for embed }}"
},
...
},
...
}

The token hash you use with the embedded application in available in the resource-token-hash attribute.

Events

  • resourceCreated required: receives one argument, the newly-created contact's id

Example

<script type="text/javascript" src="https://bootstrapper.primetrust-cdn.com/bootstrap.js" defer></script>
<script type="text/javascript">
console.log('[primetrust] 1. Loading Prime Trust Embedding API');
window.primeTrustReady = function (pt) {
console.log('[primetrust] 2. Loading embedded account creation...');
pt.launchCreateNaturalPerson({
target: document.getElementById('main'),
// from `resource-token-hash` in the request above
resourceTokenHash: 'TOKEN',
events: {
loaded: function () {
console.log('[primetrust] 3. Embedded natural person creation loaded!')
},
resourceCreated: function (contactId) {
console.log('[primetrust] 4. Contact created with ID: ', contactId);
}
}
});
};
</script>

launchCreateCompany

An application to add a new contact of type company to an existing account.

Resource Token Hash Request

// POST /v2/resource-tokens
{
"data": {
"type": "resource-tokens",
"attributes": {
"resource-type": "account",
"resource-id": "{{ id (uuid) of the account to add the contact to }}",
"resource-token-type": "create_company",
"data": {
"contact_types": ["company"]
}
}
}
}
// 201 Created
{
"data": {
"type": "resource-tokens",
"id": "TOKEN_ID",
"attributes": {
...
"token": "{{ token to use for embed }}"
},
...
},
...
}

The token hash you use with the embedded application in available in the resource-token-hash attribute.

Events

  • resourceCreated required: receives one argument, the newly-created contact's id

Example

<script type="text/javascript" src="https://bootstrapper.primetrust-cdn.com/bootstrap.js" defer></script>
<script type="text/javascript">
console.log('[primetrust] 1. Loading Prime Trust Embedding API');
window.primeTrustReady = function (pt) {
console.log('[primetrust] 2. Loading embedded account creation...');
pt.launchCreateCompany({
target: document.getElementById('main'),
// from `resource-token-hash` in the request above
resourceTokenHash: 'TOKEN',
events: {
loaded: function () {
console.log('[primetrust] 3. Embedded company creation loaded!')
},
resourceCreated: function (contactId) {
console.log('[primetrust] 4. Contact created with ID: ', contactId);
}
}
});
};
</script>
Last updated on