react-ribbit-connect

React component for integrating RIBBIT CONNECT into your webpage

Don't use react? Here are a few more implementation methods we provide:

1. Pure JavaScript
2. Angular (coming soon)
3. React Native (coming soon)

Install

With npm:

npm install --save react-ribbit-connect

With yarn:

yarn add react-ribbit-connect

Documentation

Please refer to the official RIBBIT CONNECT docs for more information.

Usage

import  {  RIBBITConnect  }  from  "react-ribbit-connect";

const App extends React.Component {
    // ...
    render() {
        return (
            <RIBBITConnect
            token={this.state.token} // see documentation on how to get a token
            settings={{
                curtainColor: 'rgba(0,0,0,0.5)',
            }}
            onComplete={this.onComplete}
            // onLaunch={...} // fired on ready
            // onMessage={...}
            // onExit={...}
            />
        );
    }
}

All Props

Name	Type	Default	Description
token	string		Token recieved from /CONNECT/session/ endpoint
open	boolean	false	Whether or not CONNECT should be open or not
language	string	en	Optional language to be displayed to the user (Translation must be added within CONNECT settings. More coming soon.)
style	object		Optional styles to be applied to the CONNECT container
className	string		Optional class to be added to the CONNECT container
inline	boolean	false	Whether or not CONNECT should display inline (default is popup)
fullscreen	boolean	false	Whether or not CONNECT should display in full-screen mode (for native/mobile app implementation)
settings	object		Additional settings (see below)
getContext	function		Can be used to get the RIBBIT CONNECT context
onMessage	function		Generic message handler that fires for every one of the events below function(eventName, eventData) => void
onLaunch	function		function(eventData) => void
onExit	function		function(eventData) => void
onComplete	function		function(eventData) => void
onBankLoginSelected	function		function(eventData) => void
onManualEnrollmentSelected	function		function(eventData) => void
onNoAccountsFound	function		function(eventData) => void
onBankNotFound	function		function(eventData) => void
onBankLogin	function		function(eventData) => void
onLinkOpen	function		function(eventData) => void

Settings

Name	Type	Default	Description
curtainColor	string		Color of the popup background curtain. Examples: #FFF and rgba(0,0,0,0.5)
curtainAllowClose	boolean	true	Whether or not the user clicking on the popup background curtain should close the CONNECT popup
closeButton	boolean	false	Whether a close button should display in the top right corner of the widget. (on click fires the onExit method)