Hosted Field Integration

Es uno de los otros servicio que tiene Paguelofacil para integración con Javascript
Permite realizar pagos desde una petición generada desde Javascript.

 


  

Prerrequisitos

CCLW
Llaves de conexión al API
Certificado SSL
TLS 1.3 o superior

Base URL de servidores

Producción
https://secure.paguelofacil.com/
Pruebas
https://sandbox.paguelofacil.com/

Paso 1. Agregar script de encabezado

 

Copia, pega en tu el script para obtener la libreria de Hosted Field Payment Paguelofacil.

 

<script src="https://secure.paguelofacil.com/HostedFields/vendor/scripts/PFScript.js"></script>

Paso 1. Agregar el formulario de pago

 

Copia, pega en tu web el ejemplo de html. Puedes modificar los valores para darle un estilo personalizado.

 

<form id="my-sample-form" class="pfform">
                                    <div id="content-form" class="row">
                                        <div id="card-number" class="form-group input-group m-t-40">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fa fa-credit-card">
                                                        <img id="card-number-img" width="30px" src="https://secure.paguelofacil.com/HostedFields/vendor/images/cc.png">
                                                    </i>
                                                </span>
                                            </div>
                                            <div id="card-number-input" class="form-control">

                                            </div>
                                            <span id="card-number-msg" class="help-block"></span>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-7 col-md-7">
                                                <div id="card-exp-date" class="form-group">
                                                    <label>Fecha de Expiración</label>
                                                    <div class="form-control" id="card-exp-date-input">

                                                    </div>
                                                    <span id="card-exp-date-msg" class="help-block"></span>
                                                </div>
                                            </div>
                                            <div class="col-xs-5 col-md-5 pull-right">
                                                <div id="card-cvv" class="form-group">
                                                    <label>Código de Seguridad</label>
                                                    <div class="form-control" id="card-cvv-input">

                                                    </div>
                                                    <span id="card-cvv-msg" class="help-block"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-7 col-md-7">
                                                <div id="first-name" class="form-group">
                                                    <label>Nombres</label>
                                                    <div class="form-control" id="first-name-input">

                                                    </div>
                                                    <span id="first-name-msg" class="help-block"></span>
                                                </div>
                                            </div>
                                            <div class="col-xs-5 col-md-5 pull-right">
                                                <div id="last-name" class="form-group">
                                                    <label>Apellidos</label>
                                                    <div class="form-control" id="last-name-input">

                                                    </div>
                                                    <span id="last-name-msg" class="help-block"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-5 text-right">
                                            <button type="submit" class="btn btn-info" id="btnpay"><i class="fa fa-credit-card" aria-hidden="true"></i> Pagar Orden</button>
                                        </div>
                                    </div>
                                </form>

Paso 1. Agregar javascript de configuración

 

Copia, pega en tu web el ejemplo de javascript. Modifica los parámetros de configuración de  CCLW , TOKEN API , AMOUNT , DESCRIPTION , EMAIL , PHONE , FULLNAME 

 

Ejemplo, javascript  de procesamiento.

 

