Botón de pago

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.net/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>
        
      

Generación del botón

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).

Configuración de la solicitud

El método botonPago contiene el atributo datosOperacion que le permitirá configurar la operación a iniciar. Los siguientes atributos son de carácter obligatorio:

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

Para más información acerca de los valores que puede enviar, consulte la sección de  E-Checkout.

          
              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
                  }
                }
              );
          
        

Configuración de diseño del botón

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"
               }
            });
        
      

Configuración de diseño del elemento Info de ePagos (tooltip)

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"
             }
          });
        
      


Captura y manejo de errores

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);
        });
      
    


Integrar múltiples botones

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.net/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>
      
    


Ubicación de la librería

Sandbox (pruebas) Producción
https://sandbox.epagos.net/quickstart/epagos.min.js https://api.epagos.net/quickstart/epagos.min.js