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.1/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: 'future',
          general: {
            colors: {
              /*Change the primary color to "#6236FF", click Run, and see the how the theme changes */
              /* primary: "#007AFF", */
            },
            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: ['id_card', 'drivers_license', 'passport'],
                },
                {
                  name: 'document-photo',
                  id: 'document-photo'
                },
                {
                  name: 'check-document',
                  id: 'check-document'
                },
                {
                  name: 'document-photo-back-start',
                  id: 'document-photo-back-start'
                },
                {
                  name: 'document-photo-back',
                  id: 'document-photo-back'
                },
                {
                  name: 'selfie-start',
                  id: 'selfie-start'
                },
                {
                 ...