Complementa la integración JavaScript

En esta página podrás complementar y ampliar la información de la guía de Integración JavaScript. Haz clic en el enlace para aprender cómo integrar Addon Payments de esa forma.

Flujo de la transacción

A continuación, tienes un diagrama con todo el proceso que sigue la integración JavaScript.

El flujo que sigue es el siguiente:

El comercio realiza una solicitud de authToken y transmite información relacionada con el comercio y el cliente.
Addon Payments devuelve un authToken único y de un solo uso que está vinculado a los datos enviados.
En este momento, el comercio podría enviar el authToken al navegador del cliente y comenzar a procesar el cajero Addon Payments JS.
Utilizando authToken, el comercio presenta el formulario de pago en caja.
El cliente competa toda la información del cliente o del pago y envía el formulario.
Addon Payments recopila la información de pago y genera un prepayToken único que está vinculado a los valores solicitados de authToken originales. Una vez que se genera el token, Addon Payments realizará una llamada al método merchantPrePayCallback que se establece en el paso 4.
Envía el prepayToken al backend del comercio.
Crea y realiza la solicitud charge configurando todos los parámetros requeridos. Recuerda que hay que enviar el prepayToken en la solicitud.
Addon Payments hace el charge.
Addon Payments obtiene la respuesta de la solución de pago.
Addon Payment devuelve la respuesta del charge al comercio. Dependiendo de la respuesta, podría requerir alguna redirección del cliente.
El pago se completa al finalizar el estado final.
El pago requiere una redirección del cliente, por lo que el comercio debe redirigir al cliente a la URL del tercero, indicada en la respuesta.
El cliente interactúa con la página de la solución de pago.
La solución de pago informa el estado del pago.
Addon Payment envía una notificación al comercio usando el campo statusURL de la solicitud.
El comercio muestra la página de pago final al cliente.

Entornos: Staging y Producción

Addon Payments cuenta con dos (2) entornos operativos independientes:

Entorno de Staging:
- Es el primer entorno con el que entrarás en contacto.
- Tienes a tu disposición un listado de tarjetas para pruebas que permiten realizar transacciones simulando diferentes operativas, tipos de autenticación (frictionless, challenge) y resultados (autorizada, denegada).
- Esto te permite comprobar la correcta gestión de las diferentes casuísticas por parte de tu integración.
- Las tarjetas y cuentas reales no funcionan.
Entorno de Producción:
- Es el entorno en el que las transacciones tienen efectos contables.
- Únicamente se puede transaccionar con tarjetas y cuentas reales y operativas.

Esta es una tabla con los endpoints donde enviar la petición, ya sea de autorización o de pago, según el entorno donde operes:

Petición	Entorno	URL
Petición /auth	Staging	https://epgjs-mep-stg.addonpayments.com/auth
Petición /charge	Staging	https://epgjs-mep-stg.addonpayments.com/charge/v2
Petición /auth	Producción	https://epgjs-mep.addonpayments.com/auth
Petición /charge	Producción	https://epgjs-mep.addonpayments.com/charge/v2

A continuación, tienes una tabla con la biblioteca de AP de JavaScript que debes importar y la llamada para definir la URL base de la pasarela de pago.

Debes añadir, en la página de pago de tu plataforma de comercio electrónico, un elemento HTML <script> con la ruta de la biblioteca JS de AP. Esta ruta debe incluir la versión de la biblioteca a cargar. Actualmente recomendamos la versión 4.0.0.

Función	Entorno	URL
Importar la biblioteca JS de Addon Payments	Staging	https://epgjs-rendercashier-stg.addonpayments.com/js/public/epgjs-[versión]-min.js
Definir la URL base de la pasarela de pago	Staging	https://epgjs-web-stg.addonpayments.com/
Importar la biblioteca JS de Addon Payments	Producción	https://epgjs-rendercashier.addonpayments.com/js/public/epgjs-[versión]-min.js
Definir la URL base de la pasarela de pago	Producción	https://epgjs-web.addonpayments.com/

Obtención del authToken

El primer paso en la integración JavaScript es obtener el «authToken», que nos permite renderizar el cajero. Se debe mandar una petición con los datos mínimos que mostramos a continuación:

				
					{   
    "merchantId": "12345",
    "merchantKey": "dd0bc115-6f8f-4e65-9447-e06862eb62ec",
    "productId": "123450001",
    "currency": "EUR",
    "country": "ES",
    "customerId": "customer25879",
    "operationType": "debit"
}

				
					curl --location 'https://epgjs-mep-stg.addonpayments.com/auth' \
--header 'Content-Type: application/json' \
--data '{
    "merchantId": "12345",
    "merchantKey": "dd0bc115-6f8f-4e65-9447-e06862eb62ec",
    "productId": "123450001",
    "currency": "EUR",
    "country": "ES",
    "customerId": "customer25879",
    "operationType": "DEBIT"
}'

Si la petición es válida, Addon Payments te devolverá un «authToken» con el que podrás renderizar el cajero en el frontal de tu página. Si la petición no es válida, se devolverá un mensaje como el que ves en la segunda pestaña:

				
					{
    "authToken": "50fe7cab-63c4-4197-9484-50f9a0792f8b"
}

				
					{
    "error": true,
    "errorMessage": "Invalid merchant id or merchant key",
    "errorCode": 400
}

Tu plataforma debe almacenar este código para continuar con el siguiente paso. Las referencias de autorización recibidas tienen las siguientes características:

Validez de 30 minutos.
Puede ser usada varias veces para enlazar la pasarela de pago.

Parámetros de la solicitud authToken

El tipo indica si el elemento es Requerido (R) u Opcional (O).

