@railzai/railz-connect

Railz is the Accounting Data as a Service™ solution that makes sense of your business customers' financial data.

Railz Connect

Railz Connect™ is a plug-and-play widget that provides a secure, elegant authentication flow for each integration that Railz supports. Railz Connect™ makes it secure and easy for business customers to connect their financial data to Railz.

Install

With npm:

npm install --save @railzai/railz-connect

With yarn

yarn add @railzai/railz-connect

Documentation

Refer to the Official Railz Connect docs for more detailed description.

Examples

Multiple examples are provided in CodeSandbox.

Examples are also available in this repo.

How to use

The previous version of Railz Connect was hosted in our CDN as a script, that method is still supported however you can now follow that same method using npm.

This is the preferred approach for integrating with Railz Connect.

Upgrading or changing Connect version

Change the railz-connect version in the package.json to the desired version or upgrade to latest connect version with:

yarn add @railzai/railz-connect

  "dependencies": {
    "@railzai/railz-connect": "~1.0.0",
  },

Install & start the app.

cd /[your-installation-dir]
yarn install

If you need to troubleshoot the upgrade, you can try deleting the node_modules in the root directory & reinstall the packages.

cd /[your-installation-dir]
rm -rf node_modules
yarn install

Using HTML Reference

Angular

app.component.ts

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

import RailzConnect from '@railzai/railz-connect';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('railzConnect', { static: false }) railzConnect: ElementRef;

  ngAfterViewInit(): void {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: this.railzConnect.nativeElement,
      widgetId: '<Your Widget Id>',
    });
  }
}

app.component.html

<div id="railz-connect" #railzConnect></div>

React

import RailzConnect from '@railzai/railz-connect';
import { useEffect, useRef } from 'react';

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = new RailzConnect();
    widget.mount({
      parentElement: ref.current,
      widgetId: '<Your Widget Id>',
    });
  }, []);
  return <div id="railz-connect" ref={ref}></div>;
}

export default App;

Vue

<script>
  import RailzConnect from '@railzai/railz-connect';
  const widget = new RailzConnect();
  widget.mount({
    parentElement: document.getElementById('railz-connect'),
    widgetId: '<Your Widget Id>',
  });
</script>

<template>
  <main>
    <template>
      <div id="railz-connect"></div>
    </template>
  </main>
</template>