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
.