Instalation in react

The web component can be integrated as in the example bellow, but first you need to have the api key.

import React from "react";
import "./App.css";
import { QualifiedElectronicSignature } from "@trustservices/smart-flow-web-components";
function App() {
  return (
    <div className="App">
      <QualifiedElectronicSignature fullMode={true} env={"prod"} />
    </div>
  );
}
export default App;

Installation for angular

• Install package from npm npm i smartflow-new-app and BootStrap npm install -D -S bootstrap)

• Update tsconfig.json -> add “jsx”:”react” ad compile options

• Install react and react-dom and import in wrapper component npm i --save -D @types/react @types/react-dom)

• For every exported component by smart-flow package, create an wrapper angular component: import { QualifiedElectronicSignature } from 'smartflow-new-app';

• Add in template mounting point for package component: template: '<div #customReactComponentContainer></div>',

• Select mounting point using

 @ViewChild(containerElementName, { static: true }) containerRef!: ElementRef;

• Create a const variable: const containerElementName = 'customReactComponentContainer';

• Create a render method:

private render() {
    const props: any = {
      env: 'preprod',
    };

    ReactDOM.render(
      React.createElement(QualifiedElectronicSignature, props),
      this.containerRef.nativeElement
    );
  }

• On ngAfterViewInit call render function

• The final version should look like this:

import { ElementRef, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { QualifiedElectronicSignature } from '@trustservices/smart-flow-web-components';
const containerElementName = 'customReactComponentContainer';
@Component({
  selector: 'app-root',
  template: '<div #customReactComponentContainer></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(containerElementName, { static: true }) containerRef!: ElementRef;

  private render() {
    const props: any = {
      env: 'preprod',
    };
    ReactDOM.render(
      React.createElement(QualifiedElectronicSignature, props),
      this.containerRef.nativeElement
    );
  }

  ngAfterViewInit(): void {
    this.render();
  }
}

• Start the project with ng serve –port 3000