e

onPage Checkout

El onPage Checkout de ePayco, simplifica y asegura el procesamiento de pagos en línea. Integra rápidamente Checkout en tu sitio para proporcionar a tus usuarios una experiencia de pago simplificada y lista para móviles que está mejorando constantemente.
La forma más fácil de integrar ePayco es a través de onPage Checkout, una herramienta integrada que se encarga de crear un formulario HTML, validar la entrada de los usuarios y asegurar los datos de sus clientes. Usando One Page Checkout, la información sensible de la tarjeta de crédito se envía directamente a ePayco, y no toca ingresa a tu servidor. ePayco vuelve a tu sitio una página de respuesta personalizable.

Integración

Agrega la libreria Javascript y el form que rendirazara el boton de pago:

        
        <form>
            <script src="https://s3-us-west-2.amazonaws.com/epayco/v1.0/checkoutEpayco.js" 
                class="epayco-button" 
                data-epayco-key="491d6a0b6e992cf924edd8d3d088aff1" 
                data-epayco-amount="50000" 
                data-epayco-name="Vestido Mujer Primavera" 
                data-epayco-description="Vestido Mujer Primavera" 
                data-epayco-currency="cop" 
                data-epayco-test="true"
                data-epayco-response="https://ejemplo.com/respuesta.html" >
            </script>
        </form>

Ejemplo

Da click en el siguiente boton:


Campo Requerido Descripción
data-epayco-key Si Public_key del comercio
data-epayco-amount Si Monto de la transacción
data-epayco-name Si Titulo del cobro
data-epayco-description Si Descripción del cobro
data-epayco-currency Si Moneda
data-epayco-test Si true/false modo pruebas
data-epayco-invoice No Numero de factura del producto
data-epayco-extra1 No Campo 1 de información extra
data-epayco-extra2 No Campo 2 de información extra
data-epayco-extra3 No Campo 3 de información extra
data-epayco-acepted No Pagina de respuesta aceptada
data-epayco-rejected No Pagina de respuesta rechazada
data-epayco-pending No Pagina de respuesta pendiente
data-epayco-response No Pagina de respuesta personalizada
data-epayco-confirmation No Pagina de confirmación para manipular la data

Respuesta Estática

puede consultar el resultado de tu transacción y redirigir al cliente a una página de respuesta al finalizarla, según el resultado se le mostrara una página personalizada, lo unico que debes hacer es incluir la url del archivo html e invocar el parámetro según sea el caso.

Variables

Campo Ejemplo de contenido
data-epayco-acepted http://misitio.com/aceptada.html
data-epayco-rejected http://misitio.com/rechazada.html
data-epayco-pending http://misitio.com/pendiente.html

Respuesta dinámica

Puede usar una página dinámica de ePayco en la cual lo unico que deberá hacer es incluirla en el directorio y usar data-epayco-response para invocarla, l finalizar la transación se agregaran parametros por GET los cuales son necesarios para consultar la transacción y verificar su estado.

