PagueloFacil App
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 todos nuestros métodos de pago con usuario autenticado en nuestro sistema. 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/WALLET/PFScript.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: 45%;"></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>
const getUrlParam = (key) => new URLSearchParams(window.location.search).get(key);
pfWallet = pfWallet || {};
let apiKey = "";
let cclw = "";
apiKey = "E2f0JaAPu3aN6UYB"; // AccessTokenApi que encuentras en Mi Empresas-> Llaves
cclw = "15224BE0CBB8EAAC33B53850FF71EAE732253AFCB"; //Código Web
pfWallet.useAsSandbox(true);
pfWallet.openService({
apiKey: apiKey,
cclw: cclw
}).then(function (merchantSetup) {
startMerchantForm(merchantSetup);
}, function (error) {
console.log(error);
});
let sdk;
function startMerchantForm(merchantSetup) {
let paymentInfo = {
amount: parseFloat(getUrlParam('monto')),
discount: 0.0,
taxAmount: 0.0,
description: getUrlParam('descripcion')
};
console.log("merchantSetup", merchantSetup);
let setup = {
lang: 'es',
embedded: (getUrlParam('boton') == "false"),
// type: 'lk',
// code: 'LK-MAIMLMD1FKSQKCHU',
container: 'container-form',
onError: function (data) {
console.error("errors", data);
},
onTxSuccess: function (data) {
console.log("onTxSuccess", data);
window.location.href = pfWallet.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
);
}
</script>