> 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/en/spidxbutton/spidxbuttonweb.md).

# 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
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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.