Página de respuesta

        
           <!DOCTYPE html>
            <html lang="es">

            <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
                <title>Formulario Pruebas Respuesta</title>
                <!-- Bootstrap -->
                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
                <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                <!--[if lt IE 9]>
                      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                    <![endif]-->
            </head>

            <body>
                <header id="main-header" style="margin-top:20px">
                    <div class="row">
                        <div class="col-lg-12 franja">
                            <img class="center-block" src="https://369969691f476073508a-60bf0867add971908d4f26a64519c2aa.ssl.cf5.rackcdn.com/btns/epayco/logo1.png" style="">
                        </div>
                    </div>
                </header>
                <div class="container">
                    <div class="row" style="margin-top:20px">
                        <div class="col-lg-8 col-lg-offset-2 ">
                            <h4 style="text-align:left"> Respuesta de la Transacción </h4>
                            <hr>
                        </div>
                        <div class="col-lg-8 col-lg-offset-2 ">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <tbody>
                                        <tr>
                                            <td>Referencia</td>
                                            <td id="referencia"></td>
                                        </tr>
                                        <tr>
                                            <td class="bold">Fecha</td>
                                            <td id="fecha" class=""></td>
                                        </tr>
                                        <tr>
                                            <td>Respuesta</td>
                                            <td id="respuesta"></td>
                                        </tr>
                                        <tr>
                                            <td>Motivo</td>
                                            <td id="motivo"></td>
                                        </tr>
                                        <tr>
                                            <td class="bold">Banco</td>
                                            <td class="" id="banco">
                                        </tr>
                                        <tr>
                                            <td class="bold">Recibo</td>
                                            <td id="recibo"></td>
                                        </tr>
                                        <tr>
                                            <td class="bold">Total</td>
                                            <td class="" id="total">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <footer>
                    <div class="row">
                        <div class="container">
                            <div class="col-lg-8 col-lg-offset-2">
                                <img src="https://369969691f476073508a-60bf0867add971908d4f26a64519c2aa.ssl.cf5.rackcdn.com/btns/epayco/pagos_procesados_por_epayco_260px.png" style="margin-top:10px; float:left"> <img src="https://369969691f476073508a-60bf0867add971908d4f26a64519c2aa.ssl.cf5.rackcdn.com/btns/epayco/credibancologo.png" height="40px" style="margin-top:10px; float:right">
                            </div>
                        </div>
                    </div>
                </footer>
                <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
                <!-- Include all compiled plugins (below), or include individual files as needed -->
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                <script>
                function getQueryParam(param) {
                    location.search.substr(1)
                        .split("&")
                        .some(function(item) { // returns first occurence and stops
                            return item.split("=")[0] == param && (param = item.split("=")[1])
                        })
                    return param
                }
                $(document).ready(function() {
                    //llave publica del comercio

                    //Referencia de payco que viene por url
                    var ref_payco = getQueryParam('ref_payco');
                    //Url Rest Metodo get, se pasa la llave y la ref_payco como paremetro
                    var urlapp = "https://api.secure.payco.co/validation/v1/reference/" + ref_payco;

                    $.get(urlapp, function(response) {


                        if (response.success) {

                            if (response.data.x_cod_response == 1) {
                                //Codigo personalizado
                                alert("Transaccion Aprobada");

                                console.log('transacción aceptada');
                            }
                            //Transaccion Rechazada
                            if (response.data.x_cod_response == 2) {
                                console.log('transacción rechazada');
                            }
                            //Transaccion Pendiente
                            if (response.data.x_cod_response == 3) {
                                console.log('transacción pendiente');
                            }
                            //Transaccion Fallida
                            if (response.data.x_cod_response == 4) {
                                console.log('transacción fallida');
                            }

                            $('#fecha').html(response.data.x_transaction_date);
                            $('#respuesta').html(response.data.x_response);
                            $('#referencia').text(response.data.x_id_invoice);
                            $('#motivo').text(response.data.x_response_reason_text);
                            $('#recibo').text(response.data.x_transaction_id);
                            $('#banco').text(response.data.x_bank_name);
                            $('#autorizacion').text(response.data.x_approval_code);
                            $('#total').text(response.data.x_amount + ' ' + response.data.x_currency_code);


                        } else {
                            alert("Error consultando la información");
                        }
                    });

                });
                </script>
            </body>

            </html>

Confirmación

Puedes procesar la información de las transaciones al usar data-epayco-confirmation, el parametro que recibe es la url de tu servicio que desencriptar la data para que tu la puedas usar en tu db.

Ejemplo de código de confirmación en php

        
        <?php
                /*En esta página se reciben las variables enviadas desde ePayco hacia el servidor.
                Antes de realizar cualquier movimiento en base de datos se deben comprobar algunos valores
                Es muy importante comprobar la firma enviada desde ePayco
                Ingresar  el valor de p_cust_id_cliente lo encuentras en la configuración de tu cuenta ePayco
                Ingresar  el valor de p_key lo encuentras en la configuración de tu cuenta ePayco
                */

                $p_cust_id_cliente='';
                $p_key='';

                $x_ref_payco=$_REQUEST['x_ref_payco'];
                $x_transaction_id=$_REQUEST['x_transaction_id'];
                $x_amount=$_REQUEST['x_amount'];
                $x_currency_code=$_REQUEST['x_currency_code'];
                $x_signature=$_REQUEST['x_signature'];



                $signature=hash('sha256',
                       $p_cust_id_cliente.'^'
                      .$p_key.'^'
                      .$x_ref_payco.'^'
                      .$x_transaction_id.'^'
                      .$x_amount.'^'
                      .$x_currency_code
                    );

                $x_response=$_REQUEST['x_response'];
                $x_motivo=$_REQUEST['x_response_reason_text'];
                $x_id_invoice=$_REQUEST['x_id_invoice'];
                $x_autorizacion=$_REQUEST['x_approval_code'];

                //Validamos la firma
                if($x_signature==$signature){
                /*Si la firma esta bien podemos verificar los estado de la transacción*/
                $x_cod_response=$_REQUEST['x_cod_response'];
                switch ((int)$x_cod_response) {
                    case 1:
                        # code transacción aceptada
                        //echo "transacción aceptada";
                        break;
                    case 2:
                        # code transacción rechazada
                        //echo "transacción rechazada";
                        break;
                    case 3:
                        # code transacción pendiente
                        //echo "transacción pendiente";
                        break;
                    case 4:
                        # code transacción fallida
                        //echo "transacción fallida";
                        break;              
                    
                }

                }else{
                    die("Firma no valida");
                }

Tarjetas de Credito de Pruebas

Aceptada

Franquicia: Visa
Numero: 4575623182290326
Fecha Expiración: 06/18
Cvv: 123
Estado: Aceptada
Respuesta: Aceptada

Fondos insuficientes

Franquicia: Visa
Numero: 4151611527583283
Fecha Expiración: 06/18
Cvv: 123
Estado: Rechazada
Respuesta: Fondos Insuficientes

Copyright © 2016. ePayco todos los derechos reservados