# Web

SPIDX Button es una biblioteca de Javascript concebida para integrarse en una aplicación web. Proporciona un estilo de botón para usar en la aplicación y una clase que se comunica con el servidor SPIDX para recuperar un Enlace Dinámico y un ID para la transacción definida por un Caso de Uso.

## Requisitos

* Versión mínima de Javascript

  > ES6

## Configuración

Para que la biblioteca funcione correctamente, se necesita la siguiente configuración:

### Importar archivo .js

* Añade el `spidx_button.js` archivo a tu aplicación web.

### Importar archivo .css

* Añade el `spidx_button_style.js` archivo a tu aplicación web.

## Métodos

La biblioteca proporciona una función Constructor `SpidxAuth` que tiene dos parámetros: `apiKey` y `useCaseName`, con dos métodos para recuperar datos de la API de SPIDX. Los métodos se describen a continuación:

* `collection(onSuccess, onFailure)`
  * Este método usará `apiKey` y `useCaseName` para recuperar el Enlace Dinámico y el ID de Transacción de la API de SPIDX. La respuesta se describe en la sección siguiente.
* `verification(onSuccess, onFailure)`
  * Este método usará `apiKey`, `useCaseName`, y `spidx` para recuperar el Enlace Dinámico y el ID de Transacción de la API de SPIDX. La respuesta se describe en la sección siguiente.

### Respuesta

Estos métodos usan las dos funciones de callback descritas a continuación:

* `onSuccess(useCaseData)`
  * Este método se llama cuando la solicitud tiene éxito y devuelve el objeto `useCaseData`, de tipo `UseCaseData`. Este objeto tiene dos campos: `dynamicLink`, que es el enlace dinámico para la transacción, y `transactionID`, que es el id de la transacción.
* `onFailure(useCaseError)`
  * Este método se llama cuando la solicitud falla y devuelve el objeto `useCaseError`, de tipo `UseCaseError`. Este objeto tiene tres campos: `type`, que es el tipo de error, `code`, que es el código del error, y `message`, que es el mensaje que describe el error.

## Uso

Se recomienda usar el estilo de botón proporcionado junto con la biblioteca SPIDX Button. Con el Enlace Dinámico recibido, es posible abrir una ventana mediante un código QR generado u otro método.

### Añade el estilo de botón en el HTML de tu aplicación

* Crea un `button` en tu diseño y añade la `clase spidx_button`

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

### Configura el listener de clic del botón y llama a la API de SPIDX:

Se debe añadir una función al botón creado para gestionar la acción de *click* . A continuación se proporciona un ejemplo de esta función:

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

	function callbackTestSuccess(data) {
		// Gestiona los datos devueltos en caso de éxito. Por ejemplo: Generar código QR, llamar a window.open('dynamicLink') con el enlace
		...
	}

	function callbackTestFailure(error) {
		// Gestiona el error devuelto
		...
	}
</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/es/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.