SDK ClearSale React-Native

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

Android

• Versão mínima do SDK android: 24 (v7)
• Versão compileSDK android: 35

iOS

• Versão mínima do iOS: 13.0
• Adicionar permissão de câmera (NSCameraUsageDescription) e acesso a pasta de documentos (NSDocumentsFolderUsageDescription) no seu Info.plist
• Cocoapods
• Versão mínima do Swift: 5.0

React-Native

• Usar a arquitetura antiga ou usar o modo de interop na nova arquitetura.

Instalação

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

Primeiro, adicione o plugin ao seu pubspec:

npm install @clear.sale/react-native-csdocumentoscopysdk

Ou usando yarn:

yarn add @clear.sale/react-native-csdocumentoscopysdk

Então, adicione nosso repositório na sua lista de repositórios (no seu arquivo build.gradle.kts ou build.gradle) no seu projeto android nativo:

allprojects {
    repositories {
        ...
        maven {
          url = uri("https://pkgs.dev.azure.com/CS-PublicPackages/SDKS/_packaging/SDKS/maven/v1")
        }
    }
}

Para iOS, primeiro instale o plugin cocoapods-azure-universal-packages.

Após isso, certifique-se de logar no azure cli com az devops login usando o PAT que foi enviado para você por e-mail.

az devops login --organization https://dev.azure.com/CS-PublicPackages

Feito isso, adicione nosso repositório no seu Podfile:

plugin 'cocoapods-azure-universal-packages', {
    :organization => 'https://dev.azure.com/CS-PublicPackages/'
}

Então, adicione o SDK como sua dependência no Podfile:

  pod "CSDocumentosCopySDK", :http => 'https://dev.azure.com/CS-PublicPackages/SDKS/_apis/packaging/feeds/SDKS/upack/packages/csdocumentoscopysdk-ios/versions/2.1.0'

Inicialização

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

// Configuração do SDK
const sdk = new CSDocsSDK({
  login,
  identity: {
    identifierId: "YourIdentifierIdHere",
    cpf: "YourCPFHere",
  },
  colors: {
    primary: '#FF4800',
    secondary: '#FF4800',
    tertiary: '#EFEFEF',
    paragraph: '#283785',
    title: '#353840',
    background: '#FFFFFF',
  },
  environment: CSDocsEnvironments.HML,
  flowTypes: [CSDocsFlowTypes.CAPTURE, CSDocsFlowTypes.UPLOAD],
  transactionId: "transactionId",
  onUploadedDocumentError, // Opcional, mas se presente deve ser uma função
});

// Lembre-se que o método init é async.
try {
  const result = await sdk.init();
  setSdkResult(JSON.stringify(result, undefined, 2));
} catch (e) {
  console.error(e);
}

Login

A função login deve ser implementada para gerenciar a autenticação. O login 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 tipo CSDocsAuthenticationResponse, que contém os seguintes atributos:

type CSDocsAuthenticationResponse = {
    accessToken: string;
    expiresIn: number;
};

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 = async (): Promise<CSDocsAuthenticationResponse> => {
  const response = await fetch("yourServerUrlHere", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify("YourRequestBodyHere"),
  });

  if (!response.ok) {
    throw new Error('Error logging in.');
  }

  const { token: accessToken, expiresInSeconds: expiresIn } = await response.json();

  return {
    accessToken,
    expiresIn,
  };
};

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:

{
  "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 = new CSDocsSDK({
  identity: {
    identifierId: "YourIdentifierIdHere",
    cpf: "YourCPFHere",
  },
  ...,
});

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 enum CSDocsFlowTypes, que pode ser importado do SDK e utilizado da seguinte forma:

// Instanciação do SDK
const sdk = new CSDocsSDK({
  flowTypes: [CSDocsFlowTypes.CAPTURE, CSDocsFlowTypes.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
• background: Será aplicado no background de todas as telas

Exemplo:

// Instanciação do SDK
const sdk = new CSDocsSDK({
  colors: {
    primary: '#FF4800',
    secondary: '#FF4800',
    tertiary: '#EFEFEF',
    paragraph: '#283785',
    title: '#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:

// Instanciação do SDK
const sdk = new CSDocsSDK({
  environment: CSDocsEnvironments.HML,
  ...,
});

onUploadedDocumentError

A função onUploadedDocumentError pode ser implementada para você lidar com erros/falhas no envio de documentos pelo fluxo de upload.

O SDK chama essa função, se presente, passando o base64 do pdf que originou o erro, o erro e uma função. Essa função permite a finalização do SDK.

Exemplo

let retries = 0;
const onUploadedDocumentError = (pdfBase64, { code, message }, closeSdk) => {
  if (retries >= 3) {
    closeSdk();
  }
  
  retries++;
};

// Instanciação do SDK
const SDK = new CSDocsSDK({
  onUploadedDocumentError,
  ...
});

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 = new CSDocsSDK(...);

// 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((auth: CSDocsAuthenticationResponse) => {
  ...
});

• onLoaded: Função de callback que é chamada quando o pré-carregamento é concluído com sucesso. Recebe um parâmetro auth contendo dados de autenticação.
  • Classe do parâmetro auth: CSDocsAuthenticationResponse

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.

Made with create-react-native-library