Documentação
CLEARSALE
Start typing to search…

SDK Captura de Documentos Web

V2.2.2

SDK ClearSale Web

Os SDKs de Captura de Documentos permitem a realização de capturas pelo usuário dentro de sua aplicação. Essas capturas passam por validações que identificam o tipo de documento e que avaliam a qualidade da imagem capturada, instruindo o usuário através de feedbacks visuais.

Requisitos

Versão mínima por plataforma/navegador

Tipo de DispositivoChromeEdgeFirefoxOperaSafariSamsung BrowserWeb View
Desktop571653❌11❌ ❌
iOS*11❌❌❌11❌ 604
Android57❌53❌❌❌57 (Chrome)
  • Para os navegadores no iOS, a versão se refere à versão do próprio iOS.

Instalação

Para começar a usar o SDK, você precisa instalá-lo em seu projeto. Supondo que você já tenha um projeto Node.js, você pode instalar o SDK usando npm ou yarn:

npm install @clear.sale/sdk-docs-web

ou

yarn add @clear.sale/sdk-docs-web

JavaScript Puro (Vanilla JS)

Se você não estiver usando um gerenciador de pacotes e preferir incluir o SDK diretamente em um projeto de JavaScript puro, siga estas etapas:

  1. Baixar o SDK

    Primeiro, baixe o pacote do SDK em https://www.npmjs.com/package/@clear.sale/sdk-docs-web.

  2. Incluir o arquivo em seu projeto

    Adicione o arquivo cs-docs-sdk.js ao seu projeto. Por exemplo, coloque-o em uma pasta chamada libs dentro do seu projeto.

  3. Incluir o SDK em seu HTML

    Em seu arquivo HTML/JS, importe o SDK. Certifique-se de ajustar o caminho do arquivo conforme necessário:

<html>
<head>
  <script type="module">
    import { SDKClearSale, FLOW_TYPES, ENVIRONMENTS } from 'libs/cs-docs-sdk.js';
    ...
  </script>
</head>
<body></body>
</html>

Nesse exemplo, substitua 'libs/cs-docs-sdk.js' pelo caminho correto onde você salvou o arquivo cs-docs-sdk.js.

Inicialização

Abaixo, apresentamos um exemplo completo de como inicializar o SDK. Em seguida, detalharemos cada etapa.

import { SDKClearSale, FLOW_TYPES, ENVIRONMENTS } from '@clear.sale/sdk-docs-web';

// Função de login
const login = () => {
  // Implementar lógica de login aqui. 
};

// Inicializar o SDK
const SDK = SDKClearSale({
  login, // Obrigatório. Função de login.
  transactionId: 'transaction-id', // Obrigatório. Transaction que deve criada previamente
  environment: {  // Opcional. Valor padrão será ENVIRONMENTS.PRD
    env: ENVIRONMENTS.HML,
  },
  identity: { // Obrigatório. Identificadores de uso.
    identifierId: 'app-identifier', // Identificador
    cpf: 'user-cpf', // CPF do usuário
  },
  colors: { // Obrigatório. Cores usadas pelo SDK.
    primary: '#ff4800',    // Cor primária
    secondary: '#ff4800',  // Cor secundária
    tertiary: '#e6e6e6',   // Cor terciária
    title: '#283785',      // Cor do título
    paragraph: '#353840',  // Cor do parágrafo
    background: '#FFFFFF',  // Cor do background
  },
  flowTypes: [FLOW_TYPES.CAPTURE, FLOW_TYPES.UPLOAD], // Opcional. Ambos os tipos serão usados como padrão.
   
});

// Configuração do SDK
SDK.init()
.then(result => {
  // Resultado do SDK contendo sessionId
  console.log(`Resultado do SDK: ${result}`);
})
.catch(error => {
  // Em caso de erro na captura
  console.log(`Erro do SDK: ${error}`);
});

Login

A função login deve ser implementada para gerenciar a autenticação. O login e será chamado na inicializacao do SDK e momentos antes do token expirar, renovando-o automaticamente.

O SDK espera que a função login retorne um objeto no seguinte formato:
{ "accessToken": "", "expiresIn": 300 }.

Por questões de segurança, o token de autenticação da ClearSale deve ser obtido através do servidor.
Ou seja, a requisição de autenticação à ClearSale deve ser feita a partir do servidor da aplicação.

Exemplo

const login = () => {
  // Realiza uma requisição de autenticação e retorna o token e o tempo de expiração, 
  // que devem ser retornados pelo método de login.
  return fetch('https://<seu-servidor>/clear-sale-auth', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    }
  })
  .then(response => response.json())
  .then(data => {
    return {
      accessToken: data.accessToken,
      expiresIn: data.expiresIn
    };
  });
};

// Instanciação do SDK
const SDK = SDKClearSale({
  login,
  ...
});

Endpoint da API de autenticação da ClearSale

{ 
  "Username": "seu-username", // Obter com a Clear Sale 
  "Password": "seu-password" // Obter com a Clear Sale 
}

ID da Transação: O ID da transação é obrigatório e deve ser gerado previamente através da API da Clear Sale.

