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
• loyaltyConfigurationId

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
    >CPF:<br />
    <input type="text" name="cpf" required="true" /></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 8 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="cpf"	Número de CPF	Texto	Sim
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

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>',
          loyaltyConfigurationId: '<SEU LOYALTY CONFIGURATION 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)
},