@moneykit/connect 0.2.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -2,48 +2,199 @@
2
2
 
3
3
  JavaScript SDK for connecting to a financial institution via MoneyKit Connect in a web browser.
4
4
 
5
- ## Usage
5
+ ## Installation
6
6
 
7
- - Add `@moneykit/connect` to your project's dependencies.
7
+ To begin using Connect simply add the `@moneykit/connect` package to your project's dependencies.
8
8
 
9
9
  ```sh
10
10
  npm install @moneykit/connect
11
11
  ```
12
12
 
13
- - 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
14
- - Once you have a Link Session Token, create your MoneyKit Connect instance
13
+ ## Usage
14
+
15
+ To use MoneyKit Connect you must first [create a Link Session](https://docs.moneykit.com/link-session/create-link-session) via the MoneyKit API to acquire a Link Session Token.
16
+
17
+ Once you have a Link Session Token, create your MoneyKit Connect instance:
15
18
 
16
19
  ```js
17
20
  import MoneyKit from "@moneykit/connect";
18
- const linkSessionToken = "get-from-moneykit-api"; // https://docs.moneykit.com/openapi/core/#operation/create_link_session
19
-
21
+ ]
20
22
  const moneykit = new MoneyKit();
21
- moneykit.link(linkSessionToken);
22
23
  ```
23
24
 
24
- 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.
25
+ Configuration options may also be provided to customize Connect's behavior. See [Configuration](#configuration) for details.
26
+
27
+ You may then 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 before handing off back to your application.
28
+
29
+ ---
30
+
31
+ Note that to support financial institutions that require OAuth login it is required that you also provide a `redirect_uri` when creating your Link Session. This URI should point to a page within your app which re-initializes MoneyKit Connect via its `continue()` method. This method requires the URL that was redirected to as its first parameter (the URL should include any query parameters appended by MoneyKit during the redirect).
32
+
33
+ ---
34
+
35
+ The `link`, `continue` and [`relink`](#relinking) methods accept the same three optional callbacks which you may use to handle the results of the Connect flow:
25
36
 
26
- The `link` method also accepts three optional callback parameters:
37
+ - `onLinkSuccess`: called when the linking process completes successfully. This callback will be passed two parameters: an exchangeable MoneyKit API token (see [Link Token Exchange](#link-token-exchange)) and the [Institution](#linkedinstitution) 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.
38
+ - `onLinkExit`: called whenever the Connect process is exited manually by the user or due to an unexpected error.
39
+ - `onLinkEvent`: called with an [`Event`](#events) object whenever certain events occur throughout the Connect flow, as indicated by the Event object parameter. These may be used to tailor or notify your application as a user progresses through a link or for analytics purposes.
27
40
 
28
- - `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.
29
- - `onLinkExit` - called whenever the link process is exited manually by the user. Receives no arguments at this time.
30
- - `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.
41
+ ### OAuth
31
42
 
32
- ### OAuth Flows
43
+ When a user's financial institution uses OAuth for login, the user will be temporarily navigated to the institution's login page before being returned to your application.
33
44
 
34
- Many Financial Institutions require users to authorize the connection via OAuth on the institution's own website.
45
+ In most cases the OAuth page will be opened as a new popup window. Upon successful authorization with the institution this window will navigate back to the `redirect_uri` you specified when creating your Link Session. (Note that on mobile browsers such as iOS Safari this window will be opened as a new tab instead of a popup.)
35
46
 
36
- To support this workflow you must provide a `redirect_uri` when creating a Link Session via the MoneyKit API. This URI should go to a page of yours which can re-initialize MoneyKit Connect via its `continue()` method. This method requires the URL that was redirected to as its first argument (the URL should include all query parameters appended by MoneyKit during the redirect) followed by all of the same optional callbacks detailed for the `link()` method above.
47
+ When you call `continue()` from your app after receiving this redirect, the OAuth window will be closed and the Connect flow will resume back in the original window.
48
+
49
+ #### Note on Webview usage
50
+
51
+ If Connect is launched inside of a mobile webview (such as one embedded within a native iOS or Android app) where it is not permitted to open a new window or tab, this will be detected by Connect and instead the topmost window in the window hierarchy will be navigated to the OAuth page. This window will then redirect back to your `redirect_uri` as normal. Calling `continue()` in this scenario will re-launch Connect and allow the user to proceed with their in-progress link.
52
+
53
+ ### Example
37
54
 
38
55
  ```js
39
- // my-redirect-page.js
40
- import MoneyKit from "@moneykit/connect";
41
- const moneykit = new MoneyKit();
56
+ // Present Connect to the user and log the result
57
+ moneykit.link(
58
+ linkSessionToken,
59
+ (exchangeableToken, institution) => {
60
+ // onLinkSuccess
61
+ console.log("Link created successfully", exchangeableToken, institution);
62
+ },
63
+ (error) => {
64
+ // onLinkExit
65
+ console.log(
66
+ "Connect closed without creating a link. Error will be provided if one occurred."
67
+ );
68
+ },
69
+ (event) => {
70
+ // onLinkEvent
71
+ console.log("Link event occurred: ", JSON.stringify(event));
72
+ }
73
+ );
74
+
75
+ /**
76
+ * Required for OAuth institutions.
77
+ * This will present Connect again and allow the user to continue their link
78
+ * in progress after completing OAuth with their financial institution.
79
+ *
80
+ * This `continue()` call should be performed on the page you indicated
81
+ * as your `redirect_uri` when creating a Link Session.
82
+ * The complete URL that was redirected to should be passed as the first argument.
83
+ */
42
84
  moneykit.continue(window.location.href, (exchangeableToken, institution) => {
43
85
  console.log(exchangeableToken, institution);
44
86
  });
45
87
  ```
46
88
 
89
+ ### Relinking
90
+
91
+ In the event that a user's existing link has expired (e.g. due to the financial institution requiring periodic user re-authorization) your MoneyKit API requests will respond with an `auth_expired` error.
92
+
93
+ To re-authorize the user you may call `relink()` with a link session token and callbacks identical to those for the `link()` method. In this case the link session token must have been created with the `existing_link_id` field set to the ID of the link you wish to re-authorize.
94
+
95
+ Connect will be opened as normal, however the institution selection step will be bypassed and the user will be immediately prompted to log in to the institution and re-authorize the connection.
96
+
47
97
  ## Link Token Exchange
48
98
 
49
- To finalize the connection and acquire a link ID with which to make subsequent requests, you must pass your exchangeable token received upon completion of a user's connection to your secure backend service. It should then [exchange](https://docs.moneykit.com/openapi/core/#operation/exchange_token) the token for a link ID via the MoneyKit API.
99
+ To finalize the connection and acquire a link ID with which to make subsequent API requests, you must pass your exchangeable token received upon completion of a user's connection to your secure backend service. It should then [exchange](https://docs.moneykit.com/link-session/exchange-token) the token for a link ID via the MoneyKit API.
100
+
101
+ ## Configuration
102
+
103
+ When initializing MoneyKit Connect you may optionally provide it with an options object.
104
+
105
+ ```
106
+ const moneykit = new MoneyKit({
107
+ containerID: "moneykit-container",
108
+ });
109
+ ```
110
+
111
+ Currently the following options are supported:
112
+
113
+ **`containerID`**
114
+
115
+ The ID of the DOM element to which Connect and it's overlay will be appended. If not provided, Connect will be appended to the document body by default.
116
+
117
+ ## Data Types
118
+
119
+ ### LinkedInstitution
120
+
121
+ A LinkedInstitution will be returned to your link success callback functions and includes the following data.
122
+
123
+ ```
124
+ {
125
+ avatar: string | null;
126
+ avatar_dark: string | null;
127
+ color: string;
128
+ color_dark: string | null;
129
+ country: string;
130
+ domain: string;
131
+ id: string;
132
+ logo: string | null;
133
+ logo_dark: string | null;
134
+ name: string;
135
+ selectedAccounts: {
136
+ account_id: string;
137
+ account_type: AccountType;
138
+ name: string;
139
+ account_mask: string | null;
140
+ }[];
141
+ trackedScreens: {
142
+ tag: string;
143
+ name: string;
144
+ duration: number;
145
+ }[]
146
+ }
147
+ ```
148
+
149
+ ### Events
150
+
151
+ The following event types will be sent to your `onLinkEvent` callback function if you provide one.
152
+
153
+ ```
154
+ {
155
+ name: EventType;
156
+ properties?: Record<string, unknown>
157
+ meta: {
158
+ link_type: "link" | "relink";
159
+ timestamp: string;
160
+ link_session_id: string;
161
+ institution_id?: string;
162
+ institution_name?: string;
163
+ }
164
+ }
165
+ ```
166
+
167
+ The contents of `properties` will depend on the event type. `institution_id` and `institution_name` will be present only on events occurring after an Institution has been selected by the user.
168
+
169
+ **Event types:**
170
+
171
+ - `open`
172
+ - Connect was opened
173
+ - `exit`
174
+ - Connect was closed without a link being created
175
+ - `success`
176
+ - Connect was closed after successfully creating a link
177
+ - `error`
178
+ - An error occurred during the Connect flow. Details of the error will be included in the event's properties.
179
+ - `change_screen`
180
+ - The user navigated to a new screen within Connect. The screen name will be included in the event's properties.
181
+ - `select_institution`
182
+ - The user selected an institution. The institution ID and name will be included in the event's properties.
183
+ - `search_institution`
184
+ - The user searched for an institution. The search query will be included in the event's properties.
185
+ - `submit_credentials`
186
+ - The user submitted their credentials to log in to their institution.
187
+ - `open_oauth`
188
+ - The user was directed to their institution's OAuth page.
189
+ - `submit_otp_device`
190
+ - The user selected a device to receive an OTP.
191
+ - `submit_otp`
192
+ - The user submitted their OTP.
193
+ - `submit_mfa`
194
+ - The user submitted a MFA answer.
195
+ - `submit_permissions`
196
+ - The user selected which permissions to grant.
197
+ - `submit_accounts`
198
+ - The user selected which accounts to link.
199
+
200
+ Note that it is possible new event types not yet included here may also be sent.
package/index.js CHANGED
@@ -1 +1 @@
1
- import m from"query-string";var h=(r=>(r[r.largeTitle=0]="largeTitle",r[r.title1=1]="title1",r[r.title2=2]="title2",r[r.title3=3]="title3",r[r.body=4]="body",r[r.smallBody=5]="smallBody",r[r.button=6]="button",r[r.input=7]="input",r))(h||{});var d={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:700},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:700},input:{size:"19px",lineHeight:"24px",letterSpacing:"-0.02em",weight:500}},images:{close:"/images/close.svg",search:"/images/search.svg",spinner:"/images/spinner.png"},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,separatorStyle:"all_except_last"},buttonPrimary:{height:"48px",borderRadius:"24px",inheritInstitutionColor:!0},searchInput:{backgroundColor:{light:"rgba(118, 118, 128, 0.12)",dark:"rgba(118, 118, 128, 0.24)"},height:"50px",borderRadius:"16px",border:null,alignment:"center",focus:{glow:!0,backgroundColor:null,border:null,boxShadow:null}},textField:{backgroundColor:null,height:"54px",borderRadius:"0px",boxShadow:null,focus:{glow:!0,backgroundColor:null,border:null,boxShadow:null}},progressSpinner:{strokeWidth:8,diameter:56,lineCap:"round"},icon:{strokeWidth:8,lineCap:"round"},separator:{height:"1px"}},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:"16px",institutionCellBackgroundColor:{light:"#fff",dark:"#212124"}}},modal:{borderRadius:"20px",boxShadow:{light:"0px 2px 4px rgba(0, 0, 0, 0.1), 0 40px 80px rgba(0,0,0,.15)",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.4)",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)"}}};var y="0.2.2";var p="https://connect.moneykit.com";function x(o,t){let e=document.createElement("iframe");e.src=o,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 n=t?document.getElementById(t):document.body;if(!n)throw new Error(`MoneyKit could not find container element with ID "${t}".`);return n.appendChild(e),e.addEventListener("load",function(){e.focus()}),e}function c(o){o.remove()}var u="moneykit.linkSessionToken",g=class{constructor(t={}){this.options={...t}}link(t,e,n,i){this.startLink(t,e,n,i)}relink(t,e,n,i){let s={...this.linkParametersFromOptions(),linkSessionToken:t,origin:window.location.origin},a=m.stringifyUrl({url:`${p}/relink`,query:s});this.launch(a,e,n,i)}continue(t,e,n,i){if(window.opener){window.opener.postMessage({moneykit:!0,type:"link.resume",eventData:{redirectURL:t}},p);return}let s=localStorage.getItem(u);s||console.warn("Unable to get MoneyKit link session token from local storage.");let a={...this.linkParametersFromOptions(),linkSessionToken:s,redirectURL:t,origin:window.location.origin},l=m.stringifyUrl({url:`${p}/continue`,query:a});this.launch(l,e,n,i)}__linkDirect(t,e,n,i){this.startLink(t,e,n,i,{viewMode:"direct"})}startLink(t,e,n,i,s){let a={...this.linkParametersFromOptions(),linkSessionToken:t,origin:window.location.origin,...s},l=m.stringifyUrl({url:`${p}/start`,query:a});localStorage.setItem(u,t),this.launch(l,e,n,i)}linkParametersFromOptions(){let t=this.options.applicationName??"",e=this.options.device??null,n=this.options.stepTimers??!0;return{applicationName:t,device:e,stepTimers:n,launcherVersion:y}}launch(t,e,n,i){let s=x(t,this.options.containerID),a=new AbortController,l=C(s,this.options.theme??d,a,e,n,i);window.addEventListener("message",l,{signal:a.signal})}};function C(o,t,e,n,i,s){return a=>{if(a.origin!=p||!("moneykit"in a.data||"__moneykitDemo"in a.data))return;let l=a.data;switch(l.type){case"connect.started":a.source?.postMessage({moneykit:!0,type:"connect.set_theme",data:{theme:t}},{targetOrigin:p});break;case"link.complete":n&&l.data.exchangeableToken&&n(l.data.exchangeableToken,l.data.institution),c(o),e.abort();break;case"relink.complete":n&&n(l.data.institution),c(o),e.abort();break;case"link.exit":c(o),i&&i(),e.abort();break;case"link.close_oauth":window.close();break;case"link.event":case"demo.link.event":s&&s(l.data);break}}}var k=g,M=(o,t)=>{switch(t){case 0:return o.typography.largeTitle;case 1:return o.typography.title1;case 2:return o.typography.title2;case 3:return o.typography.title3;case 5:return o.typography.smallBody;case 6:return o.typography.button;case 7:return o.typography.input;default:return o.typography.body}};var F=k;export{h as ThemeTypographyTextStyle,F as default,d as moneyui,M as themeTypographyStyleForTextStyle};
1
+ import c from"query-string";var h=(n=>(n[n.largeTitle=0]="largeTitle",n[n.title1=1]="title1",n[n.title2=2]="title2",n[n.title3=3]="title3",n[n.body=4]="body",n[n.smallBody=5]="smallBody",n[n.button=6]="button",n[n.input=7]="input",n))(h||{});var d={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:700},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:700},input:{size:"19px",lineHeight:"24px",letterSpacing:"-0.02em",weight:500}},images:{close:"/images/close.svg",search:"/images/search.svg",spinner:"/images/spinner.png"},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,separatorStyle:"all_except_last"},buttonPrimary:{height:"48px",borderRadius:"24px",inheritInstitutionColor:!0},searchInput:{backgroundColor:{light:"rgba(118, 118, 128, 0.12)",dark:"rgba(118, 118, 128, 0.24)"},height:"50px",borderRadius:"16px",border:null,alignment:"center",focus:{glow:!0,backgroundColor:null,border:null,boxShadow:null}},textField:{backgroundColor:null,height:"54px",borderRadius:"0px",boxShadow:null,focus:{glow:!0,backgroundColor:null,border:null,boxShadow:null}},progressSpinner:{strokeWidth:8,diameter:56,lineCap:"round"},icon:{strokeWidth:8,lineCap:"round"},separator:{height:"1px"}},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:"16px",institutionCellBackgroundColor:{light:"#fff",dark:"#212124"}}},modal:{borderRadius:"20px",boxShadow:{light:"0px 2px 4px rgba(0, 0, 0, 0.1), 0 40px 80px rgba(0,0,0,.15)",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.4)",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)"}}};var u={name:"@moneykit/connect",description:"MoneyKit Connect launcher for web.",version:"0.3.0",author:"MoneyKit",repository:{type:"git",url:"https://github.com/moneykit/connect-js.git"},types:"./types/index.d.ts",license:"MIT"};var p="https://connect.moneykit.com";function T(i,t){let e=document.createElement("iframe");e.id="moneykit-connect-frame",e.src=i,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 o=t?document.getElementById(t):document.body;if(!o)throw new Error(`MoneyKit could not find container element with ID "${t}".`);return o.appendChild(e),e.addEventListener("load",function(){e.focus()}),e}function m(i){i.remove()}var y="moneykit.linkSessionToken",g=class{constructor(t={}){this.options={...t}}link(t,e,o,r){this.startLink(t,e,o,r)}relink(t,e,o,r){let s={...this.linkParametersFromOptions(),linkSessionToken:t,origin:window.location.origin},a=c.stringifyUrl({url:`${p}/relink`,query:s});this.launch(a,e,o,r)}continue(t,e,o,r){if(window.opener){window.opener.postMessage({moneykit:!0,type:"link.resume",eventData:{redirectURL:t}},p);return}this.continueLink(t,e,o,r)}__linkDirect(t,e,o,r){this.startLink(t,e,o,r,{viewMode:"direct"})}__continueDirect(t,e,o,r){this.continueLink(t,e,o,r,{viewMode:"direct"})}startLink(t,e,o,r,s){let a={...this.linkParametersFromOptions(),linkSessionToken:t,origin:window.location.origin,...s},l=c.stringifyUrl({url:`${p}/start`,query:a});localStorage.setItem(y,t),this.launch(l,e,o,r)}continueLink(t,e,o,r,s){let a=localStorage.getItem(y);a||console.warn("Unable to get MoneyKit link session token from local storage.");let l={...this.linkParametersFromOptions(),linkSessionToken:a,redirectURL:t,origin:window.location.origin,...s},n=c.stringifyUrl({url:`${p}/continue`,query:l});this.launch(n,e,o,r)}linkParametersFromOptions(){let t=this.options.applicationName??"",e=this.options.device??null,o=this.options.stepTimers??!0;return{applicationName:t,device:e,stepTimers:o,launcherVersion:u.version}}launch(t,e,o,r){let s=T(t,this.options.containerID),a=new AbortController,l=x(s,this.options.theme??d,a,e,o,r,this.options.__onDemoEvent);window.addEventListener("message",l,{signal:a.signal})}};function x(i,t,e,o,r,s,a){return l=>{if(l.origin!=p||!("moneykit"in l.data||"__moneykitDemo"in l.data))return;let n=l.data;switch(n.type){case"connect.started":l.source?.postMessage({moneykit:!0,type:"connect.set_theme",data:{theme:t}},{targetOrigin:p});break;case"link.complete":o&&n.data.exchangeableToken&&o(n.data.exchangeableToken,n.data.institution),m(i),e.abort();break;case"relink.complete":o&&o(n.data.institution),m(i),e.abort();break;case"link.exit":m(i),r&&r(n.data.error),e.abort();break;case"link.close_oauth":window.close();break;case"link.event":s&&s(n.data);break;case"demo.link.event":a&&a(n.data);break}}}var k=g,I=(i,t)=>{switch(t){case 0:return i.typography.largeTitle;case 1:return i.typography.title1;case 2:return i.typography.title2;case 3:return i.typography.title3;case 5:return i.typography.smallBody;case 6:return i.typography.button;case 7:return i.typography.input;default:return i.typography.body}};var E=k;export{h as ThemeTypographyTextStyle,E as default,d as moneyui,I as themeTypographyStyleForTextStyle};
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@moneykit/connect",
3
3
  "description": "MoneyKit Connect launcher for web.",
