JSFiddle - React, Tailwind, and code Playground

by ballerine

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>My Accounting Openeing Flow</title>
    <script crossorigin src="https://cdn.ballerine.io/js/1.2.2/ballerine-sdk.umd.js"></script>
  </head>

  <body>
    <div id="kyc-host"></div>
    <script>
      const backIconButton = {
        id: "back-icon-button",
        orderIndex: 10,
        type: "icon-button",
        props: {
          attributes: {
            src: 'https://cdn.ballerine.io/rio/back.svg',
            alt: 'back',
            width: '28px',
            height: '28px',
          },
          style: {
            left: '26px',
            background: 'transparent',
          },
        },
      };

      const backWhiteIconButton = {
        id: "back-white-icon-button",
        orderIndex: 10,
        type: "icon-button",
        props: {
          attributes: {
            src: 'https://cdn.ballerine.io/rio/back-white.svg',
            alt: 'back',
            width: '28px',
            height: '28px',
          },
          style: {
            left: '26px',
            background: 'transparent',
          },
        },
      };

      const ballerineInitConfig = {
        endUserInfo: { id: 'test-id' },
        translations: {
          overrides: {
            en: {
              "document-options": {
                "ife_card-title": "IFE card",
                "ine_card-title": "INE card",
              },
            }
          },
        },
        uiConfig: {
         
     
          flows: {
            ['my-kyc-flow']: {
              firstScreenBackButton: true,
              steps: [
                {
                  name: "welcome",
                  id: "welcome", 
                },
                {
                  name: "document-selection",
                  id: "document-selection",
                  elements: [
                    backIconButton,
                    {
                      id: "tip",
                      type: "paragraph",
                     ...