Rangler Connect JS

JavaScript SDK for Rangler Connect read-only account and portfolio linking.

Install

npm install @rangler/connect-js

Use with npm

Create a link token on your backend, then let the SDK fetch it when the user opens Connect.

Keep rgl_test_ and rgl_live_ API keys on your backend only. fetchLinkToken should call your own backend endpoint; that endpoint should create the short-lived rgl_link_ token with X-API-Key.

import { Connect } from '@rangler/connect-js';

const connect = new Connect({
  fetchLinkToken: async () => {
    const response = await fetch('/api/rangler/link-token', { method: 'POST' });
    const data = await response.json();
    return data.link_token;
  },
  environment: 'test',
  onSuccess: async ({ public_token }) => {
    await fetch('/api/connect/exchange', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ public_token }),
    });
  },
  onClose: ({ status }) => {
    console.log(status);
  },
  onEvent: (eventName, payload) => {
    console.log(eventName, payload);
  },
});

connect.setup().open();

You can also pass a pre-created linkToken directly.

The public token is one-use and must be exchanged by your backend with X-API-Key.

Use with a script tag

Load the standalone browser build, then initialize Connect from window.RanglerConnect. Define window.RanglerConnect.onLoad before the async script loads; otherwise the SDK may load before your callback is registered.

<button id="connect">Connect portfolio</button>
<script>
  window.RanglerConnect = window.RanglerConnect || {};
  window.RanglerConnect.onLoad = function () {
    var connect = window.RanglerConnect.init({
      environment: 'test',
      fetchLinkToken: async function () {
        var response = await fetch('/api/rangler/link-token', { method: 'POST' });
        var data = await response.json();
        return data.link_token;
      },
      onSuccess: async function ({ public_token }) {
        await fetch('/api/rangler/exchange-token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ public_token }),
        });
      },
    });

    document.getElementById('connect').onclick = function () {
      connect.open();
    };
  };
</script>
<script src="https://connect.rangler.co/connect.js" async></script>

API

new Connect(options)

• linkToken: short-lived rgl_link_ token created by your backend.
• fetchLinkToken: async function that returns a fresh rgl_link_ token. Use this when opening Connect from a button.
• environment: test or live. sandbox is accepted as a deprecated alias for test.
• widgetOrigin: optional override for development.
• reference: optional customer-side reference string.
• onLoad: called when Connect is ready.
• onSuccess: called with { public_token, connection_id, institution_id }.
• onClose: called when the user closes or cancels the flow.
• onError: called for widget error exits.
• onEvent: called for lifecycle events.

Methods:

• setup(config?): prepares Connect without showing it.
• open(): opens Connect.
• close(): closes Connect.
• destroy(): removes Connect and its listeners.