Documentação
Start typing to search…
These docs are for v1.0. Click to read the latest docs for v3.0.

Implementações e Testes

❗️

Essa documentação é compatível para API REST versão 1 (Sem Envelope)

Bem-vindo ao guia de primeiros passos para integrar o Widget para Assinaturas sem Token! Escolha a abordagem que melhor se adapta às suas necessidades:

Exemplo para testes

Para uma forma rápida e isolada de experimentar o Widget com assinatura sem Token, utilize o código em nosso repositório. Você poderá subir e visualizar o widget em funcionamento, ideal para testes iniciais e para entender o fluxo.

1. Obter o Repositório:

Clone o seguinte repositório público do GitHub:

git clone https://github.com/clicksign/embedded-test.git
# Acessar pasta do exemplo
cd embedded-test/tokenless

2. Abrir página de exemplo:

# para firefox
firefox index.html
# para google-chrome
google-chrome index.html

2. Exemplo para teste

Disponibilizamos também uma aplicação pronta para testes, clique aqui para acessar um da parte client-side com a parte server-side.

Implementação Passo a Passo

Passo 1 - Javascript (client-side)

Instruções para instalação do Widget para assinatura sem Token (client-side):

1. Inclua a biblioteca javascript no head da página.

// Ambiente Sandbox
<script src="https://sandbox.clicksign.com/tokenlessWidget.js"></script>

// Ambiente de Produção
<script src="https://app.clicksign.com/tokenlessWidget.js"></script>

2. Crie um elemento div vazio para que o Widget seja montado dentro dele.

<div id="cs-widget-tokenless"><div/>

3. Crie um botão com ID que será utilizado para o submit. No exemplo abaixo, note a penúltima linha.

<form id="form" action="success.html" onsubmit="return false">
  <label>CPF</label><br>
  <input type="text" id="cpf" name="cpf" />
  <br>
  <label>Data de nascimento</label><br>
  <input type="date" id="birthdate" name="birthdate" />
  <br>
  <div id="cs-widget-tokenless"></div>
  <br>
  <input id="submitButton" type="submit" class="submitSignature" value="Clique para assinar" />
</form>

4. Bloco Javascript do Widget.

<script>
  const submitButton = document.getElementById('submitButton')
  
  const tw = new TokenlessWidget('93649147-db14-4279-b7f8-48acdc8fb898') //request_signature_key
  
  tw.injectLoader('<div class="loader"></div>')

  tw.attach('click', 'submitButton', () => {
    const data = {
      "signature": {}
    }
    tw.sign(data)
    .then(() => {
      console.log('Assinatura realizada com sucesso!')
    })
    .catch((error) => {
      console.log(error.code, error.message)
    })
  })

  tw.mount({
    'containerId':'cs-widget-tokenless',
    'textTemplate': 'banco_acme_1'
  })

</script>

Explicação detalhada das linhas acima:

A) O botão que foi devidamente identificado pelo ID no item 3 acima deverá ser atribuído como uma constante no código Javascript.

// Definindo botão de submit
const submitButton = document.getElementById('submitButton')

B) Registre o componente utilizando o atributo request_signature_key retornado nas requisições da API Rest.

// Para uso em Sandbox, especificar o parametro: 'sandbox'
const tw_sandbox = new TokenlessWidget('request_signature_key','sandbox')

// Para uso em produção, basta omitir o parametro
// Carrega o widget tokenless com a request_signature_key
const tw = new TokenlessWidget('93649147-db14-4279-b7f8-48acdc8fb898')

C) Personalize a experiência de loading utilizando o método injectLoader que pode receber um elemento HTML customizado. Neste exemplo, estamos utilizando uma div com a classe loader.

// Injetando elemento html para experiência de loading
tw.injectLoader('<div class="loader"></div>')

D) Attach do componente

O EventHandler (evento de manipulação) padrão é o clique no botão submit. Essa é a ação de disparo preparada para envio dos dados.

O método sign realiza a assinatura do documento na Clicksign.

// Função sign
tw.attach('click', 'submitButton', () => {
  const data = {
    "signature": {}
  }
  tw.sign(data)
  .then(() => {
    console.log('Assinatura realizada com sucesso!')
  })
  .catch((error) => {
    console.log(error.code, error.message)
  })
})