Campo	Formato	Tipo	Descripción	Ejemplo
merchantId	Numérico entero 4~7 dígitos	R	Es el indicador de tu comercio en la plataforma de AP. Es facilitado por Soporte en el correo de bienvenida, es común para los dos entornos	14983
merchantKey	Alfanumérico Formato UUID	R	Es la contraseña de JavaScript. Se usa para verificar que la petición es legítima. Para el entorno de staging se envía en el correo de bienvenida, en entornos de producción se recupera a través del BackOffice.	67a33d37-64b9-408e-a1b7-cef28ef94970
productId	Numérico entero 6~11 dígitos	R	Identificador del producto creado en tu comercio en AP. Es facilitado en el correo de bienvenida.	149830
currency	Alfabético 3 caracteres ISO-4217.3	R	Divisa de la transacción	EUR
country	Alfabético 2 caracteres ISO 3166-1 alfa-2	R	País desde el que se envía la transacción	ES
customerId	Alfanumérico Máx. 80 caracteres	R	Id. del cliente en tu plataforma de comercio electrónico. – Para guardar la tarjeta del cliente, usa el parámetro «forceTokenRequest«, con valor «true» para guardar el token y «false» para no hacerlo. – Para que el cliente vea o no la opción de recordar su tarjeta, usa el parámetro «showRememberMe«, con valor «true» para mostrarle y «false» para ocultarlo.	A34623
operationType	Alfanumérico Máx. 45 caracteres	R	Especifica el tipo de operación a realizar. Valores admitidos: – debit (por defecto): Transacción de pago. Es decir, el efectivo viaja desde la cuenta del cliente al comercio. – credit: Transacción de ingreso en cuenta del cliente. Es decir, el efectivo viaja desde el comercio hasta la cuenta del cliente. Por ejemplo, en el pago de un premio. No confundir con las devoluciones. Estas tienen su propio tipo de transacción.	debit
showRememberMe	Valores posibles: – true: Muestra el checkbox de «Recuérdame», que el cliente puede marcar (o no) para guardar el token de la tarjeta. – false: No muestra el checkbox de «Recuérdame». Sólo guardará el token de la tarjeta si «forceTokenRequest» es true.	O	Oculta o muestra el checkbox de «Recuérdame», para que el cliente elija si guardar o no el token de la tarjeta.	true
forceTokenRequest	Booleano – true – false	O	Indica si guardar o no el token de la tarjeta del cliente. Si no quieres guardar la tarjeta, usa «false». Si este valor es «true» pero el cliente no marca el check de Recuérdame, no se guardará el token.	false

Renderizado del cajero en el frontal

Una vez obtenido el «authToken» podrás renderizar el cajero en el frontal. Recuerda que no es posible renderizar el cajero en un localhost y debes autorizar el dominio desde el panel de control de Addon Payments.

Al renderizar el cajero, puedes elegir qué soluciones de pago mostrar. También puedes seleccionar qué tipo de cajero quieres renderizar.

A continuación, te ofrecemos un ejemplo simple que muestra como renderizar el cajero con todos los métodos de pago disponibles:

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS render cashier</title>
    <style>
        #render-cashier {
            width: 350px;
            margin-top: 100px;
            border: 1px solid #ccc;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="render-cashier"></div>
    <script src="https://epgjs-rendercashier-stg.addonpayments.com/js/public/epgjs-4.0.0-min.js"></script>
    <script>
        var authtoken = "bdae356b-0236-47db-bbea-24de03168195"; // Add here your authToken
        function prePayCallback(prepayData) {
            // Show prepayToken This is just for example purposes only and should not be shown to your customer
            alert(JSON.stringify(prepayData, null, 2));
        }
        function displayingMessageOnButtonClick() {
            EPGJS_COMM.setEpgBaseUrl('https://epgjs-web-stg.addonpayments.com/');
            EPGJS.renderIntegratedCashier(authtoken, 'render-cashier');
            EPGJS_COMM.setMerchantPrePayCallback(prePayCallback);
        }
        window.onload = displayingMessageOnButtonClick;
    </script>
</body>
</html>

Puedes ver las funciones, tanto obligatorias como opcionales, en esta sección.

Esto te permitirá renderizar el cajero en el div del frontal para que el cliente pueda proceder con el pago, como ves en la imagen inferior. Cuando el cliente proceda con el botón de pago, Addon Payments te devolverá un objeto con el «prepayToken, lo que te permitirá enviar la petición de pago.

La función de llamada de los distintos tipos de cajero son las siguientes:

Cajero con todas las soluciones de pago:

EPGJS.renderIntegratedCashier(authToken, 'render-cashier');

Cajero para una única solución de pago

EPGJS.renderIntegratedCashier(authtoken, 'render-cashier', 'solución de pago');

Obtención del prepayToken

Si el cliente introduce los datos de una tarjeta o cuenta, tu plataforma de comercio electrónico recibe un objeto de JS con la referencia de preparación del pago (prepayToken). Este es un ejemplo de «prePayToken»:

"prePayToken": "8862abf9-ca5a-49da-9527-1e3163e64954"

Tu plataforma debe almacenar este código para continuar con el siguiente paso, ya que es el código que ofrece al cliente autorización para enviar el charge. Las referencias de autorización recibidas tienen las siguientes características:

Validez de 30 minutos.
Puede ser usada una única vez para autorizar el pago.

DIY (Do It Yourself)

Esta característica permite renderizar los elementos del cajero dentro de los elementos HTML del comerciante.

La opción de formulario de pago personalizado permite a los comercios definir la apariencia y diseño de cada elemento del cajero.

Estos son los pasos para crear un cajero:

Agrega un elemento < div > a tu web y define < divs > para cada uno de los componentes del formulario de pago que vas a usar.
Define una variable que asigne los identificadores de <div> que has creado a los elementos del formulario de Addon Payments correspondientes.
Llama al método setDIY(string) y pasa la variable que creaste en el paso anterior.

A continuación, vamos a ver estos pasos en detalle:

Primer paso: Definir el HTML

Define en el HTML un formulario con elementos < div > con identificadores para cada uno de los componentes del formulario de pago.

El siguiente ejemplo muestra el HTML para crear un formulario que acepta datos de tarjeta de crédito (nº de tarjeta ,nombre del titular, caducidad y CVV):

				
					<div id="diy-container">
    <form id="diy-custom-form" >
      cardNumber:
        <div id="diy-pan"></div>
      Ch Name:
        <div id="diy-chName"></div>
      ExpDate:
        <div id="diy-expdate"></div>
      Cvv:
        <div id="diy-cvnNumber"></div>
        <button id="pay-btn" type="submit">Proceed</button>
    </form>
  </div>

Segundo paso: Crear una variable JavaScript

Define en JS una variable con un JSON que asigne los identificadores del formulario con los campos creados en el paso anterior:

				
					var json='{
    "epgjs-cashier-quickpay-form":"id_formulario_tarjeta",
    "chName":"campo_nombre_titular",
    "cardNumber":"campo_numero_tarjeta",
    "expDate":"campo_fecha_caducidad",
    "cvnNumber":"campo_cvv",
    "epgjs-cashier-quickpay-form-button-CreditCards":"boton_pago"
}';

