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

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

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