E) Insira os campos opcionais. Caso não tenha sido enviada a data de nascimento ou o CPF do signatário pela API Rest, estes dados deverão ser enviados via Javascript neste momento.

// Campos opcionais
const data = {
  "signature": {
    "birthday": document.getElementById("birthdate"),
    "documentation": document.getElementById("cpf")
  }
}

F) Monte o componente informando a div vazia criada no item 2 e o nome do template do texto a ser informado e cadastrado previamente pela Clicksign (em sandbox consta um texto default).

tw.mount({
  'containerId':'cs-widget-tokenless', //div vazia criada no item 2
  'textTemplate': 'banco_acme_1' // Template do texto cadastrado previamente pela Clicksign
})

G) Defina a folha de estilo CSS para os elementos checkbox, texto e hyperlink.

/* Estiliza o check box do widget*/
#cs-checkbox-sign {

}

/* Estiliza o template de texto do widget */
.cs-acceptance-text {

}

/* Estiliza o link dos documentos do widget*/
.cs-acceptance-preview {

}

Exemplo completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clicksign - Tokenless</title>
  <script src="https://app.clicksign.com/tokenlessWidget.js"></script>
</head>

<body>
  <header class="settings" onclick="openSettings()">
    <h2 class="title">⚙️ Configurações</h2>

    <fieldset class="form">
      <div class="field batch-key">
        <label>Request Signature Key</label>
        <input type="text" id="key" name="key" required="true" />
      </div>

      <div class="field enviroment">
        <label>Environment</label>
        <select id="request_enviroment">
          <option value="sandbox" selected>Sandbox</option>
          <option value="production">Produção</option>
        </select>
      </div>

      <div class="action">
        <button id="setButton" type="submit" class="button" onclick="setWidget()">
          Carregar
        </button>
      </div>
    </fieldset>
  </header>

  <main class="main">
    <h2>🙋 Preencha seus dados</h2>

    <form id="form" action="success.html" onsubmit="return false">
      <filedset class="signer-info">
        <div class="field">
          <label>Nome</label><br>
          <input type="text" id="name" name="name" />
        </div>
        <div class="field">
          <label>CPF</label><br>
          <input type="text" id="cpf" name="cpf" />
        </div>
        <div class="field">
          <label>Data de nascimento</label><br>
          <input type="date" id="birthdate" name="birthdate" />
        </div>
      </filedset>

      <div id="cs-widget-tokenless" class="container"></div>

      <div class="action">
        <button type="submit" class="button large" id="submitButton" disabled="disabled">
          Clique para assinar
        </button>
      </div>
    </form>
  </main>

  <script type="text/javascript">
    function openSettings() {
      document.getElementsByClassName('settings')[0].classList.remove('closed');
    }

    function closeSettings() {
      document.getElementsByClassName('settings')[0].classList.add('closed');
    }
  </script>

  <script type="text/javascript">
    function setWidget(){
      const submitButton = document.getElementById('submitButton')

      const key = document.getElementById('key').value
      const enviroment = document.getElementById('request_enviroment').value

      const tw = new tokenlessWidget(key, enviroment)

      tw.injectLoader('<div class="loader"><div></div><div></div><div></div><div></div></div>')
      closeSettings()
      tw.attach('click', 'submitButton', () => {
        const data = {
          "signature": {
            "name": document.getElementById("name").value,
            "birthday": document.getElementById("birthdate").value,
            "documentation": document.getElementById("cpf").value
          }
        }

        tw.sign(data).then(() => {
          submitButton.innerHTML = "Assinatura realizada com sucesso!";
          submitButton.setAttribute("style", "background-color: green;");
          console.log('Assinatura realizada com sucesso!')
        }).catch((error) => {
          submitButton.innerHTML =`Erro ao assinar o documento. Confira log`;
          submitButton.setAttribute("style", "background-color: red;");
          console.log(error.code, error.message)
        })
      })

      tw.mount({
        'containerId':'cs-widget-tokenless',
        'textTemplate': 'banco_acme_1'
      })

      submitButton.removeAttribute('disabled')
    }
  </script>
</body>
</html>

Updated 3 months ago