Formulário de registro de pessoas (Básico)

Integração de formulário de registro de pessoas com a API Niara usando Formulário HTML.

Pré-requisitos

Para a integração do formulário, é necessário receber da Niara os seguintes parâmetros:

• tenantId
• clientId
• storefrontId
• loyaltyProgramId

Resumo

1. Criar formulário HTML na página
2. Configurar e inserir código javascript

Criar formulário HTML

Exemplo

<form id="niara-registration-form">
  <div id="niara-registration-form-feedback-container"></div>

  <label
    >Nome:<br />
    <input type="text" name="firstName" required="true" /></label
  ><br />

  <label
    >Sobrenome:<br />
    <input type="text" name="lastName" required="true" /></label
  ><br />

  <label
    >E-mail:<br />
    <input type="email" name="email" required="true" /></label
  ><br />

  <label
    >Nacionalidade:<br />
    <input type="text" name="nationality" required="true" /></label
  ><br />

  <label
    >CPF:<br />
    <input type="text" name="cpf" required="true" /></label
  ><br />

  <label
    >Passaporte:<br />
    <input type="text" name="passport" /></label
  ><br />

  <label
    >Telefone:<br />
    <input type="tel" name="phone" /></label
  ><br />

  <label
    >Data de Nascimento:<br />
    <input type="date" name="dob" /></label
  ><br />

  <label>
    <input type="checkbox" name="loyaltyOptIn" />
    Aceito os termos de fidelidade </label
  ><br />

  <label>
    <input type="checkbox" name="acceptTerms" required="true" />
    Aceito a política de privacidade</label
  >
  <br />

  <button type="submit">Enviar</button>
</form>

Id do formulário

Para que possamos enxergar seu formulário precisamos de um identificador no form então pra isso insira em seu formulário a seguinte instrução:

<form id="niara-registration-form" ...></form>

Com o id="niara-registration-form" saberemos que se trata de um formulário de criação de pessoas.

Campos do formulário

Aqui vamos mostrar os principais campos de fomulário que precisamos para criar a integração básica com a API Niara com a criação de pessoas em nossa base a partir do seu formulário.

São 10 campos que precisamos que eles estejam presentes em seu formulário de criação de pessoas:

Nome	Descrição	Tipo	Obrigatório
name="firstName"	Nome	Texto	Sim
name="lastName"	Sobrenome	Texto	Sim
name="email"	E-mail	Texto	Sim
name="nationality"	Nacionalidade no formato ISO 3166 (alpha-2). Ex: BR, MX, US	Texto	Sim
name="cpf"	Número de CPF	Texto	Sim, se Nacionalidade for BR
name="passport"	Número de passaporte	Texto	Sim, se Nacionalidade não for BR
name="phone"	Número de telefone	Texto	Não
name="dob"	Data de nascimento	Texto formato (DD/MM/YYYY)	Não
name="loyaltyOptIn"	Campo de aceite das politicas de fidelidade	Checkbox (True/False)	Não
name="acceptTerms"	Campo de aceite dos termos e politicas	Checkbox (True/False)	Não

⚠️ Importante: É fundamental implementar validação para os campos CPF e Passaporte baseada na nacionalidade selecionada:

• CPF: Obrigatório apenas quando a nacionalidade for "BR" (Brasil)
• Passaporte: Obrigatório para todas as outras nacionalidades (diferente de "BR")

Isso garante que o usuário forneça o documento correto conforme sua nacionalidade, evitando erros de validação na API.

Campo Nacionalidade (Select Dinâmico)

Para facilitar a seleção da nacionalidade pelo usuário, você pode substituir o campo de texto por um select que carrega automaticamente todas as nacionalidades disponíveis.

Isso pode ser feito colocando todas as opções manualmente ou buscar de alguma API de sua preferência como no exemplo abaixo.

HTML do campo

Substitua o campo nacionalidade no formulário por:

<label>
  Nacionalidade:<br />
  <select id="nationality" name="nationality" required="true">
    <option value="">Selecione</option>
  </select> </label
><br />

Carregamento das opções

Adicione o seguinte código JavaScript para carregar as nacionalidades:

// Pode ser utilizado a API de sua preferência
fetch('https://flagcdn.com/pt/codes.json') // ISO 3166-1 alpha-2 como chave
  .then((res) => res.json())
  .then((data) => {
    const select = document.getElementById('nationality')

    for (const [code, name] of Object.entries(data)) {
      const option = document.createElement('option')
      option.value = code.toUpperCase() // BR, US, etc.
      option.textContent = name
      select.appendChild(option)
    }
  })

Exibição de erros - Opcional

Todos os campos que são enviados, são validados, então caso opte por mostrá-lo basta criar um identificador em seu formulário:

<div id="niara-registration-form-feedback-container"></div>

Com o id="niara-registration-form-feedback-container" mostraremos todos os erros de dados inválidos ao submeter o formulário.

Configurar e inserir código javascript

Segue código de exemplo de integração:

<script>
  function initRegistrationForm() {
    function _i(r) {
      if (r) {
        r(document.querySelector('form#niara-registration-form'), {
          clientId: '<SEU CLIENT ID>',
          tenantId: '<SEU TENANT ID>',
          storefrontId: '<SEU STOREFRONT ID>',
          loyaltyProgramId: '<SEU LOYALTY PROGRAM ID>',
          feedbackContainerSelector: '#niara-registration-form-feedback-container',
          onSuccess: function (person) {},
          onError: function (errors) {},
        })
      }
    }
    var _k = '_NIARA_REGISTRATION_FORM_INIT_'
    if (window[_k]) {
      _i(window[_k])
    } else {
      function _l(e) {
        _i(e.detail.registrationFormInit)
      }
      document.addEventListener('niara-registration-form-ready', _l)
    }
  }
  initRegistrationForm()

  function loadJS(url, location) {
    var scriptTag = document.createElement('script')
    scriptTag.src = url
    scriptTag.crossOrigin = 'anonymous'
    scriptTag.defer = true
    scriptTag.async = true
    location.appendChild(scriptTag)
  }
  loadJS('https://core-reservations.niara.tech/static/js/registration-form.js', document.body)
</script>

Funções de Callback

//Retorna um objeto com os dados do registro criado.
onSuccess: function (person) {
    console.log(person)
},

//Retorna um array de string com os erros do retorno da requisição
onError: function (errors) {
    console.error(errors)
},