Custom onboarding experience
This approach requires the developer to create all the forms to collect the sub-merchant information with some differences in the way that you will need to collect the data depending on the sub-merchant type.
Government or Public corp
This is the most simple case of both, in a few words, you only need to fill the Provisioning Request and send it, summarizing onboarding in a single step. Something that you need to know before sending this kind of request:
- Valid ownership types :
- PublicCorporation
- Government
Individual or Bussines corp
For these types of sub-merchants and their bank payment accounts we use plaid to connect to their banks, for that we provide Jupiter-link which will allow you to your users plaid and provide the user with a secure way to connect to their banks.
Some considerations of payment request:
- Available ownershiptTypes :
- For Individual type:
- SolePropietorship
- For business type:
- PrivateCorporation
- SoleProprietorship
- LLC
- Partnership
- NonProfit
- Trust
- For Individual type:
Once all the necessary information is collected, the provisioning API will allow the platform to provision the sub-merchant account in one step.
You can see how the provisioning query works in our API references.
Jupiter Link integration
In the following example, we will show you a simple way to instantiate JupiterLink and fill in the payment details, and finally, you will see an example of a complete provisioning request.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JupiterLink</title>
<!-- LOAD THE JUPITER LINK CDN -->
<script type="text/javascript" src="https://developer.jupiterhq.com/jupiter-link/jupiterLink.js"></script>
<!-- jQuery for DOM manipulation -->
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<!-- Axios for https request -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"
></script>
</head>
<body>
<div class="container p-5">
<div class="row justify-content-center">
<div class="col-12">
<div class="card ">
<div class="card-body overflow-auto">
<h5 class="card-title text-center">JupiterLink example</h5>
<ol>
<li>Load the JupiterLink CDN.</li>
<li>Get the LinkToken. </li>
<li>Instantiate the client with the obtained credential</li>
<li>Bind a button to open open the JupiterLink UI.
<div class="row justify-content-center my-3">
<div class="col-8 text-center">
<button class="btn btn-block btn-primary" id="connectButton" onclick="openLink()">
Connect to bank
</button>
</div>
</div>
</li>
<li>Obtain the public token and the available accounts.</li>
<li>Select an account..</li>
<select id="accountList" style="display: none;" onChange="selectAccount(this.value)"></select>
<li>Make the provisioning request.</li>
</ol>
<div>
<p class="card-text overflow-auto">
<pre id="requestContent p-0 m-0" style="max-height: 500px">
<code id="provisioningRequest" class="languaje-json m-0" lang="json"><br></code>
</pre>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="jupiterForm"></div>
<script>
/**
* Here we hardcode the provisioning request here to focus only in the JupiterLink integration
*
* Here we coded the provisioning request to focus only on the JupiterLink integration.
* In your case, you must complete the following data with the UI solution that you provide to your customers to collect merchant data.
*
*/
var provisioningRequest = {
name: 'demo',
email: 'demo@testdomain.com',
mobileNumber: '10142129122',
application: {
type: 'government',
business: {
legalName: 'Buzz Inc',
dbaName: 'bbc',
federalTaxId: '234234234',
phoneNumber: '2232322323',
address: {
streetNum: '123',
streetName: 'main street',
city: 'ny',
state: 'NY',
postalCode: '10001',
synched: false,
country: 'US'
},
websiteUrl: 'https://buzz.com',
expectedMonthlyVolume: 25000,
businessEstablishedDate: '2009-12-10',
ownershipType: 'government',
mccCode: '5812'
},
contacts: [
{
firstName: 'John',
middleName: 'Anthony',
lastName: 'Doe',
phoneNumber: '2149244553',
email: 'johndoe@mail.com'
}
]
},
bankAccount : {
accountId: "",
publicToken: "",
linkSessionId: ""
}
};
// Get the html element to handle the request flow
var connectButton = document.getElementById('connectButton')
var payloadSample = document.getElementById('provisioningRequest')
connectButton.disabled =true
connectButton.textContent = 'Loading'
function openLink() {
// is triggered by the 'Get bank accounts' button
if (jupiterLink.client)
jupiterLink.client.open();
}
function selectAccount(account) {
// changes the selected account and updates the information on the screen.
provisioningRequest.bankAccount.accountId = account
payloadSample.textContent = JSON.stringify(provisioningRequest,null,2)
}
// ======================SHOULD NOT CHANGE=============================
async function getLinToken(){
// This should point to your own backend server.
const endpointUrl = 'http://localhost:3000/get-link'
const endpointMethod = 'GET'
// Obtain the credentials to start the form by querying the api securely connected to jupiter services.
fetch(endpointUrl, {
method: endpointMethod,
})
.then((response) => response.json())
.then(data=>{
// Enable button
connectButton.textContent = 'Get bank accounts'
connectButton.disabled =false
// Define the callback that will be used on success event to retrieve the bank accounts
const onSuccess = (publicToken, accounts, link_session_id) => {
if(accounts.length > 0){
// Having retrieved the accounts, we disable the button again.
connectButton.disabled = true
connectButton.textContent = 'Accounts retrieved'
const accountList = document.getElementById('accountList')
// Show the accounts information to select one of them
accountList.style.display= 'block'
for(const account of accounts) {
accountList.innerHTML += ``
}
}
// Fill in the required parameters
provisioningRequest.bankAccount.accountId = accounts[0].id // First account by default
provisioningRequest.bankAccount.publicToken = publicToken
provisioningRequest.bankAccount.linkSessionId = link_session_id
// We update the content of the request.
payloadSample.textContent = JSON.stringify(provisioningRequest,null,2)
};
jupiterLink.load(data.linkToken, onSuccess);
})
}
getLinToken() //Method call to initialize the client
</script>
</body>
</html>
Interactive demo
We provide an interactive demo to check the code in action.
Was this page helpful?
Search our blog, contact support. You can also chat live with other developers.