Tercer paso – Llamar a la función

Llama a la función de la biblioteca JS «setDiy()» pasándole como parámetro el JSON que hemos creado:

				
					EPGJS_DIY.setDiy(JSON.parse(json));

Cuarto paso – Renderizar el cajero

Llama a la función de la biblioteca JS «renderQuickDepositByPaymentSolution()» pasándole como parámetros lo siguiente:

El authToken recibido desde AP.
El identificador del formulario que hemos creado en el punto 1.
La solución para pago por tarjeta configurada en nuestro comercio.

				
					EPGJS.renderQuickDepositByPaymentSolution(authToken,'id_formulario_tarjeta','creditcards');

Llamada charge

Con la obtención del «prepayToken», podrás enviar la petición de pago /charge. A continuación, te mostramos un ejemplo de solicitud y respuesta con los campos básicos.

Recuerda que los parámetros cambian según el método de pago y los casos de uso.

Este es un ejemplo básico de pago con tarjeta:

				
					{
    "merchantId": "12345",
    "merchantTransactionId": "00000001",
    "amount": "10.00",
    "apiVersion: "5",
    "currency": "EUR",
    "country": "ES",
    "customerId": "000001",
    "paymentSolution": "creditcards",
    "productId": "123450001",
    "statusURL": "https://micomercio.com/recepcion_notificacion.php?tipo=redireccion",
    "successURL": "https:// micomercio.com/url-ok.php",
    "errorURL": "https:// micomercio.com/url-ko.php",
    "cancelURL": "https:// micomercio.com/url-cancelacion.php"
}

				
					curl --location --request POST 'https://epgjs-mep-stg.addonpayments.com/charge/v2' \
--header 'Content-Type: application/json' \
--header 'prepayToken: 8862abf9-ca5a-49da-9527-1e3163e64954' \
--data-raw '{
    "merchantId": "12345",
    "merchantTransactionId": "00000001",
    "amount": "10.00",
    "apiVersion: "5",
    "currency": "EUR",
    "country": "ES",
    "customerId": "000001",
    "paymentSolution": "creditcards",
    "productId": "123450001",
    "statusURL": "https://micomercio.com/recepcion_notificacion.php",
    "successURL": "https://micomercio.com/url-ok.php",
    "errorURL": "https://micomercio.com/url-ko.php",
    "cancelURL": "https://micomercio.com/url-cancelacion.php"
}'

A continuación, tienes los parámetros del charge. Además, recomendamos que visites nuestra sección 3DSecure con el objetivo de añadir campos adicionales al proceso de pago. Estos datos opcionales enriquecen la solicitud de pago y pueden facilitar el proceso de autenticación.

