React component for integrating RIBBIT CONNECT into your webpage
Don't use react? Here are a few more implementation methods we provide:
- Pure JavaScript
- Angular (coming soon)
- React Native (coming soon)
With npm
:
npm install --save react-ribbit-connect
With yarn
:
yarn add react-ribbit-connect
Please refer to the official RIBBIT CONNECT docs for more information.
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={...}
/>
);
}
}
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 |
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) |