> For the complete documentation index, see [llms.txt](https://docs.griaule.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.griaule.com/sdks/spidxbutton/spidxbuttonweb.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.