Campo	Formato	Tipo	Descripción	Ejemplo
prepayToken	Alfanumérico UUID	R	Se envía en la cabecera de la petición. AP devuelve esta referencia después de que el cliente introduzca sus datos en el formulario de pago de JS. Es la referencia que enlaza con los datos de la tarjeta o cuenta del cliente para integración JavaScript.	97fe3726-adb1-4e24-9fb8-92593a75ae74
merchantId	Numérico entero 4~7 dígitos	R	Es el indicador de tu comercio en la plataforma de AP. Es facilitado por Soporte en el correo de bienvenida, es común para los dos entornos	14983
productId	Numérico entero 6~11 dígitos	R	Identificador del producto creado en tu comercio en AP. Es facilitado en el correo de bienvenida.	149830
apiVersion	Numérico Valor aceptado: 5	R	Versión del API de la pasarela de Addon Payments por la que debe procesarse la transacción.	5
paymentSolution	Alfanumérico Máx. 45 caracteres	R	Nombre de la solución de pago por la cual debe procesarse la transacción. IMPORTANTE: Si quieres que se muestren todas las soluciones de pago que tengas disponibles, NO envíes este parámetro.	creditcards
operationType	Alfanumérico Máx. 45 caracteres	R	Especifica el tipo de operación a realizar. Valores admitidos: – debit (por defecto): Transacción de pago. Es decir, el efectivo viaja desde la cuenta del cliente al comercio. – credit: Transacción de ingreso en cuenta del cliente. Es decir, el efectivo viaja desde el comercio hasta la cuenta del cliente. Por ejemplo, en el pago de un premio. No confundir con las devoluciones. Estas tienen su propio tipo de transacción.	debit
merchantTransactionId	Alfanumérico Máx. 45 caracteres	R	Es el identificador único de la transacción del comercio. Sirve para que tu plataforma enlace las notificaciones recibidas con el pedido del cliente.	pedido_91684
amount	Numérico decimal 0~1000000.00	R	Importe de la transacción. Si el importe tiene decimales, el separador es un punto (.). No se puede incluir el separador en los millares	127.5
currency	Alfabético 3 caracteres ISO-4217.3	R	Divisa de la transacción	EUR
country	Alfabético 2 caracteres ISO 3166-1 alfa-2	R	País desde el que se envía la transacción	ES
customerId	Alfanumérico Máx. 80 caracteres	R	Id. del cliente en tu plataforma de comercio electrónico. – Para guardar la tarjeta del cliente, usa el parámetro «forceTokenRequest«, con valor «true» para guardar el token y «false» para no hacerlo. – Para que el cliente vea o no la opción de recordar su tarjeta, usa el parámetro «showRememberMe«, con valor «true» para mostrarle y «false» para ocultarlo.	A34623
statusURL	Alfanumérico (caracteres permitidos en URL) Máx. 2048 caracteres	R	URL de tu plataforma de comercio electrónico donde AP enviará la notificación con el estado de la transacción. Si se envía en la petición, tendrá prioridad sobre la configurada en el Portal BackOffice de Addon Payments. Si no se envía en la petición, se redirigirá al cliente a la URL configurada en el módulo de administración.	https://www.example.com/status
successURL	Alfanumérico (caracteres permitidos en URL) Máx. 2048 caracteres	R	URL de tu plataforma a la que se redirecciona al cliente si la transacción es autorizada. Si se envía en la petición, tendrá prioridad sobre la configurada en el Portal BackOffice de Addon Payments. Si no se envía en la petición, se redirigirá al cliente a la URL configurada en el módulo de administración.	https://www.example.com/success
errorURL	Alfanumérico (caracteres permitidos en URL) Máx. 2048 caracteres	R	URL de tu plataforma a la que se redirecciona al cliente si la transacción es denegada. Si se envía en la petición, tendrá prioridad sobre la configurada en el Portal BackOffice de Addon Payments. Si no se envía en la petición, se redirigirá al cliente a la URL configurada en el módulo de administración.	https://www.example.com/error
cancelURL	Alfanumérico (caracteres permitidos en URL) Máx. 2048 caracteres	R	URL de tu plataforma a la que se redirecciona el cliente si cancela la transacción durante el proceso de pago. Si se envía en la petición, tendrá prioridad sobre la configurada en el Portal BackOffice de Addon Payments. Si no se envía en la petición, se redirigirá al cliente a la URL configurada en el módulo de administración.	https://www.example.com/cancel
awaitingURL	Alfanumérico (caracteres permitidos en URL) Máx. 2048 caracteres	R	URL de tu plataforma a la que se redirecciona el cliente si la transacción está pendiente de procesar. Si se envía en la petición, tendrá prioridad sobre la configurada en el Portal BackOffice de Addon Payments. Si no se envía en la petición, se redirigirá al cliente a la URL configurada en el módulo de administración.	https://www.example.com/awaiting
customerEmail	Alfanumérico Máximo 100 caracteres	R*	Dirección de correo electrónico del titular de la tarjeta. Comercios europeos: requerido para SCA. *Se debe enviar el customerEmail o telephone, sólo se requiere 1 de estos campos.	correo@ejemplo.com
telephone	Alfanumérico Máximo 45 caracteres	R*	Prefijo internacional + Número de teléfono del titular de la tarjeta. Puede ser el teléfono móvil, del trabajo o de casa. Comercios europeos: requerido para SCA. *Se debe enviar el customerEmail o telephone, sólo se requiere 1 de estos campos.	34600600600
language	Código ISO 639-1	O	idioma para mostrar en la pasarela de pago al cliente. Actualmente, sólo está disponible en castellano (ES) y en inglés (EN).	ES
referenceId	Alfanumérico 12 caracteres	O	Referencia variable para comercios que necesiten de archivos de conciliación FB500.	SM1258X795WW
merchantParams	Clave1:Valor1;Clave2:Valor2;ClaveN:ValorN Máx. 500 caracteres	O	Parámetros que se envían para modificar la configuración del comercio o el procesamiento de una trasacción. Se reciben de vuelta dentro de la etiqueta No admite caracteres especiales	nombre:pablo;apellido:ferrer;idcliente:12345
printReceipt	Booleano	O	Muestra al cliente final un recibo en el proceso de redirección tipo opcional.	True
autoCapture	Booleano	O	Establece si la transacción será una autorización o pre autorización. En el último caso, requiere una captura o liberación posterior por parte del comercio.	True
type	Alfanumérico: MOTO ECOM	O	Establece si la petición de pago es tipo comercio electrónico o MO/TO. Si no se incluye, es tipo comercio electrónico por defecto.	ECOM
description	Alfanumérico Máx. 1000 caracteres	O	Descripción de la transacción.	Descripción del producto
city	Alfanumérico Máximo 100 caracteres	O	Ciudad del titular de la tarjeta. Comercios europeos: Opcional para SCA	Barcelona
chCountry	2 caracteres ISO 3166-1 alfa-2	O	Código ISO 3166-1 alfa-2 del país del titular de la tarjeta. Comercios europeos: Opcional para SCA	ES
addressLine1	Alfanumérico Máximo 250 caracteres	O	Primera línea de la dirección del titular de la tarjeta Comercios europeos: Opcional para SCA	Calle Romero 123
addressLine2	Alfanumérico Máximo 50 caracteres	O	Código postal del titular de la tarjeta Comercios europeos: Opcional para SCA	08001
state	Alfanumérico Máximo 45 caracteres	O	Provincia o estado del titular de la tarjeta Comercios europeos: Opcional para SCA	Barcelona

Respuesta

