React v16

Integrating with React is pretty straight forward. First of all, include the @iproov/web-sdk package into your application and then include the web component with your generated token. If you want to pass any custom slots in, use the same method as shown below. The example below is taken from the create-react-app tool.

import React, { Component } from 'react';
import "@iproov/web-sdk" // includes the @iproov/web-sdk client into your app

class App extends Component {
  render() {
    return (
      <div className="App">
        <!-- replace with your generated token -->
        <iproov-me token="***YOUR_TOKEN_HERE***">
            <!-- add any custom slots here -->
            <div slot="button">
                <button type="button">
                    My Custom Button Text
                </button>
            </div>
        </iproov-me>
      </div>
    );
  }
}

export default App;

Include language file

import React, { Component } from "react"
import axios from "axios" // assumes you have already installed axios as a dependency
import "@iproov/web-sdk" // includes the @iproov/web-sdk client into your app

export default class App extends Component {
  state = {
    language: "", // keep empty to stop render firing until we have a language object
    token: "***YOUR_TOKEN_HERE***",
  }

  componentDidMount() {
    this.setLanguage()
  }

  async setLanguage() {
    const path = "" // local or external path to language JSON file
    const response = await axios.get(path).catch(error => console.error(error))

    const language = await JSON.stringify(response.data)
    this.setState({ language })
  }

  render() {
    const { token, language } = this.state
    // only render in the iproov component when we have a language object
    if (!language) {
      return null
    }

    return (
      <div className="App">
        <iproov-me token={token} language={language} />
      </div>
    )
  }
}