ePagos brinda la posibilidad de iniciar la solicitud de pago en un solo paso, para ello deberá solicitar una credencial pública, informándonos el o los dominios desde donde se invocará al botón, e incluir la librería JavaScript que se indica en el código fuente de ejemplo que se muestra a continuación:
<html>
<head>
<!-- el contenido del head de su página //-->
</head>
<body>
<!-- el contenido de su web antes del botón a agregar //-->
<div id="elementoEpagos"></div>
<script>
var script = document.createElement("script");
script.addEventListener("load", function() {
window.addEventListener("errorEpagos", function(event) {
console.error(event.detail.mensaje);
});
ePagos.setClavePublica("988083f870919095d2661ae5f59a523e");
ePagos.setOrganismo(99);
ePagos.setAmbiente("T");
ePagos.botonPago({
"datosOperacion":{
"convenio":"36589",
"numero_operacion":"1234",
"ok_url":"http://www.su_sitio.com.ar/ok.php",
"error_url":" http://www.su_sitio.com.ar/error.php ",
"monto_operacion":1500
}
});
});
script.src = "https://sandbox.epagos.com.ar/quickstart/epagos.min.js";
script.async = true;
document.getElementsByTagName("script")[0].parentNode.appendChild(script);
</script>
<!-- el contenido de su web después del botón a agregar //-->
</body>
</html>
El código HTML incluye una etiqueta con código Javascript, ese fragmento de código se encarga de construir e inicializar el objeto ePagos. Los métodos que se invocan son:
ePagos.setClavePublica();
Permite indicar la clave pública utilizar. Recibe un hash con la clave que le fue proporcionada.
ePagos.setOrganismo();
Se utilizará para especificar el identificador del organismo asignado.
ePagos.setAmbiente(“”);
Mediante este método, el usuario deberá indicar el entorno donde se ejecutará el botón de solicitud de pago (valores posibles: T= Test o Sandbox, P=Producción).
| Nombre | Tipo | Descripción |
|---|---|---|
| convenio | Numérico entero | El número de convenio que le fue asignado. Por ejemplo: 00001 |
| ok_url | Texto | URL de respuesta positiva |
| error_url | Texto | URL de respuesta de error |
| monto_operacion | Numérico decimal | Monto |
ePagos.botonPago({
"datosOperacion":{
"convenio":"36589",
"ok_url":"http://www.su_sitio.com.ar/ok.php",
"error_url":"http://www.su_sitio.com.ar/error.php ",
"monto_operacion":1500
}
}
);
Puede personalizar la estética del botón generado para que se adapte al estilo de su sitio Web. Las opciones de diseño se configuran con los siguientes atributos del objeto, y se ubican dentro del nodo atributos. Ninguno de estos atributos es obligatorio, en el caso de no estar definidos el botón tendrá un estilo por defecto.
| Nombre | Tipo | Descripción |
|---|---|---|
| elemento_destino | Texto | Permite posicionar un botón específico dentro de un elemento. El elemento debe tener el mismo id que la definición del atributo “elemento_destino”. Por defecto el botón se posicionara en el div “elementoEpagos”. |
| label | Texto | Texto que visualizará el usuario final en el botón. Ejemplo del resultado: <button>Iniciar Pago</button>. Por defecto tiene el valor: “Pagar”. |
| id | Texto | ID del botón. Ejemplo del resultado: id=”miBtn_Btn_epagos”. Por defecto tiene el valor: “_Btn_epagos”. |
| className | Texto | Nombre de la clase de CSS del botón. Ejemplo del resultado: class=”claseMiBtn”. |
| style | Texto | Permite indicar estilos adicionales que no están dentro de una clase de CSS. Ejemplo del resultado: style= "font-size: 11px; color: #ffffff; background-color: #e40044". |
ePagos.botonPago({
"atributos":{
"elemento_destino":"miDiv",
"label":"Iniciar Pago",
"id":"miBtn",
"className":"claseMiBtn",
"style": "font-size: 11px; color: #ffffff; background-color: #e40044"
}
});
Al pasar por encima del botón en forma de “tooltip” se despliega información sobre ePagos, es posible personalizar la estética de este elemento, para que se adapte a su sitio Web de forma nativa.
Las opciones de diseño se configuran con los siguientes atributos del objeto, y se ubican dentro del atributo estiloTooltip.
Ninguno de estos atributos es obligatorio, en el caso de no estar definidos el elemento tendrá un estilo por defecto.
| Nombre | Tipo | Descripción |
|---|---|---|
| background_color | Texto | Fondo del tooltip |
| font_family | Texto | Fuente del tooltip |
| font_color | Texto | Color de la fuente del tooltip |
| font_size | Texto | Tamaño de la fuente del tooltip |
ePagos.botonPago({
"estiloTooltip":{
"background_color":"#A3E4D7",
"font_family":"Arial,Times New Roman",
"font_color":"black",
"font_size":"17px"
}
});
Al invocar al método botonPago se valida tanto la estructura como el contenido de los parámetros.
En el caso que surja algún tipo de error, deben ser capturados en el evento “errorEpagos”, por lo que se recomienda su implementación. El mensaje de error (event.detail.mensaje) puede ser manipulado por el implementador de la manera que sea más conveniente para adaptarse a la forma de mostrar los errores en su sitio web.
Este es el ejemplo de la implementación que se incluye por defecto, para loguear todos los errores por consola.
window.addEventListener("errorEpagos", function(event){
console.error(event.detail.mensaje);
});
Si necesita generar más de un botón dentro de su sitio, para por ejemplo mostrar diferentes grupos de formas de pago, o pagos con información diferente, deberá volver a setear el objeto “ePagos” las veces que necesite.
<html>
<head>
<!-- el contenido del head de su página //-->
</head>
<body>
<!-- el contenido de su web antes del botón a agregar //-->
<div id="elementoEpagos"></div>
<div id="miDiv"></div>
<script>
var script = document.createElement("script"); script.addEventListener("load", function(){
window.addEventListener("errorEpagos", function(event){
console.error(event.detail.mensaje);
}
);
//OPERACION 1
ePagos.setClavePublica("988083f870919095d2661ae5f59a523e");
ePagos.setOrganismo(99);
ePagos.setAmbiente("T");
ePagos.botonPago({
"datosOperacion":{
"convenio":"36589",
"numero_operacion":"12345",
"ok_url":"http://www.su_sitio.com.ar/ok_operacion1.php",
"error_url":" http://www.su_sitio.com.ar/error_operacion1.php ",
"monto_operacion":737
}
});
//OPERACION 2
ePagos.botonPago({
"datosOperacion":{
"convenio":"10000",
"numero_operacion":"12346",
"ok_url":"http://www.su_sitio.com.ar/ok_operacion2.php",
"error_url":"http://www.su_sitio.com.ar/error_operacion2.php ",
"monto_operacion":36
},
"atributos":{
"elemento_destino":"miDiv",
"style":"background-color: #FFFFE0;" },
"estiloTooltip":{
"background_color":"#A3E4D7",
"font_family":"Arial,Times New Roman",
"font_color":"white",
}
});
});
script.src = "https://sandbox.epagos.com.ar/quickstart/epagos.min.js"; script.async = true;
document.getElementsByTagName("script")[0].parentNode.appendChild(script);
</script>
<!-- el contenido de su web después del botón a agregar //-->
</body>
</html>
| Sandbox (pruebas) | Producción |
|---|---|
| https://sandbox.epagos.com.ar/quickstart/epagos.min.js | https://api.epagos.com.ar/quickstart/epagos.min.js |