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.3.0/ballerine-sdk.umd.js"></script>
  </head>

  <body>
    <div id="kyc-host"></div>
    <script>
      const ballerineInitConfig = {
        endUserInfo: {
          id: 'test-id'
        },
        // backendConfig: {
        //   baseUrl: 'http://localhost:3001',
        // },
        uiConfig: {
          uiPack: 'default',
          //uiPack: 'future',
          general: {
            colors: {
              /*Change the primary color to "#6236FF", click Run, and see the how the theme changes */
              primary: "#6236FF",
              // primary: "#007AFF",
              //primary: "#000FFF",
            },
            fonts: {
              /*Change the font name to "Courier New", click Run, and see the how the font changes */
              name: 'Inter',
              link: 'https://fonts.googleapis.com/css2?family=Inter:wght@500',
              weight: [500, 700],
            },
          },
          flows: {
            ['my-kyc-flow']: {
              steps: [{
                  name: 'welcome',
                  id: 'welcome'
                },
                {
                  name: 'document-selection',
                  id: 'document-selection',
                  documentOptions: [{
                      type: 'id_card',
                      kind: 'id_card'
                    },
                    {
                      type: 'drivers_license',
                      kind: 'drivers_license'
                    },
                    {
                      type: 'passport',
                      kind: 'passport'
                    },
                    {
                      type: 'voter_id',
                      kind: 'voter_id'
                    },
                  ],
                },
                {
                  name: 'document-photo',
                  id:...