@clear.sale/sdk-docs-web NPM

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 minima por plataforma/navegador

Tipo de Dispositivo	Chrome	Edge	Firefox	Opera	Safari	Samsung Browser
Desktop	57	16	53	❌	11	❌
iOS*	11	❌	❌	❌	11	❌
Android	57	❌	53	❌	❌	❌

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/docs-web-sdk

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

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:

Baixar o SDK
Primeiro, baixe o pacote do SDK em https://www.npmjs.com/package/@clear.sale/docs-web-sdk.
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.
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/docs-web-sdk';

// 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.
  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
  },
  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 automaticamento.

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 Clear Sale deve ser obtido através do servidor. Ou seja, a requisição de autenticação à Clear Sale 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 Clear Sale

URL: https://<clear.sale.api.url>/authentication (obter URL com a Clear Sale)
Método: POST
Corpo da Requisição:

{
  "clientId": "seu-client-id", // Obter com a Clear Sale
  "clientSecret": "seu-client-secret" // Obter com a 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/docs-web-sdk';

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

Cores

Ao iniciar o SDK, deve ser informado as cores atraves do parametro 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

Exemplo:

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

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

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/docs-web-sdk';

// 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

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.

@amplitude/analytics-browser @sentry/browser onnxruntime-web preact react-error-boundary

1.0.1

8 months ago

1.0.0

9 months ago

SDK ClearSale Web

Requisitos

Instalação

JavaScript Puro (Vanilla JS)

Inicialização

Login

Exemplo

Endpoint da API de autenticação da Clear Sale

Identificação

Exemplo

Fluxos

Cores

Exemplo:

Ambiente

Exemplo

Método preLoad

Uso do Método preLoad

Licença

Método `preLoad`

Uso do Método `preLoad`