# Web

SPIDX Button é uma biblioteca Javascript concebida para ser integrada a uma aplicação web. Ela fornece um estilo de botão para ser usado na aplicação e uma classe que se comunica com o servidor SPIDX para recuperar um Link Dinâmico e um ID para a transação definida por um Caso de Uso.

## Requisitos

* Versão mínima de Javascript

  > ES6

## Configuração

Para a biblioteca funcionar corretamente, a seguinte configuração é necessária:

### Importar arquivo .js

* Adicione o `spidx_button.js` arquivo à sua aplicação web.

### Importar arquivo .css

* Adicione o `spidx_button_style.js` arquivo à sua aplicação web.

## Métodos

A biblioteca fornece uma função Construtora `SpidxAuth` que possui dois parâmetros: `apiKey` e `useCaseName`, com dois métodos para recuperar dados da API SPIDX. Os métodos são descritos abaixo:

* `collection(onSuccess, onFailure)`
  * Este método usará `apiKey` e `useCaseName` para recuperar o Link Dinâmico e o ID da Transação da API SPIDX. A resposta é descrita na seção abaixo.
* `verification(onSuccess, onFailure)`
  * Este método usará `apiKey`, `useCaseName`, e `spidx` para recuperar o Link Dinâmico e o ID da Transação da API SPIDX. A resposta é descrita na seção abaixo.

### Resposta

Estes métodos utilizam as duas funções de callback descritas abaixo:

* `onSuccess(useCaseData)`
  * Este método é chamado quando a requisição tem sucesso e retorna o objeto `useCaseData`, do tipo `UseCaseData`. Este objeto possui dois campos: `dynamicLink`, que é o link dinâmico para a transação, e `transactionID`, que é o id da transação.
* `onFailure(useCaseError)`
  * Este método é chamado quando a requisição falha e retorna o objeto `useCaseError`, do tipo `UseCaseError`. Este objeto possui três campos: `type`, que é o tipo do erro, `code`, que é o código do erro, e `message`, que é a mensagem descrevendo o erro.

## Uso

Recomenda-se usar o estilo de botão fornecido juntamente com a biblioteca SPIDX Button. Com o Link Dinâmico recebido, é possível abrir uma janela através de um código QR gerado ou outro método.

### Adicione o estilo do botão no HTML da sua aplicação

* Crie um `button` no seu layout e adicione a `class spidx_button`

  ```html
  <button class="spidx_button"></button>
  ```

### Configure o listener de clique do botão e chame a API SPIDX:

Uma função deve ser adicionada ao botão criado para lidar com a *click* ação. Um exemplo dessa função é fornecido abaixo:

```html
<button class="spidx_button" onclick="retriveDynamicLink()"></button>
<script>
	function retrieveDynamicLink() {
		var spidxAuth = new SpidxAuth('apiKey', 'useCaseName')
		spidxAuth.collection(callbackTestSuccess, callbackTestFailure)
	}

	function callbackTestSuccess(data) {
		// Trate os dados de sucesso retornados. Por exemplo: Gerar código QR, chamar window.open('dynamicLink') com o link
		...
	}

	function callbackTestFailure(error) {
		// Trate o erro retornado
		...
	}
</script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.griaule.com/sdks/spidxbutton/spidxbuttonweb.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.