Pasarela de pagos (JavaScript)
Introducción
La librería Luka JS proporciona un objeto llamado luka
que tiene tres métodos públicos:
init()
updateMonto()
updateEmail()
La autenticación se realiza a través del token
que retorna el método de login
con las credenciales proporcionadas por Lukapay.
La librería está integrada con múltiples métodos de pagos especificadas aquí.
init
Función que inicializa y renderiza el componente en el nodo HTML especificado en el parámetro de entrada.
Parámetros de entrada
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
token | Token de validación y autenticación | String | Sí |
container | Id del nodo HTML en donde se van a mostrar los métodos de pago | String | Sí |
montoObj | Objeto que representa el monto que con se quiere hacer la operación | Object | Sí |
Dirección de correo electrónico del usuario que está realizando el pago. Se puede inicializar con null | String | No | |
idTraza | Identificador único que proporciona el comercio para identificar la transacción en los sistemas de Lukapay | String | No |
config | Objeto que le indica a la librería cómo va a mostrar el componente | Object | Sí |
callback | Función que la librería llama cuando se termina de procesar la transacción; debe recibir dos parámetros | Function | Sí |
preValidationCall | Función opcional que proporciona el comercio. Tiene que retornar true o false | Function | No |
postLoadCallback | Función opcional que se ejecuta cuando se termina de cargar el componente en la página Web | Function | No |
extraObj | Objeto que permite agregar información adicional a la librería | Object | No |
Propiedades de objetos
montoObj
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
monto | Monto que se quiere procesar en la transacción | Number | Sí |
numeroDecimales | Número de decimales con que se quiere que se muestre el monto | Number | No |
separadorMiles | Indica el separador de miles que se va a usar. Por default, se usará el punto (.) | String | No |
separadorDecimal | Indica el símbolo que se va a utilizar para separar la parte entera de la parte decimal. Por default, se usará la coma (,) | String | No |
config
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
moneda | Moneda en que se va a realizar la transacción | String | No |
idioma | Idioma en que se va a mostrar la librería | String | No |
metodos | Métodos de pago a cargar en el componente. Es una cadena de texto separados por coma. Ej.: "tdc, paypal" Ver claves de métodos de pago | String | No |
terminos | Objeto que representa la forma como se van a mostrar los términos y condiciones | Object | No |
color | Color en hexadecimal con que se va a mostrar el componente | String | No |
seleccion | Indicador si se va a mostrar los métodos de pagos como radio buttons o pestañas. Valores posibles: 1: Radio button, 2: Pestañas | Number | No |
paypal | Objeto de configuración del botón de Paypal | Object | No |
fuente | Nombre de la fuente en la cual se va a cargar el componente (si es un webfont debe estar previamente cargado) | String | No |
showSkeletonLoading | Indicador si se debe mostrar una animación antes de cargar los campos del formulario de pago. Valores posibles: true o false. Default: false | Boolean | No |
fnValidacionEsAsync | Indicador si la función opcional de validación proporcionada por el comercio es asíncrona o síncrona: Valores posibles: true o false. Default: false | Boolean | No |
guardarEnBoveda | Propiedad que indica si se debe guardar la información de la tarjeta de crédito/débito en la bóveda de usuarios. Se aplica solo para tarjetas de crédito/débito | Boolean | No |
horizontal | Propiedad que indica si se debe mostrar las opciones de pago en horizontal. Valores posibles: true o false. Default: true | Boolean | No |
estilos | Objeto con estilos adicionales | Object | No |
terminos
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
tipo | Indicador del tipo de términos y condiciones que se va a mostrar. Puede tener los valores: "1": simple, "2": con checkbox | String | No |
comportamiento | Puede ser un string o una función. String: se asume que es un enlace y se abre un popup cuando se hace clic. Función: se ejecuta cuando se hace clic. | String / Function | No |
paypal
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
color | Indicador del color que se va a mostrar en el botón de Paypal. Valores posibles: blue, gold, black, white, silver. Default: black | String | No |
ocultarMonto | Ocultar monto en el botón de Paypal | Boolean | No |
extraObj
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
nombrePagador | Nombre de la persona que está realizando el pago | String | No |
referenciaPago | Identificador del pago de cara al cliente (Ejemplo: número de factura, identificación del contrato) | String | No |
mostrarPoweredBy | Mostrar “Powered by” | Boolean | No |
montoOriginal | Objeto con información del monto original. Se utiliza cuando se debe aplicar una conversión de moneda | Object | No |
lukapayId | Identificación de registro del usuario en la bóveda de tarjetas. Se devuelve cuando se especifica true en guardarEnBoveda | String | No |
mostrarCargosAdicionales | Mostrar cargos adicionales | Boolean | No |
cuotasConfig | Objeto de configuración de cuotas | Object | No |
montoOriginal
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
Monto | Indica el monto de la transacción antes del cambio de moneda | Number | Sí |
Moneda | Indica el código de la moneda de la transacción antes del cambio de moneda | String | Sí |
TasaConversion | Indica la tasa de cambio utilizada durante la conversión de moneda | Number | Sí |
cuotasConfig
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
idConfig | Identificador único de la configuración de cuotas | Number | Sí |
Parámetros de salida
La librería devuelve el objeto de la respuesta a través de la función que se indica en la propiedad callback
proporcionada en el método init
.
Nombre | Descripción | Tipo |
---|---|---|
Canal | Indica el canal que se está utilizando para aplicar el pago en Lukapay | Number |
CargosAdicionales | Objeto que contiene cargos adicionales. | Object |
Cuotas | Objeto que contiene información sobre cuotas. | Object |
Descripción | Contiene la respuesta de la aplicación del pago, como estatus de la transacción y cualquier información adicional | String |
Exitoso | Indica si la transacción fue exitosa o no. Se utiliza para validar la respuesta | Boolean |
FechaOperacion | Fecha que ocurrió la transacción | String |
InfoProceso | Objeto que contiene información más detallada del estatus de la transacción | Object |
InfoTarjeta | Objeto que contiene información de la tarjeta de crédito utilizada para realizar el pago. Solo aplica para pagos con tarjeta | Object |
InfoUsuarioPagador | Objeto que devuelve información básica del usuario que realiza el pago | Object |
MedioDePago | Indica el método de pago que se utilizó | String |
MerchantId | Referencia de la transacción del merchant utilizado para aplicar el pago | String |
Moneda | Código de la moneda utilizada para realizar el pago | String |
Monto | Indica el monto del pago realizado | Number |
MontoOriginal | Objeto con información del monto original. Se utiliza cuando se debe aplicar una conversión de moneda | Object |
MontoUsd | Valor del monto en dólar estadounidense. Se utiliza cuando se especifica el MontoOriginal | Number |
TarjetaHabiente | Objeto que contiene información del pagador (en caso de haber sido especificado) | Object |
TransaccionId | Referencia de la transacción en Lukapay | Number |
TransaccionMerchantId | Referencia de la transacción del merchant utilizado para aplicar el pago | Number |
TrazaId | Identificador interno del comercio. En caso de que el comercio no lo proporcione se genera un código aleatorio | String |
Propiedades de objetos
CargosAdicionales
Nombre | Descripción | Tipo |
---|---|---|
Comision | Comisión del método de pago seleccionado | Number |
OtrosCargos | Otros cargos y comisiones que se agregan a la transacción | Array |
TotalCargos | Suma total de la comisión y otros cargos | Number |
MonedaCargos | Moneda en la que se expresan la comisión y cargos | String |
Cuotas
Nombre | Descripción | Tipo |
---|---|---|
Cuotas | Array de objetos que contienen detalles de cada cuota. | Array |
Contrato | Código asociado con las cuotas de pago | String |
Monto | Monto total de las cuotas de pago | String |
Moneda | Código de la moneda utilizada para realizar el pago | String |
UrlLink | Url del link del pago de cuotas | String |
Propiedades del objeto contenido en el array Cuotas del objeto Cuotas
Nombre | Descripción | Tipo |
---|---|---|
NumCuota | Número de la cuota de pago | Number |
Monto | Monto de la cuota de pago | String |
FechaCorte | Fecha límite para el pago de la cuota | String |
FechaExpiracion | Fecha que expira el pago de la cuota | String |
InfoProceso
Nombre | Descripción | Tipo |
---|---|---|
EstatusProcesamiento | Estatus del procesamiento | String |
CodigoRespuestaCvv | Código de respuesta CVV | String |
InfoTarjeta
Nombre | Descripción | Tipo |
---|---|---|
Bin | El número de identificación bancaria (BIN). Estos son los primeros 4 a 6 dígitos del número de la tarjeta de crédito. | String |
CategoriaTarjeta | Indica si la tarjeta es de tipo comercial o personal | String |
FechaVencimiento | Fecha de expiración de la tarjeta de crédito con formato MM/YYYY | String |
Pais | Código ISO del país de emisión de la tarjeta de crédito | String |
SubTipoTarjeta | Indica si la tarjeta es de crédito o débito | String |
TipoTarjeta | Indica el tipo de la tarjeta de crédito. Ejemplo: VISA, MASTER | String |
UltimosCuatroDigitos | Valor que indica los 4 últimos dígitos de la tarjeta. | String |
InfoUsuarioPagador
Nombre | Descripción | Tipo |
---|---|---|
Apellido | Apellido del usuario que realiza la operación | String |
Nombre | Nombre del usuario que realiza la operación | String |
Correo electrónico del usuario | String | |
NumeroIdentidad | Cédula o número de identidad del usuario | String |
NumeroTelefono | Número de teléfono del usuario | String |
TarjetaHabiente
Nombre | Descripción | Tipo |
---|---|---|
Apellido | Apellido del usuario que realiza la operación | String |
Nombre | Nombre del usuario que realiza la operación | String |
NúmeroIdentificacionPersonal | Cédula o número de identidad del usuario | String |
NumeroTelefono | Número de teléfono del usuario | String |
LukapayId | Identificación de registro del usuario en la bóveda de tarjetas. ste valor se devuelve sólo cuando se especifica el valor TRUE en la propiedad guardarEnBoveda en el método Init. El comercio debe guardar este valor en su propia base de datos de clientes. | String |
Ejemplo de uso
luka.init("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_ adQssw5c",
'container',
{
"monto": 16.03,
"numeroDecimales": null,
"separadorMiles": "",
"separadorDecimal": ""
},
"demo@example.com",
"xxxxxxxxxxxxxx",
{
formBorde: false,
moneda: "USD",
terminos: {
"tipo": "1"
},
idioma: "esp",
color: "c41616",
metodos: "zelle,paypal",
paypal: {
color: "gold"
},
fuente: "Montserrat",
seleccion: 2,
showSkeletonLoading: true,
fnValidacionEsAsync: true,
guardarEnBoveda: false,
horizontal: false,
estilos: {
"color": "#0516b1"
}
},
function (result, error) {
if (error) {
//código para manejar el error
} else {
if (result.Exitoso) {
//código para transacción exitosa
} else {
//código para transacción fallida
}
}
},
function () {
//código de validación interna
return true;
},
function () {
//código con componente cargado
},
{
"nombrePagador": "John Doe",
"referenciaPago": "151515",
"lukapayId": "548791",
"cuotasConfig": {
"idConfig": "4"
}
}
);
updateMonto
Permite actualizar el monto a pagar en el componente. Esta función puede ser utilizada cuando se desea cambiar el monto de la transacción después de que el componente ha sido inicializado.
Parámetros de entrada
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
monto | Monto al cual se quiere actualizar en la transacción | Number | Sí |
token | Token de validación y autenticación | String | Sí |
Parámetros de salida
La función devuelve true
o false
para indicar si se actualizó o no el monto.
Ejemplo de uso
luka.updateMonto(28.14,
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_ adQssw5c"
);
updateEmail
Permite actualizar el monto a pagar en el componente. Esta función puede ser utilizada cuando se desea cambiar el monto de la transacción después de que el componente ha sido inicializado.
Parámetros de entrada
Nombre | Descripción | Tipo | Obligatorio |
---|---|---|---|
Email al cual se quiere actualizar en la transacción | Number | Sí | |
token | Token de validación y autenticación | String | Sí |
Parámetros de salida
La función devuelve true
o false
para indicar si se actualizó o no el monto.
Ejemplo de uso
luka.updateEmail("demo@payco.net.ve",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_ adQssw5c"
);
Webhooks para pagos diferidos
Nuestra plataforma valida en línea la referencia de pago registrada por el usuario. Si no se encuentra automáticamente, la transacción se marca como "Pendiente por revisión" y se reintenta hasta 5 veces cada 2 minutos. Si aún no se encuentra, se revisa manualmente. En estos casos, el usuario es notificado por correo. En la integración, el campo Exitoso será true, pero se debe verificar InfoProceso.EstatusProcesamiento para conocer el estatus real del pago: success (exitoso) o pending (pendiente). El estatus final se envía a través de un webhook.
Demo
El demo de la implementación de la librería está disponible en: