一般情况

您可以使用我们的 npm 软件包整合可嵌入的网络形式 .

该包包含两个入门点——Javascript文件,和Typescript文件. 需要选择的入口由您决定 - 如果您的应用程序支持 Typescript 语言, 那么您可以随意使用 用于使用 finapi-embeddable-web-form. 组件.ts 文档. 如果您的应用程序不支持 Typescript 语言 - 请使用 finapi-embeddable-web-form.js (英语) 要导入库的文件.

为了使用我们包的最新版本, 请将版本值设置为 时间轴: 在您的主包。 json 文件.

整合示例

• 请将以下作为可嵌入的网络形式与Angular app之间这种融合的例子:

import {Component, OnInit} from '@angular/core';
import {WebFormBuilder} from "@finapi/embeddable-web-form/finapi-embeddable-web-form";

@Component({
    selector: 'app-webform',
    templateUrl: '../../../node_modules/@finapi/embeddable-web-form/finapi-embeddable-web-form.component.html',
})
export class WebformComponent implements OnInit {
    private webFormToken: string;
    constructor() {
        this.webFormToken = 'web-form-token was here';
    }

    ngOnInit(): void {
        console.log('WebForm library has been imported');

        var webFormComponents =
            new WebFormBuilder(this.webFormToken, 'http://kraken:8085')
                .withCallbackUrl('http://127.0.0.1/dummy')
                .withOwnerDocument(document)
                .build();
        webFormComponents.startWebFormComponents();
    }

}

• 可嵌入的web-form和ReactJS应用程序的整合的另一个实例:

import React from 'react';
import {WebFormBuilder} from '@finapi/embeddable-web-form/finapi-embeddable-web-form'

const serverUrl = 'http://kraken:8085';
const webFormToken = 'whatever';

function getWebForm() {
    let embeddableWebForm =
        new WebFormBuilder(webFormToken, serverUrl)
            .withOwnerDocument(document)
            .build();
    embeddableWebForm.startWebFormComponents();
}

const App = () => {
    return (
        <div>
            <button onClick={() => getWebForm()}>Render finAPI Web Form</button>
            <web-form-element></web-form-element>
        </div>
    );
};

export default App;