@moneykit/connect 0.2.2 → 0.2.3
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 +26 -17
- package/index.js +1 -1
- package/package.json +2 -1
- package/types/lib/connect-launcher.d.ts +8 -7
package/README.md
CHANGED
|
@@ -10,35 +10,44 @@ JavaScript SDK for connecting to a financial institution via MoneyKit Connect in
|
|
|
10
10
|
npm install @moneykit/connect
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
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.
|
|
14
|
+
|
|
15
|
+
Once you have a Link Session Token, create your MoneyKit Connect instance:
|
|
15
16
|
|
|
16
17
|
```js
|
|
17
18
|
import MoneyKit from "@moneykit/connect";
|
|
18
|
-
const linkSessionToken = "get-from-moneykit-api"; // https://docs.moneykit.com/
|
|
19
|
+
const linkSessionToken = "get-from-moneykit-api"; // https://docs.moneykit.com/link-session/create-link-session
|
|
19
20
|
|
|
20
21
|
const moneykit = new MoneyKit();
|
|
21
|
-
moneykit.link(linkSessionToken);
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
You may
|
|
25
|
-
|
|
26
|
-
The `link` method also accepts three optional callback parameters:
|
|
24
|
+
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.
|
|
27
25
|
|
|
28
|
-
|
|
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.
|
|
26
|
+
To support institutions that use 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).
|
|
31
27
|
|
|
32
|
-
|
|
28
|
+
Both the `link` and `continue` methods accept the same three optional callback parameters which you should use to handle the results of the link process:
|
|
33
29
|
|
|
34
|
-
|
|
30
|
+
- `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) 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.
|
|
31
|
+
- `onLinkExit`: called whenever the link process is exited manually by the user. Receives no parameters at this time.
|
|
32
|
+
- `onLinkEvent`: called whenever various events occur at different stages of the linking process, as indicated by the Event object parameter. Can be used to tailor or notify your application as a user progresses through a link.
|
|
35
33
|
|
|
36
|
-
|
|
34
|
+
### Example
|
|
37
35
|
|
|
38
36
|
```js
|
|
39
|
-
//
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
// Present Connect to the user
|
|
38
|
+
moneykit.link(linkSessionToken, (exchangeableToken, institution) => {
|
|
39
|
+
console.log(exchangeableToken, institution);
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Required for OAuth institutions.
|
|
44
|
+
* This will present Connect again and allow the user to continue their link
|
|
45
|
+
* in progress after completing OAuth with their financial institution.
|
|
46
|
+
*
|
|
47
|
+
* This `continue()` call should be performed on the page you indicated
|
|
48
|
+
* as your `redirect_uri` when creating a Link Session.
|
|
49
|
+
* The complete URL that was redirected to should be passed as the first argument.
|
|
50
|
+
*/
|
|
42
51
|
moneykit.continue(window.location.href, (exchangeableToken, institution) => {
|
|
43
52
|
console.log(exchangeableToken, institution);
|
|
44
53
|
});
|
|
@@ -46,4 +55,4 @@ moneykit.continue(window.location.href, (exchangeableToken, institution) => {
|
|
|
46
55
|
|
|
47
56
|
## Link Token Exchange
|
|
48
57
|
|
|
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/
|
|
58
|
+
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.
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import c 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 u={name:"@moneykit/connect",description:"MoneyKit Connect launcher for web.",version:"0.2.3",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 b(i,t){let e=document.createElement("iframe");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 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 m(i){i.remove()}var y="moneykit.linkSessionToken",g=class{constructor(t={}){this.options={...t}}link(t,e,n,o){this.startLink(t,e,n,o)}relink(t,e,n,o){let s={...this.linkParametersFromOptions(),linkSessionToken:t,origin:window.location.origin},a=c.stringifyUrl({url:`${p}/relink`,query:s});this.launch(a,e,n,o)}continue(t,e,n,o){if(window.opener){window.opener.postMessage({moneykit:!0,type:"link.resume",eventData:{redirectURL:t}},p);return}this.continueLink(t,e,n,o)}__linkDirect(t,e,n,o){this.startLink(t,e,n,o,{viewMode:"direct"})}__continueDirect(t,e,n,o){this.continueLink(t,e,n,o,{viewMode:"direct"})}startLink(t,e,n,o,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,n,o)}continueLink(t,e,n,o,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},r=c.stringifyUrl({url:`${p}/continue`,query:l});this.launch(r,e,n,o)}linkParametersFromOptions(){let t=this.options.applicationName??"",e=this.options.device??null,n=this.options.stepTimers??!0;return{applicationName:t,device:e,stepTimers:n,launcherVersion:u.version}}launch(t,e,n,o){let s=b(t,this.options.containerID),a=new AbortController,l=x(s,this.options.theme??d,a,e,n,o);window.addEventListener("message",l,{signal:a.signal})}};function x(i,t,e,n,o,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),m(i),e.abort();break;case"relink.complete":n&&n(l.data.institution),m(i),e.abort();break;case"link.exit":m(i),o&&o(),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,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 F=k;export{h as ThemeTypographyTextStyle,F 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.
|
|
4
|
+
"version": "0.2.3",
|
|
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
|
},
|
|
@@ -34,19 +34,20 @@ export type MoneyKitOptions = {
|
|
|
34
34
|
stepTimers?: boolean;
|
|
35
35
|
containerID?: string;
|
|
36
36
|
};
|
|
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;
|
|
37
|
+
export type LinkSuccessCallback = (exchangeableToken: string, institution: LinkedInstitution) => void;
|
|
38
|
+
export type RelinkSuccessCallback = (institution: LinkedInstitution) => void;
|
|
39
|
+
export type LinkExitCallback = () => void;
|
|
40
|
+
export type LinkEventCallback = (event: Record<string, unknown>) => void;
|
|
41
41
|
declare class MoneyKit {
|
|
42
42
|
options: MoneyKitOptions;
|
|
43
43
|
constructor(options?: MoneyKitOptions);
|
|
44
44
|
link(linkSessionToken: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: (event: Record<string, unknown>) => void): void;
|
|
45
45
|
relink(linkSessionToken: string, onRelinkSuccess?: RelinkSuccessCallback, onRelinkExit?: LinkExitCallback, onRelinkEvent?: (event: Record<string, unknown>) => void): void;
|
|
46
|
-
continue(redirectURL: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback,
|
|
47
|
-
onLinkEvent?: LinkEventCallback): void;
|
|
48
|
-
|
|
46
|
+
continue(redirectURL: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: LinkEventCallback): void;
|
|
47
|
+
__linkDirect(linkSessionToken: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: LinkEventCallback): void;
|
|
48
|
+
__continueDirect(redirectURL: string, onLinkSuccess?: LinkSuccessCallback, onLinkExit?: LinkExitCallback, onLinkEvent?: LinkEventCallback): void;
|
|
49
49
|
private startLink;
|
|
50
|
+
private continueLink;
|
|
50
51
|
private linkParametersFromOptions;
|
|
51
52
|
private launch;
|
|
52
53
|
}
|