@moneykit/connect 0.1.1

package/README.md

@@ -0,0 +1,34 @@
+# MoneyKit Connect
+
+JavaScript SDK for connecting to a financial institution via MoneyKit Connect in a web browser.
+
+## Usage
+
+- Add `@moneykit/connect` to your project's dependencies.
+
+```sh
+npm install @moneykit/connect
+```
+
+- To use MoneyKit Connect you must first [create a Link Session](https://docs.moneykit.com/openapi/core/#operation/create_link_session) via the MoneyKit API to acquire a Link Session Token
+- Once you have a Link Session Token, create your MoneyKit Connect instance
+
+```js
+import MoneyKit from "@moneykit/connect";
+const linkSessionToken = "get-from-moneykit-api"; // https://docs.moneykit.com/openapi/core/#operation/create_link_session
+
+const moneykit = new MoneyKit();
+moneykit.link(linkSessionToken);
+```
+
+You may now launch the MoneyKit Connect flow by calling `link()` with your link session token. This will open a popup window to MoneyKit Connect in which the user may select and log into their financial institution, select their accounts and grant permissions.
+
+The `link` method also accepts three optional callback parameters:
+
+- `onLinkSuccess` - called when the linking process completes successfully. This callback will be passed two arguments: an exchangeable MoneyKit API token (see below) and the Institution which was linked. The linked institution also includes a subset of data from financial accounts linked by the user including account type, name and mask.
+- `onLinkExit` - called whenever the link process is exited manually by the user. Receives no arguments at this time.
+- `onLinkEvent` - called whenever various events occur at different stages of the linking process, as indicated by the Event object argument. Can be used to tailor or notify your application as a user progresses through a link.
+
+## Link Token Exchange
+
+To finalize the connection and acquire a long-lived access token with which to make subsequent requests, you must pass this exchangeable token to your secure backend service which should then [exchange](https://docs.moneykit.com/openapi/core/#operation/exchange_token) it via the MoneyKit API.

package/index.js

@@ -0,0 +1 @@
+import m from"query-string";var u={colors:{accent:"#0077ff",primaryBackground:{light:"#fff",dark:"#212124"},secondaryBackground:{light:"#f2f2f5",dark:"#212124"},primaryContent:{light:"#fff",dark:"#343438"},secondaryContent:{light:"#f5f5f5",dark:"#343438"},primaryForeground:{light:"#111",dark:"#fff"},secondaryForeground:{light:"rgba(67, 67, 76, 0.6)",dark:"rgba(235, 235, 245, 0.6)"},tertiaryForeground:{light:"rgba(67, 67, 76, 0.3)",dark:"rgba(235, 234, 244, 0.3)"},primaryFill:{light:"rgba(120, 120, 128, 0.2)",dark:"rgba(120, 120, 128, 0.36)"},secondaryFill:{light:"rgba(120, 120, 128, 0.16)",dark:"rgba(120, 120, 128, 0.32)"},tertiaryFill:{light:"rgba(118, 118, 128, 0.12)",dark:"rgba(118, 118, 128, 0.24)"},success:{light:"#00ca32",dark:"#35DE5F"},warning:{light:"#ff9500",dark:"#FF9400"},error:{light:"#dd2424",dark:"#FA4242"},separator:{light:"rgba(60, 60, 67, 0.06)",dark:"rgba(84, 84, 88, 0.4)"},selection:{light:"rgba(120, 120, 128, 0.28)",dark:"rgba(120, 120, 128, 0.48)"}},typography:{fontFamily:"Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",largeTitle:{size:"34px",lineHeight:"41px",letterSpacing:"-0.01em",weight:800},title1:{size:"28px",lineHeight:"34px",letterSpacing:"-0.03em",weight:700},title2:{size:"22px",lineHeight:"28px",letterSpacing:"0",weight:700},title3:{size:"20px",lineHeight:"24px",letterSpacing:"0",weight:700},body:{size:"17px",lineHeight:"24px",letterSpacing:"-0.01em",weight:500},smallBody:{size:"11px",lineHeight:"16px",letterSpacing:"-0.0225em",weight:400},button:{size:"18px",lineHeight:"24px",letterSpacing:"-1%",weight:500},input:{size:"20px",lineHeight:"24px",letterSpacing:"-0.02em",weight:500}},spacing:{contentHorizontalInset:"32px",buttonHorizontalInset:"24px"},components:{navigationBar:{height:"64px"},contentView:{borderRadius:"16px",boxShadow:{light:"none",dark:"inset 0 0 0 1px rgba(228, 227, 243, 0.04)"},border:null},buttonPrimary:{height:"48px",borderRadius:"24px"},searchBar:{height:"50px",borderRadius:"18px"},textField:{height:"56px",borderRadius:"0px"}},screens:{finder:{title:"Connect Your Bank",subtitle:null,searchPlaceholder:"Search Banks",institutionCellBoxShadow:null,institutionCellBorderRadius:"16px",institutionCellBorder:{light:"1px solid rgba(60, 60, 67, 0.1)",dark:"1px solid rgba(84, 84, 88, 0.4)"},institutionCellSpacing:"18px",institutionCellBackgroundColor:{light:"#fff",dark:"#212124"}}},modal:{borderRadius:"20px",boxShadow:{light:"0px 6px 18px rgba(0, 0, 0, 0.2)",dark:"inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px black, 0px 6px 18px rgba(0, 0, 0, 0.3)"},overlayBackgroundColor:{light:"rgba(0, 0, 0, 0.5)",dark:"rgba(0, 0, 0, 0.75)"},overlayBackdropFilter:null},popover:{borderRadius:"24px",boxShadow:{light:"0px 0px 80px rgba(0, 0, 0, 0.16)",dark:"inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px black, 0px 6px 18px rgba(0, 0, 0, 0.3)"}}},c=u;var h=(o=>(o[o.largeTitle=0]="largeTitle",o[o.title1=1]="title1",o[o.title2=2]="title2",o[o.title3=3]="title3",o[o.body=4]="body",o[o.smallBody=5]="smallBody",o[o.button=6]="button",o[o.input=7]="input",o))(h||{});var s="http://localhost:3002";function k(n,t){let e=document.createElement("iframe");e.src=n,e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.width="100%",e.style.height="100%",e.style.zIndex="999999";let i=t?document.getElementById(t):document.body;if(!i)throw new Error(`MoneyKit could not find container element with ID "${t}".`);return i.appendChild(e),e}function d(n){n.remove()}var x="moneykit.linkSessionToken",g=class{constructor(t={}){this.options={...t}}link(t,e,i,l){let a={...this.linkParametersFromOptions(),linkSessionToken:t,origin:window.location.origin},r=m.stringifyUrl({url:`${s}/start`,query:a});this.launch(r,e,i,l)}relink(t,e,i,l){let a={...this.linkParametersFromOptions(),linkSessionToken:t,origin:window.location.origin},r=m.stringifyUrl({url:`${s}/relink`,query:a});this.launch(r,e,i,l)}continue(t,e,i,l){if(window.opener){window.opener.postMessage({moneykit:!0,type:"link.resume",eventData:{redirectURL:t}},s);return}let a=localStorage.getItem(x);a||console.warn("Unable to get MoneyKit link session token from local storage.");let r={...this.linkParametersFromOptions(),linkSessionToken:a,redirectURL:t,origin:window.location.origin},p=m.stringifyUrl({url:`${s}/continue`,query:r});this.launch(p,e,i,l)}linkParametersFromOptions(){let t=this.options.applicationName??"",e=this.options.theme??c,i=this.options.device??null,l=this.options.stepTimers??!0;return{applicationName:t,theme:JSON.stringify(e),device:i,stepTimers:l}}launch(t,e,i,l){let a=k(t,this.options.containerID),r=new AbortController,p=T(a,r,e,i,l);window.addEventListener("message",p,{signal:r.signal})}};function T(n,t,e,i,l){return a=>{if(a.origin!=s||!("moneykit"in a.data||"__moneykitDemo"in a.data))return;let r=a.data;switch(r.type){case"link.complete":e&&r.data.exchangeableToken&&e(r.data.exchangeableToken,r.data.institution),d(n),t.abort();break;case"relink.complete":e&&e(r.data.institution),d(n),t.abort();break;case"link.exit":d(n),i&&i(),t.abort();break;case"link.event":case"demo.link.event":l&&l(r.data);break}}}var y=g;var D=(n,t)=>{switch(t){case 0:return n.typography.largeTitle;case 1:return n.typography.title1;case 2:return n.typography.title2;case 3:return n.typography.title3;case 5:return n.typography.smallBody;case 6:return n.typography.button;case 7:return n.typography.input;default:return n.typography.body}};var K=y;export{h as ThemeTypographyTextStyle,K as default,c as moneyui,D as themeTypographyStyleForTextStyle};

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@moneykit/connect",
+  "description": "MoneyKit Connect launcher for web.",
+  "version": "0.1.1",
+  "author": "MoneyKit",
+  "dependencies": {
+    "query-string": "^8.1.0"
+  },
+  "module": "index.js",
+  "type": "module",
+  "main": "index.js"
+}