|

Widget Movired

Introducción

El Widget de Movired es uno de nuestros productos que te permitirán integrar pagos fácilmente

Convenciones

La URL base para enviar todas las solicitudes de API es https://widget.movired.cl. Se requiere HTTPS para todas las solicitudes de API.

La API de Movired sigue las convenciones RESTfull en la medida de lo posible, y la mayoría de las operaciones se realizan mediante solicitudes GET y POST en recursos de páginas y bases de datos. Los cuerpos de solicitud y respuesta se codifican como JSON.

Ejemplos de código y SDK

Se muestran ejemplos de solicitudes y respuestas para cada punto final. Las solicitudes se muestran usando Javascript. Estos ejemplos hacen que sea fácil de copiar, pegar y modificar a medida que construyes la integración.

Endpoints Soportados

RESPUESTAS

Códigos de estado

Los códigos de respuesta HTTP se usan para indicar clases generales de éxito y error.

Código de éxito

Códigos de error

Las respuestas de error contienen más detalles sobre el error en el cuerpo de la respuesta, en las propiedades status_code y errores.

Endpoints

Endpoints

Nombre	Tipo	URL	Descripción
Crear Código de Autorización	POST	https://widget.movired.cl/api/widget/get-authorization	Crear token de autorización para instanciar el Widget de Movired y para utilizar el endpoint “Crear Private Token”(modo Pasarela y Recarga tipo 2).
Crear private token	POST	https://widget.movired.cl/api/widget/create-token	Crea un Private Widget Token para inicializar el Widget de Movired en modo pasarela y/o recarga tipo 2
Consulta transacción	POST	widget.movired.cl/api/widget/verify-payment	Consultar el estado de una transacción

Explicación de modos y usos de endpoints.

En el apartado anterior se encuentra la explicación de los endpoints, como aclaración toma nota de lo siguiente:

1. Si usarás el widget en modo pasarela primero debes obtener un código de autorización utilizando el endpoint “Crear Código de Autorización”. Luego puedes usar el código que obtienes ahí para utilizar el endpoint “Crear private token”, después de eso solo sigue las instrucciones para instanciar el Widget de Movired.

2. Si usarás el widget en modo recarga tipo 1 primero debes obtener un código de autorización utilizando el endpoint “Crear Código de Autorización”. Luego puedes instanciar el Widget de Movired siguiendo las instrucciones del apartado “Inicializando el Widget”

3. Si usarás el widget en modo recarga tipo 2 primero debes obtener un código de autorización utilizando el endpoint “Crear Código de Autorización”. Luego puedes usar el código que obtienes ahí para utilizar el endpoint “Crear private token”, después de eso solo sigue las instrucciones para instanciar el Widget de Movired.

La librería

Para hacer uso del Widget de Movired debes incluir el tag script que carga la librería de Movired. Esta librería contiene todo lo necesario para poder inicializar el widget, para hacerlo agrega el siguiente tag en tu código HTML.

<script href="https://widget.movired.cl/js/movired.js"></script>

Recuerda agregarlo a la pagina donde se desplegará el Widget de Movired. Ademas ten en cuenta que la librería debe estar cargada antes de ser utilizada.

Inicializando el widget

Recuerda que previamente debes obtener un Private Widget Token para poder inicializar el widget, esto lo haces usando el endpoint “crear widget token” y es necesario sólo si tu token esta configurado para usar el widget en modo Pasarela de Pagos o Recarga tipo 2.

Una vez que obtuviste el Private Widget Token(solamente es necesario para el modo Pasarela y Recarga tipo 2) y la librería está cargada, puedes configurar el Widget de Movired para desplegarlo por pantalla, para hacerlo debes usar el siguiente código que detallaremos a continuación:

<script>
		Movired.init({
	      publicToken: tu_public_token,
	      widgetToken: tu_private_widget_token,
		  authorizationToken: authorization_token,
	      config: {
	          size: "small",
	          color: "green",
	          logo: "https://cdn.movired.cl/header/logo-movired-rojo.png",
	          textColor: "#AFB234",
	          buttonColor: "#AFB234",
	          toastColor: "#AFB234",
	          backdropColor: "#AFB23457",
						selectColor: "#AFB23457"
	      },
	      onEvent: function (e) {
	          console.log(e)
	      },
	      onExit: e => console.log(e),
	      onCreated: e => console.log(e),
				user: {/*objeto solo inicializable en modo recarga*/
						email: development@movired.cl,
						amount: 1500,
						number: 111111111,
						navigate: "bip!QR"
				}
	  });
</script>

Nota que la función Movired.init(configuración) recibe un objeto de configuración que permite indicar una serie de parámetros explicados en el siguiente resumen:

1. publicToken: Parámetro obligatorio que recibe un string con el publicToken otorgado por el equipo de Movired.

2. widgetToken: Parámetro obligatorio(solo para widget modo Pasarela o Recarga tipo 2) que recibe un string con el Private Widget Token que obtuviste al hacer el request al endpoint “crear widget token”.

3. authorizationToken: Parámetro obligatorio que recibe un string con un código de autorización que previamente debes obtener a través del endpoint “Crear código de autorización”.

