Integration widget

How to integrate our widget to make payments and access end user banking information

Embedding quickstart

To start using the widget, its necessary to include the script tag with our initialization script:

<script src="https://cdn.prometeoapi.com/widget/1.0.0/static/js/init.js"></script>

The widget has to be initialized with it's id (configured in the administration dashboard)

var widget = Prometeo.init('widget-id');

And then we can start registering event listeners:

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}`);
});

Finally we call open() to show the widget to the user, with necessary payment information

widget.open({
  allowedFeatureLevel: 2, 
  currency: 'PEN', 
  amount: 12.34,
  concept: "Order 1234"
});

Here we use the following parameters:

  • allowedFeatureLevel with a value of 2 to indicate we are starting a payment flow
  • currency is the currency used for the payment in ISO 4217 format, in this case we use PEN for Peruvian Sol.
  • amount is the payment amount.
  • concept is the payment concept or reference.

Full sample code:

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

Widget SDK Reference

Widget Object

Method

Description

Arguments

open(usageParameters)

Shows the widget interface to the user.

usageParameters Object of type UsageParameters with the configuration parameters of the widget.

close()

Closes the widget interface.

on(messageId, callback)

Subscribes to user events on the widget, like logging into an account, receiving data, etc.

messageId The type of event to subscribe to.
callback The callback function, the arguments passed to it will depend on the type of event.

UsageParameters Object

PropertyDescription
allowedFeatureLevelIndicates the type of flow to use, use 1 for a login flow or 2 for a payment flow.
amountRequired only for payment flow, the payment amount.
currencyRequired only for payment flow, the currency used for the payment in ISO 4217 format.
concept (Optional)Optional for payment flow. Indicates the concept or reference of the payment. If it's not provided, the user will be prompted to fill this field.

PaymentResult Object

PropertyDescription
operationNumberOperation identifier issued by the end user's bank.
requestIdPayment identifier stored by prometeo.

Session Object

MethodDescriptionArguments
getOwnerInfo()Requests user's information, response is received as a GET_OWNER_INFO event.-
getAccounts()Requests user's bank accounts, response is received as a GET_ACCOUNTS event.-
getSessionKey()Returns the current session key, to be used with the banking API

Event Types

EventCallback ArgumentsDescription
CLOSE-The widget has been closed
LOGINsession: Object to interact with the user's session.User logged in successfully
GET_OWNER_INFOownerInfo Object with the user's information, structure is described in Información del titularUser's personal information was received
GET_ACCOUNTSaccounts Array of objects with the user's account data, structure is described in Listado de cuentas bancariasUser's accounts were received
PAYMENT_SUCCESSpaymentResult Payment information, described in PaymentResultPayment was executed successfully
ERRORerror Error informationAn error has occurred

Did this page help you?