# Parallel Developer Documentation **Next 🚧** version

For up-to-date documentation, see the **[latest version](https://developer.parallelmarkets.com/docs/javascript/sdk)** (Current – v2.x).

Version: Next 🚧

The Parallel JavaScript SDK includes the following functions on the `Parallel` object if you're including our JavaScript directly or via the [NPM Module](https://www.npmjs.com/package/@parallelmarkets/vanilla).

- React Module
- ES Module
- Manual Loading

```javascript
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>

}
```

```javascript
import { loadParallel } from '@parallelmarkets/vanilla'

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

// initiate a flow

parallel.login()
```

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

<script>

Parallel.init({

client_id: '123',
    
    environment: 'demo',
    
    flow_type: 'overlay',
    
  })

// initiate a flow

Parallel.login()

</script>
```

| Function                            | Description                                                                                                         |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `getProfile(callback, errback)`    | Get the profile details (including unique `id`) for the individual or business that completed a Parallel flow.   |
| `getLoginStatus(callback)`          | Get the login status of a user.                                                                                    |
| `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.                                                                          |
| `login(opts)`                       | Initiate a Parallel Markets user login flow explicitly.                                                             |
| `logout()`                          | End the user's session on your site.                                                                                |
| `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](https://developer.parallelmarkets.com/docs/next/javascript/events).            |
| `subscribeWithButton(callback, errback)`| Show the Login button if user is not authenticated, and call `callback` on authentication.                      |
| `unsubscribe(event, callback)`      | Un-subscribe a callback from any [events](https://developer.parallelmarkets.com/docs/next/javascript/events).   |

## Optimizing the User Experience

In production, 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()`.

### Sample

```javascript
Parallel.login({
  first_name: 'Richard',
  last_name: 'Branson',
  email: 'rb@virgin.com',
})
```

## Footnotes

1. In the sandbox environment, users will be asked to set a password in order to initiate a flow. For more information on what to expect in the sandbox environment, please refer to the [Sandbox End-User Experience](https://developer.parallelmarkets.com/docs/next/sandbox-quickstart#sandbox-end-user-experience).