Esta es la respuesta de pago a la petición de ejemplo anterior:

				
					<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<payfrex-response operation-size="3">
	<message>WorkFlow has finished successfully, for transaction Id: 7711867</message>
	<operations>
		<operation sorted-order="1">
			<amount>10.00</amount>
			<currency>EUR</currency>
			<merchantTransactionId>00000001</merchantTransactionId>
			<message>Exemptions has been removed</message>
			<operationType>DEBIT</operationType>
			<payFrexTransactionId>7711867</payFrexTransactionId>
			<service>TRA</service>
			<status>SUCCESS</status>
		</operation>
		<operation sorted-order="2">
			<amount>10.00</amount>
			<currency>EUR</currency>
			<merchantTransactionId>00000001</merchantTransactionId>
			<message>3dsv2 - processed</message>
			<operationType>DEBIT</operationType>
			<payFrexTransactionId>7711867</payFrexTransactionId>
			<paymentDetails>
				<cardNumberToken>5774655584592227</cardNumberToken>
				<extraDetails/>
			</paymentDetails>
			<service>3DSv2</service>
			<status>SUCCESS3DS</status>
		</operation>
		<operation sorted-order="3">
			<amount>10.00</amount>
			<currency>EUR</currency>
			<details>{"resultCode":"00000","resultDescription":"OK","values":{"rfTransactionCurrency":"EUR","rfRTS":"355534686 790190 845433 231030160823","rfContactlessLogo":"false","rfOperationType":"Settle","rfAuthMode":"On","rfDataEntryMode":"Manual","rfCardHolderVerificationMode":"No","rfFuc":"355534686","rfTerminalID":"00000500","rfProcessor":"Redsys","rfMerchantName":"Pruebas Addon 25","rfMerchantCity":"BARCELONA","rfMerchantPostalCode":"08014","rfMerchantAddress":"GRAN VIA DE LES CORTS CATALANE, 159 PLANTA 7","rfMaskedPan":"************2227","rfOperationDateTime":"30/10/23 16:08:23","rfTerminalOperationNumber":"1197","rfAuthNumber":"150515","rfTransactionAmountCurrency":"10,00 EUR","rfProcessorMessage":"","rfPrintSignatureBox":"false","rfCardPresent":"true","rfReferenceId":"1197","posTransactionToken":"{\"pucIdMsg\":\"1200\",\"pucP3ProcessCode\":\"000000\",\"pucP4OriginalAmount\":\"000000001000\",\"pucP11TransactionNumber\":\"845433\",\"pucP12LocalDateTime\":\"231030160823\",\"pucP22ServicePointData\":\"1U00506K3000\",\"pucP38AuthNumber\":\"150515\",\"pucP39ActionCode\":\"000\",\"pucP53SecurityControlInfo\":\"0102000001000000\",\"pinpadId\":\"1440\",\"pinpadAcquirerId\":\"00000500\",\"pinpadManufacturer\":null,\"pinpadModel\":null,\"pinpadSerialNumber\":null,\"pinpadSoftwareName\":null,\"pinpadSoftwareVersion\":null,\"pinpadKernelEmv\":null,\"pinpadVccStrip\":null,\"pinpadVerPup\":null,\"pinpadPciStage\":null,\"pinpadVerEmvParams\":null,\"pinpadEmvType\":null,\"pinpadCapabilities\":null,\"pinpadLanguage\":null,\"transactionType\":\"O\",\"transactionContactless\":\"0\",\"transactionDcc\":\"0\",\"transactionDccComission\":null,\"transactionDccExchangeRate\":null,\"transactionDccMarkUp\":null,\"transactionDccEntity\":null,\"transactionDccBceExchangeRate\":null,\"transactionDccBceMarkUp\":null,\"transactionPanSequenceNumber\":null,\"transactionTerminalOperationNumber\":\"1197\",\"transactionResponseCode\":null,\"transactionCurrency\":\"978\",\"transactionFuc\":\"355534686\",\"cardMaskedPan\":\"************2227\",\"cardAid\":null,\"cardDdfName\":null,\"cardApplicationLabel\":null,\"cardCypherData\":null}","OperationResult":"000"},"threeDsProtocolVersion":"2.2.0"}</details>
			<merchantTransactionId>00000001</merchantTransactionId>
			<message>Success 'Settle' operation</message>
			<operationType>DEBIT</operationType>
			<optionalTransactionParams/>
			<payFrexTransactionId>7711867</payFrexTransactionId>
			<paySolTransactionId>355534686 790190 845433 231030160823</paySolTransactionId>
			<paymentDetails>
				<cardHolderName>Pruebas Visa Frictioless</cardHolderName>
				<cardNumber>490727****2227</cardNumber>
				<cardNumberToken>5774655584592227</cardNumberToken>
				<cardType>VISA/CREDIT</cardType>
				<expDate>1234</expDate>
				<extraDetails>
					<entry>
						<key>cardCategory</key>
						<value>Not Available</value>
					</entry>
					<entry>
						<key>rememberMe</key>
						<value>true</value>
					</entry>
				</extraDetails>
				<issuerBank>SERVIRED MASTERCARD INTERNACIONAL</issuerBank>
				<issuerCountry>ES</issuerCountry>
			</paymentDetails>
			<paymentMethod>19900</paymentMethod>
			<paymentSolution>caixapucpuce</paymentSolution>
			<status>SUCCESS</status>
		</operation>
	</operations>
	<optionalTransactionParams/>
	<status>SUCCESS</status>
	<workFlowResponse>
		<id>31380</id>
		<name>debit creditcards (TRA)</name>
		<version>0</version>
	</workFlowResponse>
</payfrex-response>

Funciones de la integración JavaScript

En la biblioteca de JavaScript tienes varias funciones a las que puedes llamar. Las funciones más importantes (obligatorias) ya se han incluido en secciones anteriores, aquí las puedes ver en detalle:

Definir la URL base de la pasarela de pago (obligatorio)

Para definirlo: EPGJS_COMM.setEpgBaseUrl(‘[URL base]’) Configura la URL de AP a la cual el formulario enlazado enviará los datos del cliente, siendo [URL base] una de las siguientes URLs, dependiendo del entorno en el cual se está operando:

Stage: https://epgjs-web-stg.addonpayments.com/
Producción: https://epgjs-web.addonpayments.com/

Este es un ejemplo de llamada a la función para operar en entorno de Stage:

EPGJS_COMM.setEpgBaseUrl('https://epgjs-web-stg.addonpayments.com/');

Realizar la llamada a la función de enlazado del formulario (obligatorio)

Para definirlo: EPGJS.renderIntegratedCashier(authToken, ‘id. div’, ‘solucion de pago’);

Con todos los parámetros anteriores definidos, procedemos a realizar la llamada a la función de la biblioteca JS para la carga del formulario en la página web de pago de tu plataforma. Los parámetros de la función “renderIntegratedCashier()” son los siguientes:

authToken: Referencia de autorización recibida.
id. div: Identificador del elemento <div> incluido en la web de pago de tu plataforma.
solución de pago (opcional): Solución de pago a la cual queremos limitar el formulario.
- Únicamente se debe incluir en caso de haber optado por el cajero para una única solución de pago.

Si todos los parámetros vistos en este punto y anteriores son correctos, AP procederá a mostrar el formulario de pago en el elemento <div> pasado en la llamada a la función.

Una vez el cliente haya introducido los datos de su tarjeta o cuenta, AP generará una referencia de preparación del pago (prepayToken).

Object { prepayToken: "e686282e-fad0-45d7-84b6-eff5bf0c126d", action: "quickpay" }

Definir la función para la recepción de la referencia de preparación del pago (obligatorio)

Para definirlo: EPGJS_COMM.setMerchantPrePayCallback([función recepción]) Se usa para indicar al formulario de AP la función a la cual debe llamar pasándole como parámetro un objeto de JS que contendrá la referencia de preparación del pago (prepayToken). Tu plataforma de comercio electrónico debe tener programada una función en la misma web en la cual se enlaza el formulario de pago, la cual recupere y almacene esa referencia para poder proceder a la autorización y liquidación del pago. La función puede tener el nombre que quieras, ya que su nombre se pasa como parámetro [función recepción] en la llamada a la biblioteca JS de AP. Por ejemplo, puedes definir una función “recibir_prepayToken” en tu plataforma programada para recibir el objeto con la referencia de preparación de pago y pasarla al servidor de tu plataforma para su posterior uso. En el siguiente ejemplo definimos la función para recibir y mostrar por pantalla la referencia de preparación del pago recibida en un objeto JS desde AP (este ejemplo es únicamente ilustrativo. Los cliente no deben tener acceso visual a la referencia recibida):

function recibir_prepayToken(objeto){
alert(objeto.prepayToken);
return true;
};

Con dicha función previamente definida, la llamada a la función de la biblioteca JS sería la siguiente:

EPGJS_COMM.setMerchantPrePayCallback(recibir_prepayToken);

Definir la limitación del formulario a cuentas guardadas (opcional)

