Embebido (Componente)

Es una solución de cobro unificada que permite realizar el proceso de venta con múltiples métodos de pago. Consiste en una integración técnica única sea cual sea el método de pago integrado.

Es compatible con el resto de APIs existentes: Tokenización, Recurring Payments, Batch, …

Se embebe dentro de la página web existente del comercio, similar al comportamiento de un iframe.

Tiene un módulo de configuración de comercio que permite ocultar métodos, cambiar el orden y cambiar algunos textos. Se pueden crear perfiles.

Tiene un modelo de tokenización simplificado, llamado Wallet de Tokens.

El esquema de interacción de componentes es el siguiente:

Esta integración se realiza en tres pasos:

Crear la sesión de cobro con los datos de importe (Backend -> Sipay API).
Renderizar el muro de pagos en la web del comercio (FrontEnd -> BackEnd).
Confirmar la operación. El comercio podría cerrar el pedido (Bakend -> Sipay API).

Crear la sesión de cobro

La sesión de cobro se realiza mediante la llamada al API de payments en la creación de enlace.

El identificador de la sesión es el request_id que deberemos emplearlo en la integración del componente de frontend.

obtener el id de sesión
{
    "type": "resource.status",
    "code": "0",
    "detail": "Successful payment request.",
    "payload": {
        "url": "https://sandbox.sipay.es/payment/api/v1/6268ee6d5dff38d7bc33dd37/fastpay",
        "payment_methods": {
            "payment_method_name1": {
                "url": "https://sandbox.sipay.es/payment/api/v1/6268ee6d5dff38d7bc33dd37/payment_method_name1",
                "supports_card_data": true,
                "supports_security_data": true,
                "supports_tokenization": true,
                "supports_recurring": true,
                "available_card_capturers": [
                    "gpay",
                    "apay"
                ],
                "supports_refund": true,
                "supports_direct_payment": false
            },
            "payment_method_name2": {
                "url": "https://sandbox.sipay.es/payment/api/v1/6268ee6d5dff38d7bc33dd37/payment_method_name2",
                "supports_card_data": false,
                "supports_security_data": false,
                "supports_tokenization": false,
                "supports_refund": false,
                "supports_recurring": false,
                "available_card_capturers": [],
                "supports_direct_payment": true,
                "direct_url": "https://sandbox.sipay.es/payment/api/v1/6268ee6d5dff38d7bc33dd37/payment_method_name2/direct"
            }
            }
        }
    },
    "request_id": "6268ee6d5dff38d7bc33dd37",
    "uuid": "6268ee6d5dff38d7bc33dd37"
}

Renderizar el muro de pagos

La maquetación de la página contenedora del muro de pagos tiene los siguientes requerimientos:

Cargar los CSS de la solución de cobro.
Cargar las librerías de la solución de cobro.
Crear un elemento div donde se renderizará el muro de pagos.
Añadir el script principal y configurar sus data-* atributos.
Control de eventos

1. Cargar los CSS de la solución de cobro.

carga de css de Sipay
<!DOCTYPE html>
<html lang=en>
<head>
	<meta charset=utf-8>
	<meta http-equiv=X-UA-Compatible content="IE=edge">
	<meta name=viewport content="width=device-width,initial-scale=1">
	<link href="https://sandbox.sipay.es/pwall_app/css/app.css" rel=stylesheet>
	<title>Ejemplo de embebido</title>
</head>
<body>
  
	<div id=pwall-container></div>
  
	<script src="https://sandbox.sipay.es/pwall_sdk/pwall_sdk.bundle.js"></script>
	<script src="https://sandbox.sipay.es/hpp/js/app.js"></script>
	<script
        data-tags="redirect"
        data-profile="product_page"
        data-url="https://enfdpuc6lvgrkwf.m.pipedream.net"
        data-amount=""
       	data-currency="EUR" data-flavour="FastpayRedirect"        
        data-session_id="6268ee6d5dff38d7bc33dd37"
      	data-placeholder="#pwall-container"
        data-language=""
        data-method="fastpay"
      	src="https://sandbox.sipay.es/pwall_app/js/app.js">
	</script>
</body>
</html>

2. Cargar las librerías de la solución de cobro.

carga de librerías de Sipay
<!DOCTYPE html>
<html lang=en>
<head>
	<meta charset=utf-8>
	<meta http-equiv=X-UA-Compatible content="IE=edge">
	<meta name=viewport content="width=device-width,initial-scale=1">    
	<link href="https://sandbox.sipay.es/pwall_app/css/app.css" rel=stylesheet>
	<title>Ejemplo de embebido</title>
</head>
<body>
  
	<div id=pwall-container></div>
  
	<script src="https://sandbox.sipay.es/pwall_sdk/pwall_sdk.bundle.js"></script>

	<script src="https://sandbox.sipay.es/hpp/js/app.js"></script>
	<script
        data-tags="redirect"
        data-profile="product_page"
        data-url="https://enfdpuc6lvgrkwf.m.pipedream.net"
        data-amount=""
       	data-currency="EUR" data-flavour="FastpayRedirect"        
        data-session_id="6268ee6d5dff38d7bc33dd37"
      	data-placeholder="#pwall-container"
        data-language=""
        data-method="fastpay"
      	src="https://sandbox.sipay.es/pwall_app/js/app.js">
	</script>
</body>
</html>

3. Crear un elemento div donde se renderizará el muro de pagos.

