# Web

SPIDX Button is a Javascript library conceived to be integrated into a Web Application. It provides a Button Style to be used in the application and a class that communicates with SPIDX server to retrieve a Dynamic Link and ID for the transaction defined by a Use Case.

## Requirements

* Minimum Javascript version

  > ES6

## Configuration

For the library to work correctly, the following configuration is needed:

### Import .js file

* Add the `spidx_button.js` file to your web application.

### Import .css file

* Add the `spidx_button_style.js` file to your web application.

## Methods

The library provides a Constructor function `SpidxAuth` that has two parameters: `apiKey` and `useCaseName`, with two methods to retrieve data from SPIDX API. The methods are described below:

* `collection(onSuccess, onFailure)`
  * This method will use `apiKey` and `useCaseName` to retrieve the Dynamic Link and Transaction ID from SPIDX API. The response is described in the section below.
* `verification(onSuccess, onFailure)`
  * This method will use `apiKey`, `useCaseName`, and `spidx` to retrieve the Dynamic Link and Transaction ID from SPIDX API. The response is described in the section below.

### Response

These methods use the two callback functions described below:

* `onSuccess(useCaseData)`
  * This method is called when the request succeeds and returns the object `useCaseData`, of type `UseCaseData`. This object has two fields: `dynamicLink`, which is the dynamic link for the transaction, and `transactionID`, which is the id of the transaction.
* `onFailure(useCaseError)`
  * This method is called when the request fails and returns the object `useCaseError`, of type `UseCaseError`. This object has three fields: `type`, which is the type of the error, `code`, which is the code of the error, and `message`, which is the message describing the error.

## Usage

It is recommended to use the Button Style provided along with the SPIDX Button library. With the Dynamic Link received, it’s possible to spawn a window through a generated QR code or another method.

### Add the button style in your application HTML

* Create a `button` in your layout and add the `class spidx_button`

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

### Configure the button click listener and call SPIDX API:

A function must be added to the created button to deal with the *click* action. An example for this function is provided below:

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

	function callbackTestSuccess(data) {
		// Deal with success data returned. For example: Generate QR code, call window.open('dynamicLink') with the link
		...
	}

	function callbackTestFailure(error) {
		// Deal with the error returned
		...
	}
</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/en/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.