Para definirlo: EPGJS_COMM.setOnlyRegisteredAccounts([valor booleano]) Indicando con [valor boolenao] si el formulario debe aceptar introducir nuevas tarjetas y cuentas de pago (por defecto) o si debe limitar al operativa del cliente únicamente a tarjetas o cuentas previamente guardadas en el identificador del cliente.

false (por defecto): El formulario de pago permite usar tanto las tarjetas que el cliente tuviera previamente guardadas como introducir, usar y guardar nuevas tarjetas o cuentas.
true: El formulario de pago se limita a las tarjetas y cuentas previamente guardadas en el id. del cliente. El cliente no puede usar ni guardar una nueva tarjeta o cuenta.

Ejemplo de llamada a la función para limitar la operativa del cliente a las tarjetas y cuentas guardadas:

EPGJS_COMM.setOnlyRegisteredAccounts(true);

Funciones relacionadas con el estilo CSS (opcional)

A continuación, indicamos las funciones auxiliares relacionadas con el estilo CSS de la pasarela de pago. 1. Obtener la clase CSS Devuelve la clase/s del tema CSS actual que aplica/n a la clave pasada como argumento

Función: EPGJS_STYLE.getClass(objeto)
Parámetro: Objeto que se quiere consultar.
Uso: Saber las clases que tiene asociada la clase del objeto para realizar personalizaciones del cajero JS.

2. Obtener el tema CSS activo Devuelve las claves del tema CSS activo.

Función: EPGJS_STYLE.getCssTheme()
Parámetros: Ninguno.
Uso: Devuelve la transformación de claves si se ha aplicado un tema en la renderización.
Valores devueltos: JSON con el mapeo entre las clases de AP y las del tema seleccionado por el comercio mediante la función EPGJS_STYLE.setCssTheme(Tema).

3. Aplicar tema CSS Aplica a la pasarela de pago uno de los dos temas pasado como parámetro. En caso de no realizar la llamada a esta función, el formulario de AP usará el tema JS por defecto.

Función: EPGJS_STYLE.setCssTheme(tema)
Parámetros:
- EPGJS_STYLE.DEFAULT_THEME (tema JS por defecto)
- EPGJS_STYLE.DEFAULT_BOOTSTRAP_THEME (tema JS Bootstrap)
Uso: Aplicar a la pasarela de pago un tema de entre los dos disponibles.
Valores devueltos: Ninguno.

Puedes obtener un listado de las clases contenidas en el tema ejecutando el siguiendo comando de JavaScript:

console.log(tema);
— Listar las clases del tema EPGJS_STYLE.DEFAULT_THEME —console.log(EPGJS_STYLE.DEFAULT_THEME);
— Listar las clases del tema EPGJS_STYLE.DEFAULT_BOOTSTRAP_THEME —
console.log(EPGJS_STYLE.DEFAULT_BOOTSTRAP_THEME);

Validar el PAN

Para definirlo: EPGJS.getValidPan() Informa si el PAN de la tarjeta introducida por el cliente es válido. Es decir, supera el algoritmo de Luhn.

Parámetros: Ninguno.
Uso: Si la tarjeta no es válida, no envía la transacción de pago a autorizar.
Valores devueltos:
- true: El PAN de la tarjeta es válido.
- false: El PAN de la tarjeta no es válido

Obtener la marca de la tarjeta

Para definirlo: EPGJS.getCardType()

Informa de la marca de la tarjeta introducida por el cliente.

Parámetros: Ninguno.
Uso: Enviarlo en el parámetro “cardType” en la transacción de pago.
Valores devueltos:
- amex
- astropay
- dankort
- diners_club_carte_blanche
- diners_club_international
- discover
- jcb
- laser
- maestro
- mastercard
- mir
- visa
- visa_electron

Personalización

Addon Payments ofrece varias formas de personalizar la apariencia y el contenido del cajero. En estas secciones se explica cómo personalizar la apariencia, el diseño y el idioma del formulario.

En esta sección encontrarás como:

Personalizar el estilo del cajero con distintos estilos.
Definir un tema con estilos CSS para botones, texto e imágenes.

Estilo personalizado

La forma más sencilla de personalizar la apariencia del formulario de pago es crear un archivo CSS que defina los colores, fuentes y logotipos de los elementos del formulario de pago. Los siguientes pasos vinculan tus clases de CSS a los elementos del formulario de Addon Payments y le indican que use tus estilos:

Define un objeto de tema JSON que vincule los nombres de las clases CSS con los elementos del formulario Addon Payments.
Crea un archivo CSS que utilice los nombres de clase establecidos en el tema.
Llama al método «EPGJS_STYLE.setCssTheme» y pasa tu tema como parámetro.

Primer paso

Crea una variable JSON que vincule los elementos del formulario de pago Addon Payments con los nombres de tus clases CSS. Addon Payments ofrece dos temas predeterminados que vinculan el formulario de pago con los nombres de clases CSS:

DEFAULT_THEME: Vincula los elementos del formulario de pago a nombres de clases CSS genéricos.
DEFAULT_BOOTSTRAP_THEME: Vincula los elementos del formulario de pago a los elementos del tema inicial existentes.

Estos temas son constantes que puedes pasar al método «EPGJS_STYLE.setCssTheme(string)». Consulta la sección Temas JS de esta guía para obtener detalles sobre los temas predeterminados y la definición de los elementos personalizables.

Segundo paso

Crea un archivo CSS que utilice los nombres de clase especificados en el tema para asignar estilos a los elementos del formulario de pago. Este es un ejemplo de cómo configurar el color rojo para la fecha de caducidad usando el tema predeterminado:

				
					<style>
    .cashier-form-field-expdate {
      color: red;
    }
  </style>

Tercer paso

Haz la llamada al método «EPGJS_STYLE.setCssTheme» antes de llamar al método «renderCashier». El método «EPGJS_STYLE.setCssTheme» toma un objeto de tema JSON como parámetro.

Este es un ejemplo que muestra la llamada al método usando el tema predeterminado:

				
					EPGJS_STYLE.setCssTheme(EPGJS_STYLE.DEFAULT_THEME);

Este es un ejemplo que muestra la llamada al método utilizando el tema inicial predeterminado:

				
					EPGJS_STYLE.setCssTheme(EPGJS_STYLE.DEFAULT_BOOTSTRAP_THEME);