elemento html donde se renderizan los métodos de cobro
<!DOCTYPE html>
<html lang=en>
<head>
	<meta charset=utf-8>
	<meta http-equiv=X-UA-Compatible content="IE=edge">
	<meta name=viewport content="width=device-width,initial-scale=1">    
	<link href="https://sandbox.sipay.es/pwall_app/css/app.css" rel=stylesheet>
	<title>Ejemplo de embebido</title>
</head>
<body>
  
	<div id=pwall-container></div>
  
	<script src="https://sandbox.sipay.es/pwall_sdk/pwall_sdk.bundle.js"></script>
	<script src="https://sandbox.sipay.es/hpp/js/app.js"></script>
	<script
        data-tags="redirect"
        data-profile="product_page"
        data-url="https://enfdpuc6lvgrkwf.m.pipedream.net"
        data-amount=""
       	data-currency="EUR" data-flavour="FastpayRedirect"        
        data-session_id="6268ee6d5dff38d7bc33dd37"
      	data-placeholder="#pwall-container"
        data-language=""
        data-method="fastpay"
      	src="https://sandbox.sipay.es/pwall_app/js/app.js">
	</script>
</body>
</html>

4. Añadir el script principal y configurar sus data-* atributos.

configuración del script principal
<!DOCTYPE html>
<html lang=en>
<head>
	<meta charset=utf-8>
	<meta http-equiv=X-UA-Compatible content="IE=edge">
	<meta name=viewport content="width=device-width,initial-scale=1">
	<link href="https://sandbox.sipay.es/pwall_app/css/app.css" rel=stylesheet>
	<title>Ejemplo de embebido</title>
</head>
<body>
  
	<div id=pwall-container></div>
  
	<script src="https://sandbox.sipay.es/pwall_sdk/pwall_sdk.bundle.js"></script>
	<script src="https://sandbox.sipay.es/hpp/js/app.js"></script>
	<script
        data-tags="redirect"
        data-profile="product_page"
        data-url="https://enfdpuc6lvgrkwf.m.pipedream.net"
        data-amount=""
       	data-currency="EUR" data-flavour="FastpayRedirect"
        data-session_id="6268ee6d5dff38d7bc33dd37"
      	data-placeholder="#pwall-container"
        data-language=""
        data-method="fastpay"
      	src="https://sandbox.sipay.es/pwall_app/js/app.js">
	</script>
</body>
</html>

Atributos data-*

data-url (string[url], required): URL para indicar el entorno de trabajo
- https://sandbox.sipay.es/ --> Entorno de integración
- https://live.sipay.es/ --> Entorno de producción
data-session-id (string, required): Valor del request_id recibido en la primera llamada API y que identifica la sesión de cobro.
data-amount (string, required): Valor entero del importe a cobrar con dos decimales en el caso del euro. Ejemplo: 10 euros serían “1000” porque completam os a 10,00. Solo tiene impacto a nivel visual. El importe final está configurado en la sesión.
data-currency (string, required): Acrónimo ISO para la indicar la moneda de cobro.
data-placeholder (string, required): Identificador “id” del elemento html que contendrá el renderizado del muro de pagos.
data-catcher (enum [true, false], optional: Indicaremos si queremos que se haga automáticamente el procesamiento del cobro con tarjeta o solo utilizaremos para capturar los datos. Valor por defecto false.
data-one-click-payment: (enum [true, false], optional): Indicaremos si queremos que los métodos de pago se activen automáticamente sin abrir el acordeón. true: Apple Pay y Google Pay se activarán con un solo click. false: Todos los métodos de pago necesitarán ser utilizados con el sistema de acordeón. El valor por defecto es false.
data-profile (string, optional): perfil de orden y aparición de los métodos de pago. El valor defecto es product_page.
data-language (string, optional, default: es): Idiomas soportados: es [castellano], en [inglés].
data-method (string, optional, default: fastpay): Permite visualizar un método de pago en concreto. Estos nombres cortos de métodos de pago son retornados en la primera llamada API. El valor de fastpay permite renderizar todos los que estén configurados en el data-profile elegido.

5. Control de eventos

	  window.PaymentWall.listenTo(document, "payment_wall_setup", function () {
		var placeholder = document.getElementById('pwall-container');
		window.PaymentWall.listenTo(placeholder, 'payment_wall_drawn', function () {});
		window.PaymentWall.listenTo(placeholder, 'payment_wall_payment_ok', function () {window.location.href = "http://sipay.es///ok"});
		window.PaymentWall.listenTo(placeholder, 'payment_wall_cancel', function () {window.location.href = "http://sipay.es/"});
		window.PaymentWall.listenTo(placeholder, 'payment_wall_payment_ko', function () {window.location.href = "http://sipay.es///ko"});
		window.PaymentWall.listenTo(placeholder, 'payment_wall_cart_data_set', function (ev) {window.set_cart(ev.detail);});
	  });
	  window.PaymentWall.start()

Confirmar la operación

La confirmación de la operación permite realizar la captura de fondos y con ello proceder a cerrar el pedido..

Se empleará nuevamente el request_id para el cierre de la transacción.

Crear la sesión de cobro​

Renderizar el muro de pagos​

1. Cargar los CSS de la solución de cobro.​

2. Cargar las librerías de la solución de cobro.​

3. Crear un elemento div donde se renderizará el muro de pagos.​

4. Añadir el script principal y configurar sus data-* atributos.​

5. Control de eventos​

Confirmar la operación​