Embebe el widget en tu sitio web
Te explicamos cómo integrar nuestra interfaz para recibir pagos de tus clientes.
Quickstart embebido
Para comenzar a usar el widget, es necesario incluir el tag de script
con nuestro script de inicialización:
<script src="https://cdn.prometeoapi.com/widget/1.0.0/static/js/init.js"></script>
El widget debe ser inicializado con su identificador ('widget id'). Lo obtienes después de configurarlo en la plataforma de administración de Prometeo.
var widget = Prometeo.init('widget-id');
Ahora puedes registrar oyentes de eventos:
widget.on(Prometeo.Messaging.LOGIN, (session) => {
console.log('Event: LOGIN');
session.getAccounts();
});
widget.on(Prometeo.Messaging.GET_ACCOUNTS, (accounts) => {
console.log('Event: GET_ACCOUNTS');
console.log(`accounts: ${accounts}`);
});
Finalmente puedes invocar open()
para exponerle el widget a tus usuarios finales, con la información del pago necesaria.
widget.open({
allowedFeatureLevel: 2,
currency: 'PEN',
amount: 12.34,
concept: "Order 1234"
});
Aquí estamos usando los siguientes parámetros:
allowedFeatureLevel
con un valor de2
para indicar que estamos comenzando un flujo de pago.currency
es la moneda usada para el pago en formato ISO 4217 . En este caso usamosPEN
para el Sol Peruano.amount
es el monto del pago.concept
es el concepto o referencia del pago.
Ejemplo completo del código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Sample Widget Usage</title>
<script src="https://cdn.prometeoapi.com/widget/1.0.0/static/js/init.js"></script>
</head>
<body>
<button onclick="openWidget()">SHOW WIDGET</button>
<script>
var widget = Prometeo.init('widget-id');
widget.on(Prometeo.Messaging.CLOSE, () => {
console.log('Event: CLOSE');
});
widget.on(Prometeo.Messaging.LOGIN, (session) => {
console.log('Event: LOGIN');
session.getOwnerInfo();
session.getAccounts();
});
widget.on(Prometeo.Messaging.GET_OWNER_INFO, (ownerInfo) => {
console.log('Event: GET_OWNER_INFO');
console.log(`ownerInfo: ${ownerInfo}`);
});
widget.on(Prometeo.Messaging.GET_ACCOUNTS, (accounts) => {
console.log('Event: GET_ACCOUNTS');
console.log(`accounts: ${accounts}`);
});
widget.on(Prometeo.Messaging.ERROR, (error) => {
console.log('Event: ERROR');
console.log(`error: ${error}`);
});
widget.on(Prometeo.Messaging.PAYMENT_SUCCESS, (payload) => {
console.log('Event: PAYMENT_SUCCESS');
console.log(`payload: ${payload}`);
});
const openWidget = () => {
widget.open({allowedFeatureLevel: 2, currency: 'PEN', amount: 1, concept: "Order 1234"});
}
</script>
</body>
</html>
Referencia del SDK del widget
Objeto del widget
Method | Description | Arguments |
---|---|---|
open(usageParameters) | Muestra la interfaz del widget al usuario. | usageParameters Objeto del tipo UsageParameters con los parámetros de configuración del widget. |
close() | Cierra la interfaz del widget. | - |
on(messageId, callback) | Suscribe a los eventos que el usuario realiza en el widget. Por ejemplo: iniciar sesión en una cuenta, recibir datos, etc. | messageId El tipo de evento al que se quiere suscribir.callback La función de callback. Los argumentos que se envíen dependerán del tipo de evento. |
Objeto de parámetros de uso
Property | Description |
---|---|
allowedFeatureLevel | Indica el tipo de flujo a utilizar.1 para el flujo de iniciar sesión.2 para el flujo de pago. |
amount | Monto del pago. Requerido solamente en el flujo de pagos. |
currency | La moneda usada para el pago en formato ISO 4217. Requerido solamente en el flujo de pagos. |
concept | Indica el concepto o referencia del pago. Si no está indicado, el campo será completado libremente por el usuario final. Necesario para el flujo de pagos. |
Objeto de resultado del pago
Property | Description |
---|---|
operationNumber | Identificador de operación emitido por el banco del usuario final. |
requestId | Identificador del pago guardado por Prometeo. |
Session Object
Method | Description | Arguments |
---|---|---|
getOwnerInfo() | Solicita información del usuario final. La respuesta es recibida como un evento de GET_OWNER_INFO . | - |
getAccounts() | Solicita las cuentas bancarias del usuario final. La respuesta es recibida como un evento de GET_ACCOUNTS . | - |
getSessionKey() | Devuelve el identificador de sesión actual, para usarse en la banking API |
Event Types
Event | Callback Arguments | Description |
---|---|---|
CLOSE | - | El widget ha sido cerrado. |
LOGIN | session : Objeto para interactuar con la sesión del usuario. | El usuario inició sesión exitosamente. |
GET_OWNER_INFO | ownerInfo Objeto con la información del usuario. La estructura está descripta en Información del titular | La información personal del usuario fue recibida exitosamente. |
GET_ACCOUNTS | accounts Arreglo de objetos con la información de las cuentas del usuario. La estructura está descripta en Listado de cuentas bancarias | Las cuentas bancarias del usuario fueron recibidas exitosamente. |
PAYMENT_SUCCESS | paymentResult Información del pago. La estructura está descripta en PaymentResult | El pago fue ejecutado exitosamente. |
ERROR | error Información del error | Ha ocurrido un error. |
Updated about 1 month ago