JavaScript ES Module | Parallel Developer Documentation

Parallel Developer Documentation Legacy – v1.x

This is documentation for Parallel Developer Documentation Legacy – v1.x, which is no longer actively maintained.

For up-to-date documentation, see the latest version (Current – v2.x).

Version: Legacy – v1.x

Manually load the parallel.js script

This example uses the most basic <script> integration method for an HTML page with limited JavaScript, but we also provide NPM modules (see below).

Copy the following code into the <body> of your website where you want the button to appear. You'll want to call the Parallel.init() function with your configuration options.

<!-- a space for messaging -->
<div id="message"></div>

<!-- any element with this class will get a button -->
<div class="parallel-login-button"></div>

<script src="https://app.parallelmarkets.com/sdk/v1/parallel.js"></script>

<script>
  // Initialize the Parallel SDK with config options.  This example uses our "demo" sandbox.
  Parallel.init({ client_id: 'your_client_id', environment: 'demo', flow_type: 'overlay' })
  
  // on success - user agreed to share status
  function success(result) {
    document.getElementById('message').innerHTML = 'Thanks for sharing your info.'
  }
  
  function failure(result) {
    var msg = document.getElementById('message')
    if (result.status == 'not_authorized') {
      msg.innerHTML = 'Please consent to access to complete your onboarding.'
    } else {
      console.error(result)
      msg.innerHTML = 'Looks like there was an issue.'
    }
  }

Parallel.subscribeWithButton(success, failure)
</script>

After calling Parallel.init, you just need to call Parallel.subscribeWithButton with two functions:

  1. A function to be called on successful login and consent to sharing the details requested.
  2. A function to be called if the user does not consent to sharing their details.

This call to Parallel.subscribeWithButton will also handle showing the Parallel Passport button (in any div with the class parallel-login-button) and then hiding it when the user authenticates.

Load parallel.js as an ES Module

You can also import the loader as an ES Module and load the SDK asynchronously.

Installation

Install the Parallel library vanilla loader from the npm public registry.

npm install --save @parallelmarkets/vanilla

Usage

The loadParallel function returns a promise that resolves once the SDK is loaded and ready. See below for an example using the async/await syntax in vanilla JavaScript.

import { loadParallel } from '@parallelmarkets/vanilla'

// load the parallel library with the given configuration information
const parallel = await loadParallel({ client_id: '123', environment: 'demo' })

// any element with the "parallel-login-button" class will render a button
parallel.showButton()

Initiating a Parallel Flow

After the Parallel SDK has been initialized (either via Parallel.init() if manually loaded, or via loadParallel() via the ES Module), you can show a Parallel button or explicitly initiate a flow.

To automatically load a Parallel Passport button on your page, just follow these steps:

  1. Add the HTML class parallel-login-button to the parent element where you want the button to appear.
  2. Call showButton(), which will then find any elements with that class and render a login button child element for each.

For instance, to add a "Parallel Passport" button somewhere on your page:

<div class="parallel-login-button"></div>

import { loadParallel } from '@parallelmarkets/vanilla'

// wait for the loading to finish before calling any functions
const parallel = await loadParallel({ client_id: '123', environment: 'demo', flow_type: 'overlay' })

parallel.showButton()

Alternatively, you can provide your own button or link and call Parallel.login() when you're ready to send the user into an authentication flow.

<a href="#" onClick="Parallel.login()"> Log in with Parallel </a>

Getting OAuth Access Tokens

If you're using the JS SDK, you do not need to worry about calling any APIs to fetch authentication tokens. The entire process for securely retrieving the OAuth access_token and refresh_token payload is entirely handled for you automatically.