@finapi/embeddable-web-form 0.0.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
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# General Information
|
|
2
|
+
You can integrate the embeddable web-form by using our npm package.
|
|
3
|
+
|
|
4
|
+
The package contains two entry points - the Javascript file, and the Typescript file.
|
|
5
|
+
Which entry point to take is up to you - if your application supports the Typescript language then feel free
|
|
6
|
+
to use the **finapi-embeddable-web-form.component.ts** file.
|
|
7
|
+
If your application doesn't support the Typescript language - please use the **finapi-embeddable-web-form.js**
|
|
8
|
+
file to import the library.
|
|
9
|
+
|
|
10
|
+
In order to use the latest version of our package,
|
|
11
|
+
please set the version value as **'latest'** in your main package.json file.
|
|
12
|
+
|
|
13
|
+
# Integration Example
|
|
14
|
+
- Please consider the following as an example of such integration between the embeddable web-form and an Angular app:
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
import {Component, OnInit} from '@angular/core';
|
|
18
|
+
import {WebFormBuilder} from "@finapi/embeddable-web-form/finapi-embeddable-web-form";
|
|
19
|
+
|
|
20
|
+
@Component({
|
|
21
|
+
selector: 'app-webform',
|
|
22
|
+
templateUrl: '../../../node_modules/@finapi/embeddable-web-form/finapi-embeddable-web-form.component.html',
|
|
23
|
+
})
|
|
24
|
+
export class WebformComponent implements OnInit {
|
|
25
|
+
private webFormToken: string;
|
|
26
|
+
constructor() {
|
|
27
|
+
this.webFormToken = 'web-form-token was here';
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
ngOnInit(): void {
|
|
31
|
+
console.log('WebForm library has been imported');
|
|
32
|
+
|
|
33
|
+
var webFormComponents =
|
|
34
|
+
new WebFormBuilder(this.webFormToken, 'http://kraken:8085')
|
|
35
|
+
.withCallbackUrl('http://127.0.0.1/dummy')
|
|
36
|
+
.withOwnerDocument(document)
|
|
37
|
+
.build();
|
|
38
|
+
webFormComponents.startWebFormComponents();
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
- Another example of integration between the embeddable web-form and a ReactJS application:
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
import React from 'react';
|
|
48
|
+
import {WebFormBuilder} from '@finapi/embeddable-web-form/finapi-embeddable-web-form'
|
|
49
|
+
|
|
50
|
+
const serverUrl = 'http://kraken:8085';
|
|
51
|
+
const webFormToken = 'whatever';
|
|
52
|
+
|
|
53
|
+
function getWebForm() {
|
|
54
|
+
let embeddableWebForm =
|
|
55
|
+
new WebFormBuilder(webFormToken, serverUrl)
|
|
56
|
+
.withOwnerDocument(document)
|
|
57
|
+
.build();
|
|
58
|
+
embeddableWebForm.startWebFormComponents();
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const App = () => {
|
|
62
|
+
return (
|
|
63
|
+
<div>
|
|
64
|
+
<button onClick={() => getWebForm()}>Render finAPI Web Form</button>
|
|
65
|
+
<web-form-element></web-form-element>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export default App;
|
|
71
|
+
```
|
|
File without changes
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
declare const WebFormComponentsFactory;
|
|
2
|
+
|
|
3
|
+
enum WebFormESVersion {
|
|
4
|
+
ES5,
|
|
5
|
+
ES6
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export class FinapiEmbeddableWebFormComponent {
|
|
9
|
+
private webFormToken: string;
|
|
10
|
+
private serverUrl: string;
|
|
11
|
+
private callbackUrl: string;
|
|
12
|
+
|
|
13
|
+
private readonly webComponentsEntryPointUrl: string;
|
|
14
|
+
|
|
15
|
+
constructor(webFormToken: string,
|
|
16
|
+
serverUrl: string,
|
|
17
|
+
callbackUrl: string,
|
|
18
|
+
// ES5 is the default version
|
|
19
|
+
esVersion: WebFormESVersion = WebFormESVersion.ES5) {
|
|
20
|
+
this.webFormToken = webFormToken;
|
|
21
|
+
this.serverUrl = serverUrl;
|
|
22
|
+
this.callbackUrl = callbackUrl;
|
|
23
|
+
|
|
24
|
+
if (esVersion === WebFormESVersion.ES5) {
|
|
25
|
+
this.webComponentsEntryPointUrl = this.serverUrl + "/js/web-form/web-form-components.es5.js"
|
|
26
|
+
} else if (esVersion === WebFormESVersion.ES6) {
|
|
27
|
+
this.webComponentsEntryPointUrl = this.serverUrl + "/js/web-form/web-form-components.js"
|
|
28
|
+
} else {
|
|
29
|
+
throw new Error("Unsupported ES version: " + esVersion);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
startWebFormComponents(): void {
|
|
34
|
+
const entryPoint = document.createElement('script');
|
|
35
|
+
entryPoint.src = this.webComponentsEntryPointUrl;
|
|
36
|
+
entryPoint.async = false;
|
|
37
|
+
|
|
38
|
+
const finapiWebFormComponent: FinapiEmbeddableWebFormComponent = this;
|
|
39
|
+
entryPoint.onload = function () {
|
|
40
|
+
const webFormComponents = new WebFormComponentsFactory(document, window)
|
|
41
|
+
.create({
|
|
42
|
+
webFormToken: finapiWebFormComponent.webFormToken,
|
|
43
|
+
serverUrl: finapiWebFormComponent.serverUrl,
|
|
44
|
+
callbackUrl: finapiWebFormComponent.callbackUrl,
|
|
45
|
+
});
|
|
46
|
+
webFormComponents.start();
|
|
47
|
+
}
|
|
48
|
+
document.appendChild(entryPoint);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
class FinapiEmbeddableWebForm {
|
|
2
|
+
constructor(webFormToken,
|
|
3
|
+
serverUrl,
|
|
4
|
+
callbackUrl,
|
|
5
|
+
esVersion,
|
|
6
|
+
ownerDocument) {
|
|
7
|
+
this.webFormToken = webFormToken;
|
|
8
|
+
this.serverUrl = serverUrl;
|
|
9
|
+
this.callbackUrl = callbackUrl;
|
|
10
|
+
|
|
11
|
+
if (esVersion === 'ES5' || !esVersion) {
|
|
12
|
+
this.webComponentsEntryPointUrl = this.serverUrl + "/js/web-form/web-form-components.es5.js"
|
|
13
|
+
} else if (esVersion === 'ES6') {
|
|
14
|
+
this.webComponentsEntryPointUrl = this.serverUrl + "/js/web-form/web-form-components.js"
|
|
15
|
+
} else {
|
|
16
|
+
throw new Error("Unsupported ES version: " + esVersion);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if (ownerDocument) {
|
|
20
|
+
this.ownerDocument = ownerDocument;
|
|
21
|
+
} else {
|
|
22
|
+
this.ownerDocument = document;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
startWebFormComponents() {
|
|
27
|
+
console.log("Injecting the entry point")
|
|
28
|
+
const entryPoint = this.ownerDocument.createElement('script');
|
|
29
|
+
entryPoint.src = this.webComponentsEntryPointUrl;
|
|
30
|
+
entryPoint.id = 'web-form-components-source';
|
|
31
|
+
entryPoint.async = false;
|
|
32
|
+
|
|
33
|
+
const finapiWebFormComponent = this;
|
|
34
|
+
entryPoint.onload = function () {
|
|
35
|
+
const webComponents = new WebFormComponentsFactory(document, window)
|
|
36
|
+
.create({
|
|
37
|
+
webFormToken: finapiWebFormComponent.webFormToken,
|
|
38
|
+
serverUrl: finapiWebFormComponent.serverUrl,
|
|
39
|
+
callbackUrl: finapiWebFormComponent.callbackUrl,
|
|
40
|
+
});
|
|
41
|
+
webComponents.start();
|
|
42
|
+
}
|
|
43
|
+
this.ownerDocument.body.appendChild(entryPoint);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
class WebFormBuilder {
|
|
48
|
+
constructor(webFormToken, serverUrl) {
|
|
49
|
+
this.webFormToken = webFormToken;
|
|
50
|
+
this.serverUrl = serverUrl;
|
|
51
|
+
return this;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
withCallbackUrl(callbackUrl) {
|
|
55
|
+
this.callbackUrl = callbackUrl;
|
|
56
|
+
return this;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
withESVersion(esVersion) {
|
|
60
|
+
this.esVersion = esVersion;
|
|
61
|
+
return this;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
withOwnerDocument(ownerDocument) {
|
|
65
|
+
this.ownerDocument = ownerDocument;
|
|
66
|
+
return this;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
build() {
|
|
70
|
+
return new FinapiEmbeddableWebForm(
|
|
71
|
+
this.webFormToken,
|
|
72
|
+
this.serverUrl,
|
|
73
|
+
this.callbackUrl,
|
|
74
|
+
this.esVersion,
|
|
75
|
+
this.ownerDocument);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
module.exports.WebFormBuilder = WebFormBuilder;
|
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@finapi/embeddable-web-form",
|
|
3
|
+
"description": "A Javascript library for integrating the finAPI Embeddable Web Form",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"finapi",
|
|
7
|
+
"web-form",
|
|
8
|
+
"webform",
|
|
9
|
+
"npm"
|
|
10
|
+
],
|
|
11
|
+
"devDependencies": {},
|
|
12
|
+
"author": "support@finapi.io",
|
|
13
|
+
"scripts": {},
|
|
14
|
+
"dependencies": {},
|
|
15
|
+
"version": "0.0.0"
|
|
16
|
+
}
|