Hadada serve

Hadada serve is a quick and secure way to link bank accounts to Hadada from within your app. Hadada Service is a drop-in framework that handles Serviceing a financial institution to your app (credential validation, multi-factor authentication, error handling, etc). It works with all major javascript frameworks.

Requirements

Node 10 or higher.

Getting Started

1. Register on the Hadada website and get your secret keys.

Installation

You can install the package using NPM or Yarn;

npm i @hadada.co/serve.js

or

yarn add @hadada.co/serve.js

Then import it into your project;

import Service from '@hadada.co/serve.js'

NOTE
The list above is not exhaustive, you can use this package in other frontend javascript frameworks.

Parameters

• key
• externalId
• onSuccess
• onClose
• onFailure
• onLoad
• onEvent
• reference
• setupConfig

key

Required
This is your Hadada secret key from the Hadada dashboard.

new Service({ key: 'secretKey' });

externalId

OPTIONAL
This is your referance id for tracking the responces.

new Service({ key: 'app key', externalId: 'external id' });

If not passed it will auto generate a Id for your referance, you can retrive it from the hadada instance.

console.log("Your External Id Can Be Retrieved from --> ",hadada.externalId)

onSuccess

Required This function is called when a user has successfully onboarded their account. It should take a single String argument containing the token that can be [exchanged for an account id]

new Service({
  key: 'secretKey',
  appKey: 'statement key',
  onSuccess: (data) => {
    // in the case of authentication auth code is returned
    console.log("auth code", data.code);
    // in the case of direct debit payments
    // a charge object is return containing amount, transaction_reference, type...
    console.log("charge object", data);
  }
});

onClose

The optional closure is called when a user has specifically exited the Hadada Service flow (i.e. the widget is not visible to the user). It does not take any arguments.

new Service({
  key: 'secretKey',
  appKey: 'statement key',
  onSuccess: ({code}) => console.log("auth code", code),
  onClose: () => console.log("widget has been closed")
});

onLoad

This function is invoked the widget has been mounted unto the DOM. You can handle toggling your trigger button within this callback.

new Service({
  key: 'appKey',
  onSuccess: ({code}) => console.log("auth code", code),
  onLoad: () => console.log("widget loaded successfully")
});

onEvent

This optional function is called when certain events in the Hadada Service flow have occurred, for example, when the user selected an institution. This enables your application to gain further insight into the Hadada Service onboarding flow.

See the data object below for details.

new Service({
  key: 'appKey',
  onSuccess: ({code}) => console.log("auth code", code),
  onEvent: (eventName, data) => {
    console.log(eventName);
    console.log(data);
  }
});

data

The data object returned from the onEvent callback.

{
  "accountId": "ACCOUNT_ID", 
  "bank_name": "BANK_NAME", 
}

Example Usage

Click the links below for detailed examples on how to use Service.js with your favourite framework;

React

import React from 'react';
import Service from '@hadada.co/serve.js';

export default function App() {
  const hadada = React.useMemo(() => {
    const hadadaInstance = new Service({
      key: "<App Key>",
      externalId:"<Pass Id For Further Reference, if not passed will generate a Id>"
      onClose: () => console.log('Widget closed'),
      onLoad: () => console.log('Widget loaded successfully'),
      onSuccess: ({ code }) => console.log(`successfully: ${code}`),
    })

    hadadaInstance.setup()
    console.info("Your External Id Can Be Retrieved from --> ",hadadaInstance.externalId)

    return hadadaInstance;
  }, [])

  const runWidget=()=>{
    hadada.open();
    console.info("Your External Id Can Be Retrieved from --> ",hadada.externalId)
  }

  return (
    <div>
      <button onClick={() => runWidget()>
        Retrieve Statement
      </button>
    </div>
  )
}

Angular

import { Component, OnInit } from '@angular/core';
import Service from '@hadada.co/serve.js';

@Component({
  selector: 'app-hadada',
  templateUrl: './hadada.component.html',
  styleUrls: ['./hadada.component.css']
})
export class HadadaComponent implements OnInit {
  public hadadaInstance: any;

  constructor() {
    this.hadadaInstance = new Service({
      key: "APP_KEY", 
      externalId:"pass id for further reference if not passed it will be auto generated"
      onClose: () => console.log('Widget closed'),
      onLoad: () => console.log('Widget loaded successfully'),
      onSuccess: ({ code }) => console.log(`successfully: ${code}`)
    })

    this.hadadaInstance.setup()
  }

  ngOnInit() {}
 }

Next.js

import { useState, useCallback } from "react";

export default function IndexPage() {
  const [scriptLoaded, setScriptLoaded] = useState(false);

  const openWidget = useCallback(async () => {
    const Service = (await import("@hadada.co/serve.js")).default;
    
    const hadadaInstance = new Service({
      key: "APP_KEY",
      externalId:"pass id for further reference if not passed it will be auto generated"
      onClose: () => console.log("Widget closed"),
      onLoad: () => setScriptLoaded(true),
      onSuccess: ({ code }) => console.log(`successfully: ${code}`),
    });

    hadadaInstance.setup();
    hadadaInstance.open();
  }, []);

  return (
    <div>
      <div style={{ marginTop: "10px" }}>
        <button onClick={() => openWidget()}>
          Retrieve financial Statement
        </button>
      </div>
    </div>
  );
}

Support

If you're having general trouble with Hadada serve or your Hadada integration, please reach out to us at [email protected] or come chat with us on Slack. We're proud of our level of service, and we're more than happy to help you out with your integration to Hadada.