The Parallel JavaScript SDK includes the following functions on the Parallel object if you're including our JavaScript directly or via the NPM Module.
- React Module
- ES Module
- Manual Loading
import { useParallel } from '@parallelmarkets/react'
const ButtonBox = () => {
const { parallel } = useParallel()
// library may still be loading
if (!parallel) return null
// you can now call any of the functions below on the `parallel` variable
return <button onClick={() => parallel.login()}>Custom Parallel Button</button>
}
| Function | Description |
|---|---|
getProfile(callback, errback) | Get the profile details (including unique id) for the individual or business that completed a Parallel flow. This can only be called if the user has authorized sharing information and completed a flow. |
getLoginStatus(callback) | Get the login status of a user. It takes a single argument that is a callback function, which will be called once the user's login status can be determined. The callback function will be called with one argument described here. |
hideButton() | Hide the Parallel Login button that was rendered inside any elements on the page with the class parallel-login-button. |
init(config) | Initialize the Parallel JavaScript SDK. Takes a single argument that is an object containing a client_id and any other desired configuration options. |
login(opts) | Initiate a Parallel Markets user login flow explicitly. This is useful if you want to start a flow based on some user action (apart from clicking a Parallel Passport button). Takes a single optional argument that is an object. The following optional keys are supported:
|
logout() | End the user's session on your site. Note that this will only invalidate the authentication tokens from the context of your site and will not affect the user's session (if any) on parallelmarkets.com. |
showButton() | Show the Parallel Login button inside any elements on the page with the class parallel-login-button. |
subscribe(event, callback) | Subscribe to a range of events by passing a string value which is the name of the event and defining a callback function for when the event fires. The callback will take in a response object containing any relevant status values, errors, authentication responses, etc. |
subscribeWithButton(callback, errback) | Show the Login button if user is not authenticated, and if/when user is authenticated callback will be called with one argument. On authentication issue or user cancelation, errback will be called. |
unsubscribe(event, callback) | Un-subscribe a callback from any events previously subscribed to using subscribe(). |
Optimizing the User Experience
In production1, users will be asked to provide their first name, last name and email address before beginning a flow. If you have already know those details for your user, you can supply values for first_name, last_name and email in the call to Parallel.login(). When all 3 values are present, the user will forward automatically to the email confirmation screen in the Parallel flow.
This makes the process faster, more consistently accurate and creates a seamless bridge between your site and the Parallel experience.
Sample
Parallel.login({
first_name: 'Richard',
last_name: 'Branson',
email: 'rb@virgin.com',
})
-
In the sandbox environment, users will be asked to set a password in order to initiate a flow. As such, prefilling will work, but the "auto-advance" feature will not. For more information on what to expect in the sandbox environment, please refer to the Sandbox End-User Experience. ↩