This documentation covers the basics of Instnt AcmeBank Demo. Put simply, this Acmebank Demo is a standard React form; React is an open-source front-end developer library utilized by Instnt to create a more streamlined and elegant integration with your company's workflows. For a more detailed look at this implementation, visit Instnt's documentation library.
- Getting Started
- Rendering a Standard Signup Workflow with Instnt Acmebank
- Rendering a Custom Signup Workflow with Instnt React SDK
- Submit Workflow to Instnt Using the JavaScript Helper Function
- Submit Workflow to Instnt via API
- Instnt's Sandbox
- FAQ
In order to begin utilizing the Instnt Acmebank Demo, enter the following command to install Instnt's React components:
npm i @instnt/instnt-react-js
This process should only take a few moments. Once complete, import Instnt's React Workflow component:
import { InstntSignUp } from '@instnt/instnt-react-js'
InstntSignUp imports a boilerplate Instnt workflow with the following fields:
- Email Address
- First Name
- Surname
- Mobile Number
- State
- Street Address
- Zip code
- City
- Country
- Submit My Workflow Button
Now that the components have been installed and imported, it's time to set up the function using the following command:
function App () {
scripts": {
"start": "export REACT_APP_FORM_ID=v847998100000 ; react-scripts start",
"build": "react-scripts build"
},
-
formId
- a Workflow ID is required in order to properly execute this function. For more information concerning Workflow IDs, please visit Instnt's documentation library. -
The
sandbox
parameter is added to connect the workflow components to Instnt's Sandbox environment. More information concerning the sandbox environment is available in this quick start guide. -
redirect
- Optional. Default: true. When set to false, user will not be automatically redirected the the success/failure page -
onResponse
- Optional. Event handler invoked after the response is received from Instnt. The handler will be passed to parameters: onResponse(error, data).error
will contain error information if one occurred.
With the above code complete, start the application by running the following command:
npm start
A rotating React icon will appear onscreen as the application takes a few moments to load. Once the application has loaded, a fully rendered workflow will appear including a unique signature and expiring token.
If you'd like to integrate Instnt's back-end functionality with your company's UI, import the InstntCustomSignUp workflow and set the data object parameters using the following commands:
import { InstntCustomSignUp } from '@instnt/instnt-react-js'
const submitMyForm = () -> {
window.instnt.submitCustomForm(data);
};
The import command imports Instnt's Custom Signup workflow, which hides all of the standard workflow fields and application functionality when rendered, allowing for the addition of new workflow fields a la carte.
The second command takes all of the data objects referenced throughout your sign-up process via your company's own UI and passes them through the InstntCustomSignUp function, allowing for your UI to integrate with Instnt without having to change a pixel.
To set up the function, enter the following command:
const onResponse = (error, data) => {
console.log(`Decision: ${data['decision']}`)
}
return (
<div className='App'>
<AppBar position='static'>
<Tabs value={value} onChange={handleChange}>
<Tab label='Standard Form' />
<Tab label='Custom Form' />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<InstntSignUp sandbox formId={process.env.REACT_APP_FORM_ID} />
const submitMyForm = () -> {
window.instnt.submitCustomForm(data);
};
This submission method can be utilized for submitting data from either the front end or the backend by collecting data from the applicant, using Instnt SDK's functionality window.instnt.getToken()
to retrieve an instnt_token
that encapsulates Instnt system data as well as the applicant's device and behavioral information, and then submitting all of the data to Instnt.
When submitting this data from the backend, the instnt_token
should be collected on the web app and transferred to the backend.
const submitFormViaAPI = () => {
// 'data' contains user data fields
// Get system information using window.instnt.getToken() and send it along with data using 'instnt_token' key
const token = window.instnt.getToken();
const dataWithToken = { ...data, instnt_token: token };
fetch('https://sandbox-api.instnt.org/public/submitformdata/v1.0'), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(dataWithToken),
})
.then((response) => response.json())
.then((data) => {
console.log(data);
});
};
Instnt's Sandbox is a static environment that assesses provisioned synthetic identities that we give you for onboarding and testing purposes. The provisioned identities contain:
- Email address
- First name
- Last name
- Phone number
- Physical address (city, state, zip)
- IP address
Please contact [email protected] for more information concerning access to the sandbox environment.
After setting up the InstntCustomSignUp function, simply install the following Material UI components and import the text field using the following commands:
npm install @material-ui/core
import { TextField } from '@material-ui/core'
Once the components have been installed and imported, collect data from the user. Example:
<TextField
id='email'
type='email'
label='Email'
value={data['email']}
onChange={onChange}
/>
The 'email' text here is used as an example and can be anything you'd like to have appear on the workflow. Always include the value and onChange fields as written in the example above, as they mark the text field as data to be passed through the InstntCustomSignUp function.
The minimum supported version of React is v16.8. If you use an older version, upgrade React to use this library.