@blissapi/react-connect NPM

BlissAPI Connect For React

Allow your users to quickly integrate with several services with BlissAPI. The @blissapi/react-connect introduces an easy-to-use React hook for integrating with your web app.

Install

# NPM
npm install --save @blissapi/react-connect

# Yarn
yarn add @blissapi/react-connect

Usage

Use React hook to start the Connect flow. Listen to the callbacks to know when an account has been linked or whether the flow has been cancelled. The callback will give you the information about the account added/updated - you may also retrieve this information by using webhooks or the API.

import { useBlissConnect } from '@blissapi/react-component';

const LinkAccountButton = () => {
  const { startConnect } = useBlissConnect();

  const startFlow = useCallback(async () => {
    const sessionToken = await retrieveConnectSessionToken();
    startConnect({ sessionToken });
  }, [startConnect]);

  return (
    <button onClick={startFlow}>Connect Account</button>
  );
};

Connect Options

When starting the flow, you may pass a few options:

const { startConnect } = useBlissConnect();

startConnect(options)

Name	Type	Required	Description
sessionToken	string	Yes	Connect session token created in the backend. The session token allows users to manage their accounts in the frontend. You may limit a connect session token to selected categories or to a given service
apiUrl	string	No	Which API instance should it connect to. It will automatically infer it from your connect session.
onSuccess(account)	function	No	Called when an account is successfully linked. The `account` param gives you information about the linked account.
onCancel()	function	No	Called when the connect flow is closed without an account being linked.
onClose()	function	No	Called every time the connect flow is closed regardless of whether an account has been linked or not.