4. config: Parámetro opcional que recibe un json, permite configurar visualmente el widget, en caso de no proporcionarlo el widget tendrá su aspecto por defecto.
   1. size: Parámetro opcional que permite ajustar el tamaño(ancho) del widget, admite el valor “small” y “large”. El size “small” dispone los elementos del widget en una única columna independiente del tamaño de pantalla en que se visualice, mientras que el size “large” dispone los elementos en dos columnas para dispositivos tipo notebook o pc y en una única columna en dispositivos móviles.
   2. color: Parámetro opcional que recibe un string y permite implementar colores a los controles principales del widget(textos principales, color de botones, color del backdrop, color del toast). Los temas disponibles para elegir son los siguientes: “purple”, “red”, “blue”, “green”, “yellow”, “orange”.
   3. logo: Parámetro opcional que recibe un string(url), lo que permite agregar un logo en la parte superior del widget, en caso de no proporcionar uno el logo que se visualizará será el de Movired. Importante optimizar el tamaño del logo para su correcta visualización en el espacio disponible para ello, para lograrlo la imagen ideal debe tener 240px de ancho por 40px de alto.
   4. textColor: Parámetro opcional que recibe un string(color hexadecimal) que permite sobrescribir el color de los textos principales del tema seleccionado.
   5. buttonColor: Parámetro opcional que recibe un string(color hexadecimal) que permite sobrescribir el color de los botones del tema seleccionado.
   6. toastColor: Parámetro opcional que recibe un string(color hexadecimal) que permite sobrescribir el color del toast del tema seleccionado.
   7. backdropColor: Parámetro opcional que recibe un string(color hexadecimal) que permite sobrescribir el color de fondo del tema seleccionado.
   8. selectColor: Parámetro opcional que recibe un string(color hexadecimal) que permite sobrescribir el color de selección de los montos en la sección de recarga.

5. onEvent: Parámetro opcional que recibe una función que se ejecuta cuando el Widget de Movired emite eventos importantes dentro del ciclo del Widget, los eventos son:
   1. widget_initialized: Evento que se dispara cuando el Widget esta montado.
   2. get_user_data: Evento que se dispara cuando se obtienen los datos del usuario(Widget Pasarela).
   3. widget_closed: Evento que se dispara cuando el Widget es cerrado por el usuario.

6. onExit: Parámetro opcional que recibe una función que se ejecuta cuando el Widget de Movired es cerrado(widget_closed).

7. onCreated: Parámetro opcional que recibe una función que se ejecuta cuando el Widget de Movired es inicializado(widget_initialized).

Parámetros configurables en Widget Recarga:

8. user: Parámetro opcional que recibe un json para configurar y pre-cargar información de la recarga, los parámetros son los siguientes:

WebHook

Cuando el usuario interactúa con el Widget de Movired y ha finalizado el proceso de pago nuestro backend internamente recibe la notificación del estado del pago efectuado a través del Widget y en caso de que el pago es exitoso(estado 4) se notifica además con el estado de la recarga cuando se utiliza el Widget en modo Recarga. Esta información puede ser enviada a sus servidores a través de una url que nos debe indicar. La información que enviaremos esta codificada en formato JSON y sigue la siguiente estructura

{
		"estado_pago": estado,		
    	"estado_carga": estado,
		"id_trx": id_trx,
		"monto": monto,
		"numero": numero,
		"email": email,
		"fecha": fecha,
		"token": token,
		"external_id": external_id(opcional)
}

Aclaremos las propiedades del objeto:

a. estado_pago : El campo estado_pago indica el estado de la transacción, puede tomar valores del 1 al 4, donde estos son:

b. El campo estado_carga indica el estado de recarga, puede tomar valores 0 o 1, donde 0 indica que la carga no fue realizada y 1 la carga se realizó correctamente.

c. id_trx : El campo id_trx indica nuestro id interno de la transacción.

d. monto : El campo monto indica el monto pagado por el usuario mediante el widget.

e. numero : El campo numero indica el número de la cuenta a la que se realiza el pago/carga.

f. email : El campo email indica el correo electrónico del usuario indicado en el widget.

g. fecha: El campo fecha , con formato (yyyy-mm-dd hh:mm:ss), indica la fecha en que recibimos la notificación de la transacción.

h. token : El campo token indica el token único creado en el uso Widget de Movired, este token puede ser pasado al endpoint “consulta transacción” para ver el estado de la transacción.

i. external_id : El campo opcional external_id , indica el id externo recibido por el endpoint “crear private token” en la modalidad de “widget Pasarela”.

Prueba el Widget de Movired

Recuerda obtener un código de autorización antes de instanciar el Widget de Movired. Esto lo haces utilizando
el endpoint "Crear codigo de autorización" y es necesario para utilizar el Widget y el endpoint "Crear Private Token".

1.- Widget Modo Pasarela

En este modo es necesario obtener un private widget token, usando el endpoint "Crear Private Token"

2.- Widget Modo Recarga Tipo 1

3.- Widget Modo Recarga Tipo 2

En este modo es necesario obtener un private widget token, usando el endpoint "Crear Private Token"

Aquí puedes probar las distintas configuraciones visuales que permite nuestro widget.