MoneyMade connect widget

Connect widget is launched from your web application, and you can easily include the below drop-in JavaScript code in the HTML of your application. The code contains the parameters and other access details needed for connector widget initialization.

To launch connector use the MoneyMadeWidget.connect() method and MoneyMadeWidget.close() method for closing.

Installation

  1. For a standard browser application, add the script tag to your html file:
<script src="https://connect-widget.vercel.app/moneymade-connect.js"></script>
  1. Provide a HTML placeholder for connector:
<div id="container-connect-widget">
  <div style="text-align: center;">
    <input type="submit" id="btn-connect-widget" value="Link an Account" />
  </div>
</div>
  1. Include the script in your HTML document before the closing body tag:
<script>
  ;(function () {
    // open Connector widget
    const connectWidgetLinkBtn = document.getElementById('btn-connect-widget')
    connectWidgetLinkBtn.addEventListener(
      'click',
      function () {
        window.MoneyMadeWidget.connect({
          clientKey: '{clientKey}',
          providerId: '{providerId}',
          token: '{token}',
          onSuccess: data => {
            console.log('success', data)
          },
          onError: data => {
            console.log('error', data)
          },
          onClose(data) {
            console.log('onClose', data)
          },
          onExpire(data) {
            console.log('onExpire', data)
          }
        })
      },
      false
    )
  })()
</script>

Setup

The MoneyMadeWidget.connect() method in the above script requires the following parameters:

KeyDescriptionRequired
clientIdclient id KeyYes
tokentokenYes
providerIdThe provider id keyNo
onSuccesscallback function on success connectionNo
onErrorcallback function on error connectionNo
onClosecallback function on close widgetNo
onExpirecallback function on token expirationNo

Usage

The first step is always to allow a user to connect from your front-end:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>My Website</title>

    <link rel="stylesheet" href="example.css" type="text/css" />
  </head>

  <body>
    <section>
      <header>
        <h2>My Web Application</h2>
      </header>

      <button id="connect" type="button">Connect</button>
    </section>

    <!--Add this script to your html file-->
    <script src="https://connect-widget.vercel.app/moneymade-connect.js"></script>

    <script type="text/javascript">
      // Wait for document to fully load
      document.onreadystatechange = async () => {
        if (document.readyState !== 'complete') {
          return
        }
        // Initiate MonetMade SDK
        // replace `clientId`, `token` fields with corrects one
        // set `providerId` if needed
        // Bind "connect" button
        document.querySelector('#connect').addEventListener(
          'click',
          function () {
            window.MoneyMadeWidget.connect({
              clientKey: '{clientKey}',
              token: '{token}',
              providerId: '{providerId}',W
              onSuccess: data => {
                console.log('success', data)
              },
              onError: data => {
                console.log('error', data)
              },
              onClose(data) {
                console.log('onClose', data)
              },
              onExpire(data) {
                console.log('onExpire', data)
              }
            })
          },
          false
        )
      }
    </script>
  </body>
</html>

Try it out

You can see the widget possibilities on widget demo page.