El método «EPGJS_STYLE.setCssTheme» le dice al backend de Addon Payments qué estilos usar para los elementos del formulario y dónde aplicarlos. Cuando llamas al método «renderCashier», el formulario de pago se renderiza usando tus estilos.

Temas JavaScript

Los temas JavaScript definen la clase CSS que controla la apariencia de cada uno de los elementos de los formularios de pago. En esta sección se definen los parámetros personalizables e incluye el objeto JSON para el tema predeterminado y el inicial.

Elementos del tema y clases

En esta tabla se definen los componentes que puedes personalizar del formulario de pago Addon Payments.

Clase Addon Payments	Descripción
epgjs-cashier-container	Cajero EPGJS contenedor principal DIV.
epgjs-cashier	Cajero EPGJS. Hijo del contenedor DIV comercial.
cashier-edit-row	Contenedor de filas del editor de cuentas.
cashier-edit-activate-panel	Panel del editor de cuentas cuando la cuenta está activa.
cashier-edit-deactivate-panel	Panel del editor de cuentas cuando la cuenta está deshabilitada.
cashier-account-row	Contenedor de la cuenta.
cashier-account-row-heading	Encabezado de la cuenta.
cashier-register-row	Contenedor de la cuenta registrada.
cashier-register-row-heading	Encabezado de la cuenta registrada.
cashier-quickpay-row	Contenedor QuickPay.
cashier-quickpay-row-heading	Encabezado QuickPay.
cashier-paysol-panel	Panel de solución de pago.
cashier-form-row-remove	Eliminar el contenedor de cuentas para la sección del editor de cuentas.
cashier-form-panel	Panel de formulario del cajero.
cashier-form-field	Componente de campo de formulario.
cashier-form-field-label	Etiqueta de campo de formulario.
cashier-form-field-text	Texto de campo de formulario.
cashier-form-field-expdate	Campo de formulario de fecha de caducidad.
cashier-form-field-password	Campo de formulario de contraseña.
cashier-form-field-cvv	Campo de formulario CVV.
cashier-form-field-dropdown	Campo de formulario de selector o desplegable.
cashier-form-row-selected	Componente de formulario de cajero seleccionado.
submit-button	Botón de enviar.

Internacionalización

El cajero de JavaScript de Addon Payments viene por defecto en inglés. Además, incluye el español. Puedes cambiar el idioma en cualquier momento, incluso con el cajero renderizado.

Puedes incluir cualquier idioma o personalización de cualquier etiqueta siempre que definas los literales correspondientes. Si la traducción o personalización es incompleta, las etiquetas sin literal definido se mostrarán en inglés.

Si quieres renderizar el cajero en un idioma distinto al inglés o el castellano, o personalizar alguno de los literales del campo, debes obtener el listado de los literales del cajero.

Obtener la lista de literales del cajero

La función «getI18n()», incluida en la biblioteca JavaScript, devuelve un JSON con los literales del cajero en los diferentes idiomas soportados.

Para obtener acceso al JSON con los literales del cajero asigna a una variable la salida de la llamada a dicha función y muestra su contenido por consola.

Este es un ejemplo de código JS para obtener y mostrar el JSON con los literales del cajero:

var idiomas = EPGJS_I18N.getI18n();
console.log (idiomas);

Este es un objeto con el JSON que se muestra en consola:

Este es un ejemplo con la estructura del JSON que se obtiene:

				
					{
  "etiqueta_idioma_1": {
    "id_literal_1": "texto_literal_1",
    "id_literal_2": "texto_literal_2",
    "id_literal_n": "texto_literal_n",
    "objeto_1": {
      "id_literal_1_1": "texto_literal_1_1",
      "id_literal_1_2": "texto_literal_1_2",
      "id_literal_1_n": "texto_literal_1_n",
      "objeto_1_1": {
        "id_literal_objeto_1_1_1": "texto_literal_objeto_1_1_1",
        "id_literal_objeto_1_1_2": "texto_literal_objeto_1_1_2"
      }
    }
  },
  "etiqueta_idioma_2": { … },
  "etiqueta_idioma_n": { … }
}

Creación y carga del JSON con literales para el cajero

Tras la descarga de los literales del cajero, podremos proceder a traducirlos y asignarle una etiqueta de idioma (los idiomas Inglés y Español ya van incluidos, por lo que no es necesario realizar su traducción).

