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

For a standard browser application, add the script tag to your html file:

<script src="https://connect-widget.vercel.app/moneymade-connect.js"></script>

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>

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:

Key	Description	Required
clientId	client id Key	Yes
token	token	Yes
providerId	The provider id key	No
onSuccess	callback function on success connection	No
onError	callback function on error connection	No
onClose	callback function on close widget	No
onExpire	callback function on token expiration	No

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.