Identificação

Ao iniciar o SDK, devem ser informados um código identificador e o CPF do usuário.

  • identifierId: String de até 100 caracteres obrigatória que identifica todo o fluxo do usuário de forma única e é gerada pelo cliente. Serve para agilizar consultas e chamados de suporte (e pode ser utilizada como identificador interno entre produtos aqui da ClearSale).
  • cpf: String de 11 caracteres (no formato CPF) obrigatória que identifica o usuário que irá realizar o fluxo, devendo seguir as regras de validade estipuladas pelo Governo.

Exemplo

// Instanciação do SDK
const SDK = SDKClearSale({
  identity: {
    identifierId: 'app-identifier',
    cpf: 'user-cpf',
  },
   ...
});

Fluxos

Ao iniciar o SDK, é possível informar quais fluxos serão habilitados através do parâmetro flowTypes. Os possíveis valores são:

  • CAPTURE: Fluxo para captura de documentos utilizando uma câmera.
  • UPLOAD: Fluxo para upload de documentos.

Os fluxos estão expostos no objeto FLOW_TYPES, que pode ser importado do SDK e utilizado da seguinte forma:

import { FLOW_TYPES } from '@clear.sale/sdk-docs-web';

// Instanciação do SDK
const SDK = SDKClearSale({
   flowTypes: [FLOW_TYPES.CAPTURE, FLOW_TYPES.UPLOAD],
   ...
});

Cores

Ao iniciar o SDK, deve ser informado as cores através do parâmetro colors.

  • primary: Será aplicado como cor de fundo de botões de ação principais/ativos do SDK e outline de botões sem preenchimento
  • secondary: Será aplicado em ícones explicativos e carregamento, fundo de barras de feedback para usuário durante a tela de captura
  • tertiary: Será aplicado como cor de fundo de ícones informativos grandes
  • title: Será aplicado em textos que possuam o comportamento de título
  • paragraph: Será aplicado em textos que possuam comportamento de parágrafo e demais itens de apoio como o botão de fechamento do SDK
  • `background: Será aplicado no background de todas as telas.

Exemplo:

import { FLOW_TYPES } from '@clear.sale/docs-web-sdk';

const SDK = SDKClearSale({
   colors: {
      primary: '#ff4800',
      secondary: '#ff4800',
      tertiary: '#e6e6e6',
      title: '#283785',
      paragraph: '#353840',
      background: '#FFFFFF',
   },
   ...
});

Ambiente

Ao iniciar o SDK, você pode informar o ambiente desejado. Todas as requisições serão feitas para este ambiente,
portanto, o método de login fornecido deve apontar para o mesmo.

  • HML: Ambiente de homologação. Todas as requisições do SDK serão feitas para o ambiente de homologação.
  • PRD: Ambiente de produção. Todas as requisições do SDK serão feitas para o ambiente de produção.

Exemplo

Os ambientes estão expostos no objeto ENVIRONMENTS, que pode ser importado do SDK e utilizado da seguinte forma:

import { ENVIRONMENTS } from '@clear.sale/sdk-docs-web';

// Instanciação do SDK
const SDK = SDKClearSale({
   environment: {
      env: ENVIRONMENTS.HML,
   },
   ...
});

Método preLoad

O método preLoad pode ser chamado a qualquer momento antes da inicialização do SDK. Ele realiza a autenticação e prepara os dados do SDK, incluindo o download antecipado do modelo de machine learning. Isso reduz o tempo de carregamento percebido pelo usuário durante a inicialização do SDK.

Idealmente, esse método deve ser chamado o mais cedo possível a partir do momento em que se prevê que o usuário passará pelo fluxo de captura ou upload do documento.

Uso do Método preLoad


// Instanciação do SDK
const SDK = SDKClearSale({ ... });

// Em algum momento da aplicação em que se possa prever o uso do SDK,
// chamar o método preLoad usando a instância criada anteriormente.
SDK.preLoad({
  onLoaded: auth => console.log(`Pré-carregamento concluído com sucesso. ${auth}`)
});
  • onLoaded: Função de callback que é chamada quando o pré-carregamento é concluído com sucesso. Recebe um objeto auth contendo dados de autenticação.
    • Formato do objeto auth: {accessToken: '', expiresIn: 300'}

Licença

Copyright © 2024 ClearSale

Todos os direitos são reservados, sendo concedida a permissão para usar o software da maneira como está, não sendo permitido qualquer modificação ou cópia para qualquer fim. O Software é licenciado com suas atuais configurações “tal como está” e sem garantia de qualquer espécie, nem expressa e nem implícita, incluindo mas não se limitando, garantias de comercialização, adequação para fins particulares e não violação de direitos patenteados. Em nenhuma hipótese os titulares dos Direitos Autorais podem ser responsabilizados por danos, perdas, causas de ação, quer seja por contrato ou ato ilícito, ou outra ação tortuosa advinda do uso do Software ou outras ações relacionadas com este Software sem prévia autorização escrita do detentor dos direitos autorais.

Updated about 1 month ago