Integration widget

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

Property	Description
`allowedFeatureLevel`	Indicates the type of flow to use, use `1` for a login flow or `2` for a payment flow.
`amount`	Required only for payment flow, the payment amount.
`currency`	Required 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

Property	Description
`operationNumber`	Operation identifier issued by the end user's bank.
`requestId`	Payment identifier stored by prometeo.

Session Object

Method	Description	Arguments
`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

Event	Callback Arguments	Description
`CLOSE`	-	The widget has been closed
`LOGIN`	`session`: Object to interact with the user's session.	User logged in successfully
`GET_OWNER_INFO`	`ownerInfo` Object with the user's information, structure is described in Información del titular	User's personal information was received
`GET_ACCOUNTS`	`accounts` Array of objects with the user's account data, structure is described in Listado de cuentas bancarias	User's accounts were received
`PAYMENT_SUCCESS`	`paymentResult` Payment information, described in PaymentResult	Payment was executed successfully
`ERROR`	`error` Error information	An error has occurred