Version: Current – v2.x

On this page

If you're using React, you can use our React hooks library to make integration quick and easy.

Three Minute Setup

If you're looking for the fastest way to test things out, check out our Example React App.

Setup

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

npm install --save @parallelmarkets/react @parallelmarkets/vanilla

ParallelProvider

The ParallelProvider allows you to use our hooks and access the Parallel object in any nested component. Render a ParallelProvider at the root of your React app so that it is available everywhere you need it.

To use the ParallelProvider, call loadParallel from @parallelmarkets/vanilla with your configuration options. The loadParallel function asynchronously loads the parallel.js script and initializes a Parallel object. Pass the returned Promise to ParallelProvider.

import { loadParallel } from '@parallelmarkets/vanilla'
import { ParallelProvider } from '@parallelmarkets/react'

const parallel = loadParallel({ client_id: '123', environment: 'demo', flow_type: 'overlay' })

const App = () => (
  <ParallelProvider parallel={parallel}>
    <YourRootComponent />
  </ParallelProvider>
)

const app = document.getElementById('main')
const root = createRoot(app)
root.render(<App />)

info To best leverage Parallel's fraud detection, include the call to loadParallel across your app/site. This allows Parallel to detect suspicious behavior that may be indicative of fraud as users interact with your website.

Initiating a Parallel Flow

This is a more complete example, showing use of the useParallel hook in a child component. Additionally, this example shows use of the PassportButton component, that, when clicked, initiates a Parallel flow. You can simply call parallel.login() as an alternative to showing the PassportButton component.

import React
import { loadParallel } from '@parallelmarkets/vanilla'
import { ParallelProvider, useParallel, PassportButton } from '@parallelmarkets/react'

const AccreditationArea = () => {
  const { parallel, loginStatus } = useParallel()
  if (!loginStatus) return null
  return (
    <>
      <h1>Status: {loginStatus.status}</h1>
      {loginStatus.status !== 'connected' ? (
        <PassportButton />
      ) : (
        <button onClick={parallel.logout}>Log Out</button>
      )}
    </>
  )
}

const parallel = loadParallel({ client_id: '123', environment: 'demo', flow_type: 'overlay' })

const App = () => (
  <ParallelProvider parallel={parallel}>
    <AccreditationArea />
  </ParallelProvider>
)

const app = document.getElementById('main')
const root = createRoot(app)
root.render(<App />)

Getting the Parallel ID

The result of any successful authentication event will include an authResponse field that indicates the status of the handoff. Once the status is connected, you can call the getProfile() function to get the Parallel ID for the user or business that completed the flow (along with other profile information). That ID should be saved to your backend along with your internal ID for the current session so your server can make ongoing calls to get/update information for the user/business.

Here's an implementation that demonstrates persisting the Parallel ID to an example backend endpoint.

const ParallelIDSaver = () => {
  const { loginStatus, getProfile } = useParallel()

useEffect(() => {
    if (loginStatus?.status !== 'connected') return
    getProfile().then((response) => {
      fetch('/save-parallel-id', {
        body: JSON.stringify({
          parallelId: response['profile']['id'],
          internalId: getInvestorId(),
        }),
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      })
    })
  }, [loginStatus, getProfile])

if (loginStatus?.status !== 'connected') return null
  return <p>Thanks for providing your information!</p>
}