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

    <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:

<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>

Last updated