4
- "version": "0.2.2",
4
+ "version": "0.3.0",
5
5
  "author": "MoneyKit",
6
6
  "repository": {
7
7
  "type": "git",
8
8
  "url": "https://github.com/moneykit/connect-js.git"
9
9
  },
10
10
  "types": "./types/index.d.ts",
11
+ "license": "MIT",
11
12
  "dependencies": {
12
13
  "query-string": "^8.1.0"
13
14
  },
@@ -33,20 +33,27 @@ export type MoneyKitOptions = {
33
33
  device?: MoneyKitDevice;
34
34
  stepTimers?: boolean;
35
35
  containerID?: string;
36
+ __onDemoEvent?: LinkEventCallback;
37
+ };
38
+ export type LinkSuccessCallback = (exchangeableToken: string, institution: LinkedInstitution) => void;
39
+ export type RelinkSuccessCallback = (institution: LinkedInstitution) => void;
40
+ export type LinkExitCallback = (error: LinkExitError | null) => void;
41
+ export type LinkEventCallback = (event: Record<string, unknown>) => void;
42
+ export type LinkExitError = {
43
+ error_id: string;
44
+ displayed_message: string;
45
+ request_id: string | null;
36
46
  };
37
- type LinkSuccessCallback = (exchangeableToken: string, institution: LinkedInstitution) => void;
38
- type RelinkSuccessCallback = (institution: LinkedInstitution) => void;
39
- type LinkExitCallback = () => void;
40
- type LinkEventCallback = (event: Record<string, unknown>) => void;
41
47
  declare class MoneyKit {
42
48
  options: MoneyKitOptions;
43
49
  constructor(options?: MoneyKitOptions);
44
- link(linkSessionToken: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: (event: Record<string, unknown>) => void): void;
45
- relink(linkSessionToken: string, onRelinkSuccess?: RelinkSuccessCallback, onRelinkExit?: LinkExitCallback, onRelinkEvent?: (event: Record<string, unknown>) => void): void;
46
- continue(redirectURL: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, // TODO: Pass optional error and metadata.
47
- onLinkEvent?: LinkEventCallback): void;
48
- __linkDirect(linkSessionToken: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: (event: Record<string, unknown>) => void): void;
50
+ link(linkSessionToken: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: LinkEventCallback): void;
51
+ relink(linkSessionToken: string, onRelinkSuccess?: RelinkSuccessCallback, onRelinkExit?: LinkExitCallback, onRelinkEvent?: LinkEventCallback): void;
52
+ continue(redirectURL: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: LinkEventCallback): void;
53
+ __linkDirect(linkSessionToken: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: LinkEventCallback): void;
54
+ __continueDirect(redirectURL: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: LinkEventCallback): void;
49
55
  private startLink;
56
+ private continueLink;
50
57
  private linkParametersFromOptions;
51
58
  private launch;
52
59
  }