<script type="text/javascript">


    window.onload = function(){
            
            token_api = "TOKEN_OTORGADO_POR_PAGUELOFACIL";
            var cclw = "CCLW_OTORGADO_POR_PAGUELOFACIL";

            pfacil.useAsSandbox(false); // si estará modo sandbox
            
            pfacil.openService(
                token_api,
                cclw
                )
                .then(function (merchantSetup) {
                    startMerchantForm(merchantSetup);
                }, function (error) {
                    console.log(error);
                });
            function startMerchantForm(merchantSetup) {
                var setup = {
                    form: "my-sample-form",
                    fields: {
                        defaultHeight: 35,
                        number: {
                            id: "card-number-input",
                            placeholder: "Número de Tarjeta",
                            formatData: true
                        },
                        cvv: {
                            id: "card-cvv-input",
                            placeholder: "Código de Seguridad"
                        },
                        expirationDate: {
                            id: "card-exp-date-input",
                            placeholder: "MM/AAAA"
                        },
                        firstName: {
                            id: "first-name-input",
                            placeholder: "Nombres"
                        },
                        lastName: {
                            id: "last-name-input",
                            placeholder: "Apellidos"
                        },
                        email: {
                            id: "card-holder-email-input",
                            placeholder: "Dirección de Correo"
                        },
                        phone: {
                            id: "card-holder-phone-input",
                            placeholder: "Teléfono"
                        },
                        onEvents: function (event) {
                            if (event.type === pfacil.defaultVars.externalEvents.FIELD_ON_CHANGE
                                || event.type === pfacil.defaultVars.externalEvents.SUBMIT) {

                                var fieldName = event.name;
                                var setupSel = setup.fields[fieldName];
                                if (setupSel) {
                                    var id = setupSel.id.replace("-input", "");
                                    var label = document.getElementById(id + "-msg");
                                    if (label) {
                                        var elementContent = document.getElementById(id);
                                        if (!event.isValid) {
                                            pfacil.commons.addClassElement(elementContent, "has-error");
                                            if (event.isEmpty) {
                                                label.innerText = "Requerido";
                                            } else {
                                                label.innerText = "Invalido";
                                            }
                                        } else {
                                            pfacil.commons.removeClassElement(elementContent, "has-error");
                                            if (event.isEmpty) {
                                                label.innerText = "Requerido";
                                            } else {
                                                label.innerText = "";
                                            }
                                        }
                                    }

                                    if (event.name === "number") {
                                        var img = document.getElementById(id + "-img");
                                        if (img && img.src) {
                                            var t = "cc";
                                            if (event.card && event.card.type) {
                                                t = event.card.type.toLowerCase();
                                            }
                                            img.src = "https://secure.paguelofacil.com/HostedFields/vendor/images/" + t + ".png";
                                        }
                                    }
                                }
                            }
                        }
                    },
                    onError: function (data) {
                        //ocurrio un error general
                    },
                    onTxSuccess: function (data) {
                        //recibir respuesta procesada y exitosa
                    },
                    onTxError: function (data) {
                        //ocurrio un error de procesamiento
                    }
                }
                var paymentInfo = function () {
                    return {
                        amount: "1.00",
                        description: "Pago de Orden 123",
                        email: "alanbrito@email.com",
                        phone: "66666666",
                        fullName: "Alan Brito"
                    }
                }
                merchantSetup.customForm(setup, paymentInfo);
            }
        
    }

    </script>

Paso 2. Procesar respuesta

Paguelofacil genera una respuesta a través del callback onTxSuccess, recibiendo data con la información de pago.

Transacción Aprobada
{authStatus: "00",
binInfo:{
credit_card:{
country: "PA"
},
cardToken: "SANDBOX-60",
cardType: "VISA",
codOper: "SANDBOX_HFD-J3PHFK93QZN",
date: "2019-11-19T09:52:26",
displayNum: "7001",
email: "alanbrito@email.com",
idtx: 504397,
messageSys: "VER UNAVAILBLE",
name: "jose perez",
operationType: "AUTH_CAPTURE",
requestPayAmount: 1,
returnUrl: "https://sandbox.paguelofacil.com/PF/#/default-receipt/SANDBOX_HFD-J3PHFK93QZN",
status: 1,
totalPay: "1.0",
type: "VISA"
}
}

Transacción Denegada

{authStatus: "54",
binInfo:{
credit_card:{
country: "PA"
},
cardToken: null,
cardType: "VISA",
codOper: "SANDBOX_HFD-033ROYYVNIW",
date: "2019-11-19T09:57:11",
displayNum: "1111",
email: "alanbrito@email.com",
idtx: 504399,
messageSys: "Card Expired",
name: "jose perez",
operationType: "AUTH_CAPTURE",
requestPayAmount: 1,
returnUrl: "https://sandbox.paguelofacil.com/PF/#/default-receipt/SANDBOX_HFD-033ROYYVNIW",
status: 0,
totalPay: "1.0",
type: "VISA",
}
}