Calling Server APIs

Once you have confirmed that a user is logged in and has agreed to share their information, you can call the server API methods directly from JavaScript using the api() function. This function accepts an endpoint path as the first argument and a callback function as the second.

Profile API Call

For example, here's some code that calls the Profile API (i.e., the /me endpoint):

React Module

const ProfileBox = () => {
  const { parallel, loginStatus } = useParallel()
  const [profileResponse, setProfileResponse] = useState(null)

  useEffect(() => {
    // user isn't authenticated or library isn't loaded yet
    if (loginStatus?.status === 'connected') parallel.api('/me', setProfileResponse)
  }, [parallel, loginStatus])

  if (!profileResponse) return null

  if (profileResponse.type === 'individual') {
    return <p>You are an individual named {profileResponse.profile.first_name}</p>
  } else {
    return <p>Your are a business named {profileResponse.profile.name}</p>
  }
}

ES Module

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.getLoginStatus(({ status }) => {
  // check to make sure the user is logged in first
  if (status !== 'connected') return

  parallel.api('/me', ({ type, profile }) => {
    console.log('You are a ' + type)
    if (type === 'individual') {
      console.log('Your name is ' + profile.first_name)
    } else {
      console.log('Your business is ' + profile.name)
    }
  })
})

Manual Loading

Parallel.getLoginStatus(({ status }) => {
  // check to make sure the user is logged in first
  if (status !== 'connected') return

  Parallel.api('/me', function ({ type, profile }) {
    console.log('You are a ' + type)
    if (type === 'individual') {
      console.log('Your name is ' + profile.first_name)
    } else {
      console.log('Your business is ' + profile.name)
    }
  })
})

Accreditations API

Here's an example that calls the Accreditations API (i.e., the /accreditations endpoint):

React Module

const ProfileBox = () => {
  const { parallel, loginStatus } = useParallel()
  const [accreditationsResponse, setAccreditationsResponse] = useState(null)

  useEffect(() => {
    // user isn't authenticated or library isn't loaded yet
    if (loginStatus?.status === 'connected') {
      parallel.api('/accreditations', setAccreditationsResponse)
    }
  }, [parallel, loginStatus])

  if (!accreditationsResponse) return null

  if (accreditationsResponse.accreditations.some(({ status }) => status === 'current')) {
    return <p>You are currently accredited!</p>
  } else {
    return <p>You are not currently accredited. But with Parallel you can get accredited!</p>
  }
}

ES Module

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.getLoginStatus(({ status }) => {
  // check to make sure the user is logged in first
  if (status !== 'connected') return

  parallel.api('/accreditations', ({ accreditations }) => {
    const accredStatus = accreditations.some(({ status }) => status === 'current') ? 'yes' : 'no'
    console.log('Accreditation status: ' + accredStatus)
  })
})

Manual Loading

Parallel.getLoginStatus(({ status }) => {
  // check to make sure the user is logged in first
  if (status !== 'connected') return

  Parallel.api('/accreditations', ({ accreditations }) => {
    const accredStatus = accreditations.some(({ status }) => status === 'current') ? 'yes' : 'no'
    console.log('Accreditation status: ' + accredStatus)
  })
})