Clave
Una integración pensada para ser implementada del lado del cliente, a través de nuestro SDK podrás invocar un servicio JS para el procesamiento de transacciones con tarjetas CLAVE. Con este método, mantendrá siempre al usuario dentro de su sitio y controlará todas las respuestas en pantalla.
1. Incluye el script en tu sitio
Debes incluir los scripts para poder utilizar clave dentro de tu sitio web.
<head >
...
<script src="https://secure.paguelofacil.com/HostedFields/vendor/scripts/PFScriptClave.js"></script>
...
<head >
2. Agrega el HTML en tu sitio
Debes agregar un identificador id el elemento del HTML que contendrá el SDK.
<body>
<div align="center">
<div id="container-form" style="width: 30%;"></div>
</div>
</body>
3. Incluye SDK y configuralo en tu sitio
Debes personalizar la cofiguración del SDK y obtener la respuesta del procesamiento de la transacción dentro de tu sitio web.
<script>
let accessTokenApi = "yIEDr0o1QrkzMH1g46";
let cclw = "15224BE0CBB8E4AB224938A491D0B7B";
//pfClave.useAsSandbox(true); //en caso de que desee realizar transacciones para pruebas.
pfClave.openService({
apiKey: accessTokenApi,
cclw: cclw
}).then(function (merchantSetup) {
startMerchantForm(merchantSetup);
}, function (error) {
console.log(error);
});
let sdk;
function startMerchantForm(merchantSetup) {
let paymentInfo = {
amount: 15.0, //Monto de la compra
taxAmount: 0.0, //Monto de los impuestos
description: "descripcion personalizada", //Descripción corta del motivo del pago
customFieldValues: [
{nameOrLabel:'paymentID', value: '1221'}
]
};
let userInfo = {
email: "alam@brito.com", //Correo electrónico del usuario que realiza la compra
phone: "+50761111111", //Teléfono movil del usuario que realiza la compra
};
let setup = {
lang: 'es', //Idioma los valores posibles son "es", "en"
embedded: false, // sí desea que se embebido o muestre un botón.
container: 'container-form', //Elemento html donde se introducirá el formulario de pago de clave
onError: function (data) {
console.error("onError errors", data);
},
onTxSuccess: function (data) {
console.log("onTxSuccess", data);
window.location.href = pfClave.pfHostViews + `/pf/default-receipt/${data?.Oper}`;
},
onTxError: function (data) {
console.error("when the onTxError, in other process", data);
},
onClose: function () {
console.log("onClose called");
}
};
sdk = merchantSetup.init(
merchantSetup.dataMerchant,
paymentInfo,
setup,
userInfo
);
}
</script>
Personalizar el tamaño de la popup
A través de un código de JS puedes manipular y personalizar el tamaño de la ventana.
<script>
var c = document.getElementById("container-form").children; document.getElementById(c[0].id).style.height = "950px";
</script>
Tarjetas de Pruebas
Con estos números de Tarjetas, podrás realizar transacciones aprobadas en cualquiera de nuestros servicios. En cuanto a las fechas de vencimiento te funcionan cualquier mes y año mayor o igual a la fecha actual y para el código de seguridad (CVV2, CVC2) cualquiera tres digitos númericos.
4059310181757001
4916012776136988
4716040174085053
4143766247546688
4929019201087046
5517747952039692
5451819737278230
5161216979741515
5372362326060103
5527316088871226
6394240621480747
CVV: 570
Fecha: 04-24
PIN: 0482
Transacción Aprobada
5890846081457820
CVV: 867
Fecha: 07-20
PIN: 2944
Transacción Aprobada
5890840000000027
CVV: 723
Fecha: 04-21
PIN: 9999
Transacción Aprobada
5038460000000035
CVV: 490
Fecha: 04-21
PIN: 1234
Tarjeta expirada