En el siguiente ejemplo mostramos fragmentos del JSON con los literales del cajero JS. La primera pestaña tiene los originales en inglés y la segunda la traducción al catalán.

				
					{
  "en": {
    "account": "Account",
    "CreditCards": "Credit Cards",
    "Neteller": "Neteller",
    "Skrill": "Skrill",
    "astropay": {
      "bankAccount": {
        "clabe": "CLABE",
        "debitCard": "Debit Card"
      },
      "cardholdername": "AstroCard Holder Name",
      "cardnumber": "AstroCard Number",
      "cvv": "CVV / CVN",
      "expirationdate": "AstroCard Expiration Date",
      "mail": "By email",
      "mobile": "By mobile"
    },
    "astropayCards": "AstroPay Cards",
    "creditcards": {
      "cardholdername": "Card Holder",
      "cardnumber": "Card Number",
      "cardtype": "Card Type",
      "cvv": "CVV / CVN",
      "expirationdate": "Exp. Date",
      "invalidCVV": "Invalid CVV",
      "invalidChName": "Invalid Card Holder Name",
      "invalidExpDate": "Invalid Expiry Date",
      "invalidPAN": "Invalid Card Number",
      "placeholderdate": "MM/YY",
      "placeholdercvv": "CVV"
    },
    "customer": {
      "firstName": "Customer first name",
      "lastName": "Customer last name",
      "addressLine1": "Customer address",
      "city": "Customer city",
      "postCode": "Customer post code",
      "state": "Customer state",
      "telephone": "Customer telephone"
      "companyName": "Customer company",
      "customerEmail": "Customer email",
      "customerNatIdRadioCC": "CC",
      "customerNatIdRadioCE": "CE",
      "customerNatIdRadioDNI": "DNI",
      "customerNatIdRadioNIT": "NIT",
      "customerNatIdRadioPASS": "PASS",
      "customerNatIdRadioRUC": "RUC",
      "customerNationalId": "Customer national ID",
      "customerNationalIdType": "Customer national ID type",
    }, …

				
					{
  "ca": {
    "account": "Compte d'usuari",
    "CreditCards": "Targetes de crèdit",
    "Neteller": "Neteller",
    "Skrill": "Skrill",
    "astropay": {
      "bankAccount": {
        "clabe": "CLABE",
        "debitCard": "Targeta de dèbit"
      },
      "cardholdername": "Nom del titular",
      "cardnumber": "Número de targeta",
      "cvv": "CVV / CVN",
      "expirationdate": "Data d'expiració",
      "mail": "Via correu electrònic",
      "mobile": "Via mòbil"
    },
    "astropayCards": "AstroPay Cards",
    "creditcards": {
      "cardholdername": "Nom del titular",
      "cardnumber": "Número de targeta",
      "cardtype": "Tipus de targeta",
      "cvv": "CVV / CVN",
      "expirationdate": "Data d'expiració",
      "invalidCVV": "El CCV no és vàlid",
      "invalidChName": "El nom del titular no és vàlid",
      "invalidExpDate": "La data de caducitat no és vàlida",
      "invalidPAN": "El número de la targeta no és vàlid",
      "placeholderdate": "MM/YY",
      "placeholdercvv": "CVV"
    },
    "customer": {
      "firstName": "Nom",
      "lastName": "Cognoms",
      "addressLine1": "Direcció",
      "city": "Ciutat",
      "postCode": "Codi postal",
      "state": "Província/estat",
      "telephone": "Núm. de telèfon",
      "companyName": "Nom de l'empresa",
      "customerEmail": "Correu electrònic",
      "customerNatIdRadioCC": "CC",
      "customerNatIdRadioCE": "CE",
      "customerNatIdRadioDNI": "DNI",
      "customerNatIdRadioNIT": "NIT",
      "customerNatIdRadioPASS": "PASS",
      "customerNatIdRadioRUC": "RUC",
      "customerNationalId": "Número d'identificació nacional",
      "customerNationalIdType": "Tipus de document d'identificació"
    }, …

El siguiente paso es la declaración de una variable que contenga el JSON creado con la traducción o personalización.

En el siguiente fragmento de ejemplo en JS declaramos la constante “traducciones” con el JSON con los literales del cajero traducidos al catalán. Una única variable o constante puede contener numerosas traducciones. Por ello es importante recordar asignar un campo al inicio que identifique el idioma:

				
					const traducciones = {
  "ca": {
    "account": "Compte d'usuari",
    "astropay": {
      "bankAccount": {
        "clabe": "CLABE",
        "debitCard": "Targeta de dèbit"
      },
      "cardholdername": "Nom del titular",
      "cardnumber": "Número de targeta",
      "cvv": "CVV / CVN",
      "expirationdate": "Data d'expiració",
      "mail": "Via correu electrònic",
      "mobile": "Via mòbil"
    },
    "astropayCards": "AstroPay Cards",
    "bank": {
      "accTypeRadioCM": "Compte Mestre",
      "accTypeRadioCheckings": "Pagaments",
      "accTypeRadioSavings": "Estalvis",
      "accTypeRadioVista": "Vista",
      "accountNum": "Número de compte bancària",
      "accountType": "Tipus de compte bancari",
      "bankAccountDetails": "Detalls del compte bancari",
      "bankBranchCode": "Codi de la sucursal",
      "bankBranchName": "Nom de la sucursal",
      "bankCity": "Ciutat del banc",
      "bankCode": "Codi del banc",
      "bankName": "Nom del banc",
      "bankProvinceCode": "Província del banc",
      "firstName": "Nom",
      "lastName": "Cognoms"
    },
    "bankAccountNum": "Número del compte bancari",
    "bankBic": "SWIFT / BIC",
    "bankBranchCode": "Codi de sucursal",
    "breakoutgaming": {
      "account": "Clau d'autorització de compte",
      "accountPassword": "Clau de cartera digital"
    },
...

Por último, para cargar el idioma lanza la función setI18n(constante):

EPGJS_I18N.setI18n(traducciones);

Cambio de idioma del cajero

Para cambiar el idioma del cajero, únicamente necesitamos llamar a la función “setLang(idioma)”, pasándole como parámetro el texto del campo que identifica la personalización o idioma que deseamos aplicar.

Código JS de ejemplo para cambiar el idioma del cajero JS a Español (incluido con el cajero, no es necesaria programación adicional):

EPGJS_I18N.setLang('es');

Código JS de ejemplo para cambiar el idioma del cajero JS a Catalán (previa declaración y carga en los ejemplos de los puntos anteriores):

EPGJS_I18N.setLang('ca');

Esta función se puede invocar en cualquier momento, incluso con el cajero ya renderizado, y modificará los literales al idioma o personalización indicado.

Complementa la integración JavaScript

Flujo de la transacción

Entornos: Staging y Producción

Obtención del authToken

Parámetros de la solicitud authToken

Renderizado del cajero en el frontal

Obtención del prepayToken

DIY (Do It Yourself)

Primer paso: Definir el HTML

Segundo paso: Crear una variable JavaScript

Tercer paso – Llamar a la función

Cuarto paso – Renderizar el cajero

Llamada charge

Respuesta

Funciones de la integración JavaScript

Personalización

Estilo personalizado

Primer paso

Segundo paso

Tercer paso

Temas JavaScript

Elementos del tema y clases

Internacionalización

Obtener la lista de literales del cajero

Creación y carga del JSON con literales para el cajero

Cambio de idioma del cajero

Tabla de Contenidos

Productos

Ventas

Soporte técnico

Socios

SmartWiki, Impulsada por IA

Complementa la integración JavaScript

Flujo de la transacción

Entornos: Staging y Producción

Obtención del authToken

Parámetros de la solicitud authToken

Renderizado del cajero en el frontal

Obtención del prepayToken

DIY (Do It Yourself)

Primer paso: Definir el HTML

Segundo paso: Crear una variable JavaScript

Tercer paso – Llamar a la función

Cuarto paso – Renderizar el cajero

Llamada charge

Respuesta

Funciones de la integración JavaScript

Personalización

Estilo personalizado

Primer paso

Segundo paso

Tercer paso

Temas JavaScript

Elementos del tema y clases

Internacionalización

Obtener la lista de literales del cajero

Creación y carga del JSON con literales para el cajero

Cambio de idioma del cajero

Tabla de Contenidos

Productos

Ventas

Soporte técnico

Socios

SmartWiki, Impulsada por IA

Cyberpac

Consulta la documentación de las distintas secciones de integraciones:

Addon Payments

Pagos integrados en TPV