Embebe el widget en tu sitio web (Payments API)

Describimos a alto nivel como es el flujo de inicialización de un pago utilizando Payments API

Creando un Intento de Pago

Creamos un intento de pago utilizando la API de Pagos https://docs.prometeoapi.com/reference/payment_intent_create, que contiene toda la información necesaria para realizar un pago utilizando el widget.

curl --request POST \
     --url https://payment.prometeoapi.net/api/v1/payment-intent/ \
     --header 'X-API-Key: API-KEY' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "product_type": "widget",
  "product_id": "0daf107a-2aa2-4661-a0ea-e7cf4ad2730c",
  "external_id": "bf5d88cc-f60c-4612-8739-15b3244fcd04",
  "concept": "PROM123452 REF454243",
  "currency": "USD",
  "amount": "1.00"
}
'

{
  "intent_id": "7a9151cc-60f2-4ea6-b4c3-277ba669de90",
  "external_id": "0daf107a-2aa2-4661-a0ea-e7cf4ad2730c",
  "concept": "PROM123452 REF454243",
  "currency": "USD",
  "amount": "1.00"
}

A continuación utilizaremos intent_id para inicializar el widget.

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) y un Intento de Pago Creado (intent-id). Lo obtienes después de configurarlo en la plataforma de administración de Prometeo.

var widget = Prometeo.init('widget-id', 'intent-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});

Aquí estamos usando los siguientes parámetros:

allowedFeatureLevel con un valor de 2 para indicar que estamos comenzando un flujo de pago.
currency es la moneda usada para el pago en formato ISO 4217 . En este caso usamos PEN para el Sol Peruano.
amount es el monto del pago.
concept es el concepto o referencia del pago.

Ejemplos completos de Integración

Armamos diferentes ejemplos completos de integración de Payments API con

Backend

Primero creamos un directorio vacío

mkdir a2a-sample  
cd a2s-sample

Ahora instalamos dependencias para el proyecto de Backend

pip install Flask requests

npm init
npm install axios express mustache mustache-express

Creamos un intento de pago que luego inyectaremos en el frontend

import requests
import os
from flask import Flask
from flask import render_template

URL_PAYMENTS = os.environ.get("URL_PAYMENTS", "https://payment.prometeoapi.net/api/v1/payment-intent/")
WIDGET_ID = os.environ.get("WIDGET_ID")
PROMETEO_API_KEY = os.environ.get("PROMETEO_API_KEY")

app = Flask(__name__)

def create_intent(concept, currency, amount):
	payload = {
      "product_type": "widget",
      "product_id": WIDGET_ID,
      "concept": concept,
      "currency": currency,
      "amount": amount
	}
	headers = {
      "accept": "application/json",
      "content-type": "application/json",
      "X-API-Key": PROMETEO_API_KEY
	}
	response = requests.post(URL_PAYMENTS, json=payload, headers=headers)
	return response.json()["intent_id"]

@app.route("/")
def index():
  	intent_id = create_intent("Prometeo Test", "USD", 100.0)
    return render_template('index.html', widget_id=WIDGET_ID, intent_id=intent_id)

const express = require('express')
const axios = require('axios')
const https = require('https')
const app = express()
const port = 3000

var mustacheExpress = require('mustache-express');
app.engine('mustache', mustacheExpress());

app.set('view engine', 'mustache');
app.set('views', __dirname + '/views');

const WIDGET_ID = process.env.WIDGET_ID;
const URL_PAYMENTS = process.env.URL_PAYMENTS || "https://payment.prometeoapi.net/api/v1/payment-intent/"
const PROMETEO_API_KEY = process.env.PROMETEO_API_KEY

const createIntent = (amount, currency, concept) => {

  const agent = new https.Agent({
    rejectUnauthorized: false
  });

  const options = {
    method: 'POST',
    url: URL_PAYMENTS,
    headers: {
      accept: 'application/json',
      'content-type': 'application/json',
      'X-API-Key': PROMETEO_API_KEY
    },
    data: {
      product_type: 'widget',
      product_id: WIDGET_ID,
      currency: currency,
      amount: amount,
      concept: concept
    },
    httpsAgent: agent
  };

  return axios
    .request(options)
    .then(function (response) {
      console.log(response.data);
      return response.data.intent_id;
    })
    .catch(function (error) {
      console.error(error);
    });
}

app.get('/', (req, res) => {
  createIntent("100.0", "USD", "Prometeo Test").then(
    (intent) => {
      console.log(intent);
      res.render('index', { widgetID: WIDGET_ID, paymentIntentID: intent});
    }
  )
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

En un template que llamaremos templates/index.html

<!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 }}', '{{ intent_id }}');

      widget.on(Prometeo.Messaging.CLOSE, () => {
        console.log('Event: CLOSE');
      });

      widget.on(Prometeo.Messaging.LOGIN, (session) => {
        console.log('Event: LOGIN');
      });

      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});
      }
    </script>
  </body>
</html>

<!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://prometeo-widget-qa.s3.us-west-2.amazonaws.com/1.0.0/static/js/init.js"></script>
  </head>
  <body>
    <button onclick="openWidget()">SHOW WIDGET</button>
    <script>
      var widget = Prometeo.init("{{widgetID}}", "{{paymentIntentID}}");

      widget.on(Prometeo.Messaging.CLOSE, () => {
        console.log('Event: CLOSE');
      });

      widget.on(Prometeo.Messaging.LOGIN, (session) => {
        console.log('Event: LOGIN');
      });

      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});
      }
    </script>
  </body>
</html>

Finalmente, para correr el ejemplo:

export FLASK_APP=app.py
export WIDGET_ID=YOUR-WIDGET-ID
export PROMETEO_API_KEY=YOUR-API-KEY
flask run

export WIDGET_ID=YOUR-WIDGET-ID
export PROMETEO_API_KEY=YOUR-API-KEY
node app.js

 * Serving Flask app 'app.py'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000

Example app listening on port 3000

Para ver los ejemplos completos podés dirigirte a nuestro repositorio https://github.com/prometeoapi/a2a-samples

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.
`paymentIntentId`	Payment Intent ID. Requerido solamente en el flujo de pagos.
`dynamicAmount`	Este parámetro booleano determina si el usuario debe ingresar manualmente el monto en el widget o si se proporciona automáticamente . Si se establece en true se espera que el usuario proporcione el monto de manera manual. Opcional
`dynamicTimer`	Este parámetro numérico permite definir la duración en segundos del temporizador personalizado en el widget. En caso de no especificar este parámetro, el temporizador por defecto será de 300 segundos (5 minutos). Opcional

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.

Parámetros de Personalización de Apariencia

Parameters	Description
`customStyles`	El diccionario `customStyles` permite la personalización de la apariencia del widget. A continuación, se describen los parámetros disponibles: `showCloseButton`, `hideExitButton` y `hideTimer`
`showCloseButton`	Este parámetro booleano controla la visibilidad del botón de cierre en el widget. Opcional
`hideExitButton`	Este parámetro booleano permite controlar si se muestra u oculta el botón de salida en el widget. Opcional
`hideTimer`	Este parámetro booleano permite controlar la visibilidad del temporizador en el widget. Opcional

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á descrita 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á descrita en Listado de cuentas bancarias	Las cuentas bancarias del usuario fueron recibidas exitosamente.
`PAYMENT_SUCCESS`	`paymentResult` Información del pago. La estructura está descrita en PaymentResult	El pago fue ejecutado exitosamente.
`ERROR`	`error` Información del error	Ha ocurrido un error.