generateACHFormHTML static method

String generateACHFormHTML(
  1. String vaultId,
  2. String environment, {
  3. String source = 'native ',
})

Implementation

static String generateACHFormHTML(String vaultId, String environment,
    {String source = 'native '}) {
  return '''
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Credit Card Form</title>
  <script type="text/javascript" src="https://js.verygoodvault.com/vgs-collect/2.16.0/vgs-collect.js"></script>

  <style>
    html, body {
      margin: 0;
      padding: 0;
      background: transparent;
    }
    .row {
      display: flex;
      gap: 10px;
    }
    .col {
      flex: 1;
    }
    .form-group {
      margin-bottom: 10px;
    }
    .form-field {
      display: block;
      width: 100%;
      height: 50px;
    }

    .form-field iframe {
      border: 0 none transparent;
      height: 100%;
      vertical-align: middle;
      width: 100%;
    }
  </style>
</head>
<body>
  <form id="cc-form">
    <div class="form-group">
      <span id="routing_number" class="form-field">
      </span>
    </div>
    <div class="form-group">
      <span id="account_number" class="form-field"></span>
    </div>
    <div class="row">
      <div class="form-group col">
        <span id="first_name" class="form-field"></span>
      </div>
      <div class="form-group col">
        <span id="last_name" class="form-field"></span>
      </div>
    </div>
  </form>

  <script>
    const css = {
      color: '#000',
      border: '#CCC 1px solid',
      'border-radius': '5px',
      'text-transform': 'uppercase',
      padding: '5px 10px',
      'box-sizing': 'border-box',
      'font-size': '1em',
      'caret-color': 'transparent',
      '&:focus': {
        'border-color': '#999',
      },
      '&.invalid.touched': {
        'border-color': 'red',
      },
      '&.valid': {
        'border-color': '#CCC',
      },
    }
    const form = VGSCollect.create('$vaultId', '$environment', function(state) {});

    form.field('#routing_number', {
      type: 'text',
      name: 'routing_number',
      placeholder: 'Routing Number',
      validations: ['required', '/^([0-9]{9})\$/'],
      css
    });

    form.field('#account_number', {
      type: 'text',
      name: 'account_number',
      placeholder: 'Account number',
      validations: ['required', '/^([0-9]{6,17})\$/'],
      css
    });

    form.field('#first_name', {
      type: 'text',
      name: 'first_name',
      placeholder: 'First Name',
      validations: ['required'],
      css
    });

    form.field('#last_name', {
      type: 'text',
      name: 'last_name',
      placeholder: 'Last Name',
      validations: ['required'],
      css
    });

    const sendNative = (data, isError) => {
      ${source == 'native' ? 'PE' : 'window.parent'}.postMessage(JSON.stringify({
        type: 'PayEngineResponse',
        data: {
          STATUS: isError ? 'FAILED' : 'SUCCESS',
          DATA: data
        }
      }))
    }

    function submit(merchantId, authHeader) {
      form.submit('/api/bank-accounts', {
        method: 'POST',
        data: {
          pci_vault_provider: 'vgs',
          merchant_id: merchantId,
        },
        headers: {
          Authorization: authHeader
        }
      }, (status, data) => {
        if (status === 200) {
          sendNative(data, false)
        } else {
          sendNative({ data, status }, true)
        }
      }, error => {
        sendNative(error, true)
      })
      return true
    }

    window.addEventListener('message', message => {
      try {
        const json = JSON.parse(message.data);
        if (json.source === 'PEFlutter') {
          console.log({ json });
          if (json.action === 'submit') {
            submit(json.data.merchantId, json.data.authHeader);
          }
        }
      } catch {}
    })
  </script>
</body>
</html>
''';
}