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 vacio

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 una 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 podes 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.

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.