Formulario Custom
En este esquema el código del Formulario de Pagos debe ser desarrollado por el comercio bajo estrictas especificaciones brindadas por DECIDIR. Se debe tener en cuenta que al elegir este mecanismo el Comercio acepta implementar todos y cada uno de los cambios que DECIDIR solicite en el futuro, para permitir que el producto disponga de todas las funcionalidades previstas y necesarias.
Además, las adecuaciones necesarias para soportar el Formulario de pago en diferentes Dispositivos estarán a cargo del Comercio Cliente.
La ventaja de este método es el nivel de personalización que puede alcanzar en el diseño de su formulario.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payment method</title>
<style type="text/css">
input[type=text]::-ms-clear { display: none; }
.paybox { background: #f6f6f6; font-family: Arial,sans-serif; font-size: 14px; }
.paybox h1 { width: 350px; padding: 30px; margin: auto; border-width: 1px 1px 0px 1px; border-style: solid; border-color: #ddd; border-radius: 10px 10px 0px 0px; text-align: center; background: #eef2f4 ; font-weight: 300; color: #5d6f78; font-size: 24px;}
.paybox form { border: 1px solid #ddd; padding: 30px; border-radius: 0px 0px 10px 10px; width: 350px; margin: auto; background: #fff;}
.paybox form .row { margin-bottom: 10px;}
.paybox form .row .col { display: inline-block; vertical-align: top;}
.paybox form .row .col1 { width: 55%; }
.paybox form .row .col2 { width: 40%; }
.paybox form label { display: block; padding-top: 10px; font-weight: bold;}
.paybox form input[type="text"], select { padding-left: 6px; height: 40px; line-height: 1; margin-top: 4px; border: 1px solid #c7cbce; }
.paybox form select { width: 70px;}
.paybox form input[id="CardNumber"] { width: 55%; border-radius: 5px; }
.paybox form input[id="CardHolderName"] { width: 100%; border-radius: 5px; }
.paybox form input[id="CardSecurityCode"] { border-radius: 5px 0px 0px 5px; }
.paybox form input[id="CardHolderMail"] { width: 100%; border-radius: 5px; }
.paybox form input[id="CardExpirationDate"] { border-radius: 5px; }
.paybox form #boxCardNumber { position: relative; }
.paybox form ::-webkit-input-placeholder {color: #999;}
.paybox form ::-moz-placeholder {color: #999;}
.paybox form :-ms-input-placeholder {color: #999;}
.paybox form :-moz-placeholder {color: #999; letter-spacing: 1px;}
.paybox form #CardNumber:-ms-input-placeholder { letter-spacing: 1px; }
.paybox form #CardNumber::-moz-placeholder { letter-spacing: 1px; }
.paybox form #CardNumber::-webkit-input-placeholder { letter-spacing: 1px; }
.paybox form #CardSecurityCodeHelper { background-color: #f2f2f2; color: #5e656b; display: inline-block; border: 1px solid #c7cbce; border-left: 0px; height: 40px; padding: 5px 4px; border-radius: 0px 5px 5px 0px;}
.paybox form button[type="submit"] { border: 1px solid #54c7c3; padding: 6px; border-radius: 5px; background: #54c7c3; color: #fff; font-size: 16px; width: 50%; margin-left: 25%; cursor: pointer;}
.paybox form button[type="submit"]:hover { background: #6dcecb;}
</style>
</head>
<body class="paybox">
<h1>Formulario de Pago</h1>
<form action="respuesta.php" method="POST" id="payform">
<div class="row">
<label for="CardNumber">Número de Tarjeta</label>
<div id="boxCardNumber"><input type="text" id="CardNumber" placeholder="•••• •••• •••• ••••" autocomplete="off" /></div>
</div>
<div class="row">
<label for="CardHolderName">Nombre</label>
<input type="text" id="CardHolderName" placeholder="Ingrese su nombre" />
</div>
<div class="row">
<div class="col col1">
<!--La fecha de vencimiewnto puede solicitarse en uno o 2 campos, a continuación se encuentran ambos fragmentos de código-->
<!--Fecha de vencimiento en un solo campo:-->
<!--
<label for="CardExpirationDate">Vencimiento</label>
<input type="text" size="12" id="CardExpirationDate" placeholder="MMAA" />
-->
<!--Fin fecha de vencimiento en un solo campo-->
<!--Fecha de Vencimiento en 2 campos:-->
<label for="CardExpirationMonth">Vencimiento</label>
<select id="CardExpirationMonth"><option>MM</option><?$m=1; do{?><option value="<?=str_pad($m,2,'0',STR_PAD_LEFT)?>"><?=str_pad($m,2,'0',STR_PAD_LEFT)?></option><?} while ($m++ < 12);?></select>
<select id="CardExpirationYear"><option>AAAA</option><?$y=date('Y'); do{?><option value="<?=substr($y,-2)?>"><?=$y?></option><?} while ($y++ < date('Y')+10);?></select>
<!--Fin fecha de Vencimiento en 2 campos-->
</div>
<div class="col col2">
<label for="CardSecurityCode">CVC</label>
<input type="text" size="3" id="CardSecurityCode" placeholder="•••" ><button id="CardSecurityCodeHelper" type="button" tabindex="-1">?</button>
</div>
</div>
<div class="row">
<label for="CardHolderMail">Email</label>
<input type="text" size="30" id="CardHolderMail" placeholder="Ingrese su email" >
</div>
<br/><br/>
<div class="row">
<button type="submit" class="btn btn-primary col-xs-12">Pagar $AR 55</button>
</div>
<input type="hidden" name="idRequest" id="RequestKey" value="<?php echo $rta->PublicRequestKey; ?>" />
</form>
<script src="https://sandbox.decidir.com/custom/callback/1.1/payment.js"></script>
<script type="text/javascript">
new Payment().init({
id: 'payform',
fieldsId: {
CardHolderName: 'CardHolderName',
CardHolderMail: 'CardHolderMail',
CardNumber: 'CardNumber',
//Para fecha de venciomiento en 2 selectores:
//CardExpirationYear: 'CardExpirationYear',
//CardExpirationMonth: 'CardExpirationMonth',
//Para fecha de vencimiento en un solo campo:
CardExpirationDate: 'CardExpirationDate',
CardSecurityCode: 'CardSecurityCode',
PublicRequestKey: 'RequestKey',
CardSecurityCodeHelper: 'CardSecurityCodeHelper'
},
callback: function (response) {
if(window.console){
console.log(response);
}
if(response.Status == 'SUCCESS'){
var strPAK = new String(response.PublicAnswerKey);
if(strPAK.length == 36){
alert("Se ha recibido la PublicAnswerKey " + strPAK + ". Proseguir hacia el GAA.");
rk = "<?php echo $rta->RequestKey; ?>";
prk = "<?php echo $rta->PublicRequestKey; ?>";
location.href="gaa.php?pa="+response.PublicAnswerKey+"&rk="+rk+"&prk="+prk;
}else{
alert("No se ha recibido un PublicAnwserKey valido. Consultar servicio Operation.");
}
}else{
if(response.Error && Array.isArray(response.Error)){
if(response.Error.length > 0){
alert("Error de validacion de datos en el formulario.");
}else{
alert("Error de comunicacion con Decidir.");
}
}
}
},
options: {
displayCreditCardTypeDetected: true,
displayCreditCardTypeContainerId: null,
cardType: null,
cardBin: null,
displayCardBin: true,
displayCardBinContainerId: null
}
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payment method</title>
<style type="text/css">
input[type=text]::-ms-clear { display: none; }
.paybox { background: #f6f6f6; font-family: Arial,sans-serif; font-size: 14px; }
.paybox h1 { width: 350px; padding: 30px; margin: auto; border-width: 1px 1px 0px 1px; border-style: solid; border-color: #ddd; border-radius: 10px 10px 0px 0px; text-align: center; background: #eef2f4 ; font-weight: 300; color: #5d6f78; font-size: 24px;}
.paybox form { border: 1px solid #ddd; padding: 30px; border-radius: 0px 0px 10px 10px; width: 350px; margin: auto; background: #fff;}
.paybox form .row { margin-bottom: 10px;}
.paybox form .row .col { display: inline-block; vertical-align: top;}
.paybox form .row .col1 { width: 55%; }
.paybox form .row .col2 { width: 40%; }
.paybox form label { display: block; padding-top: 10px; font-weight: bold;}
.paybox form input[type="text"], select { padding-left: 6px; height: 40px; line-height: 1; margin-top: 4px; border: 1px solid #c7cbce; }
.paybox form select { width: 70px;}
.paybox form input[id="CardNumber"] { width: 55%; border-radius: 5px; }
.paybox form input[id="CardHolderName"] { width: 100%; border-radius: 5px; }
.paybox form input[id="CardSecurityCode"] { border-radius: 5px 0px 0px 5px; }
.paybox form input[id="CardHolderMail"] { width: 100%; border-radius: 5px; }
.paybox form input[id="CardExpirationDate"] { border-radius: 5px; }
.paybox form #boxCardNumber { position: relative; }
.paybox form ::-webkit-input-placeholder {color: #999;}
.paybox form ::-moz-placeholder {color: #999;}
.paybox form :-ms-input-placeholder {color: #999;}
.paybox form :-moz-placeholder {color: #999; letter-spacing: 1px;}
.paybox form #CardNumber:-ms-input-placeholder { letter-spacing: 1px; }
.paybox form #CardNumber::-moz-placeholder { letter-spacing: 1px; }
.paybox form #CardNumber::-webkit-input-placeholder { letter-spacing: 1px; }
.paybox form #CardSecurityCodeHelper { background-color: #f2f2f2; color: #5e656b; display: inline-block; border: 1px solid #c7cbce; border-left: 0px; height: 40px; padding: 5px 4px; border-radius: 0px 5px 5px 0px;}
.paybox form button[type="submit"] { border: 1px solid #54c7c3; padding: 6px; border-radius: 5px; background: #54c7c3; color: #fff; font-size: 16px; width: 50%; margin-left: 25%; cursor: pointer;}
.paybox form button[type="submit"]:hover { background: #6dcecb;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.getScript('https://sandbox.decidir.com/custom/callback/1.1/payment.js', function(data, txt_status, jqxhr){
new Payment().init({
id: 'payform',
fieldsId: {
CardHolderName: 'CardHolderName',
CardHolderMail: 'CardHolderMail',
CardNumber: 'CardNumber',
//Para fecha de venciomiento en 2 selectores:
CardExpirationMonth: 'CardExpirationMonth',
CardExpirationYear: 'CardExpirationYear',
//Para fecha de vencimiento en un solo campo:
//CardExpirationDate: 'CardExpirationDate',
CardSecurityCode: 'CardSecurityCode',
PublicRequestKey: 'RequestKey',
CardSecurityCodeHelper: 'CardSecurityCodeHelper'
},
callback: function (response) {
if(window.console){
console.log(response);
}
if(response.Status == 'SUCCESS'){
var strPAK = new String(response.PublicAnswerKey);
if(strPAK.length == 36){
alert("Se ha recibido la PublicAnswerKey " + strPAK + ". Proseguir hacia el GAA.");
rk = "RequestKey; ?>";
prk = "PublicRequestKey; ?>";
location.href="gaa.php?pa="+response.PublicAnswerKey+"&rk="+rk+"&prk="+prk;
}else{
alert("No se ha recibido un PublicAnwserKey valido. Consultar servicio Operation.");
}
}else{
if(response.Error && Array.isArray(response.Error)){
if(response.Error.length > 0){
alert("Error de validacion de datos en el formulario.");
}else{
alert("Error de comunicacion con Decidir.");
}
}
}
},
options: {
displayCreditCardTypeDetected: true,
displayCreditCardTypeContainerId: null,
cardType: null,
cardBin: null,
displayCardBin: true,
displayCardBinContainerId: null
}
});
});
});
</script>
</head>
<body class="paybox">
<h1>Formulario de Pago</h1>
<form action="respuesta.php" method="POST" id="payform">
<div class="row">
<label for="CardNumber">Número de Tarjeta</label>
<div id="boxCardNumber"><input type="text" id="CardNumber" placeholder="•••• •••• •••• ••••" autocomplete="off" /></div>
</div>
<div class="row">
<label for="CardHolderName">Nombre</label>
<input type="text" id="CardHolderName" placeholder="Ingrese su nombre" />
</div>
<div class="row">
<div class="col col1">
<!--La fecha de vencimiewnto puede solicitarse en uno o 2 campos, a continuación se encuentran ambos fragmentos de código-->
<!--Fecha de vencimiento en un solo campo:-->
<!--
<label for="CardExpirationDate">Vencimiento</label>
<input type="text" size="12" id="CardExpirationDate" placeholder="MMAA" />
-->
<!--Fin fecha de vencimiento en un solo campo-->
<!--Fecha de Vencimiento en 2 campos:-->
<label for="CardExpirationMonth">Vencimiento</label>
<select id="CardExpirationMonth"><option>MM</option><?$m=1; do{?><option value="<?=str_pad($m,2,'0',STR_PAD_LEFT)?>"><?=str_pad($m,2,'0',STR_PAD_LEFT)?></option><?} while ($m++ < 12);?></select>
<select id="CardExpirationYear"><option>AAAA</option><?$y=date('Y'); do{?><option value="<?=substr($y,-2)?>"><?=$y?></option><?} while ($y++ < date('Y')+10);?></select>
<!--Fin fecha de Vencimiento en 2 campos-->
</div>
<div class="col col2">
<label for="CardSecurityCode">CVC</label>
<input type="text" size="3" id="CardSecurityCode" placeholder="•••" ><button id="CardSecurityCodeHelper" type="button" tabindex="-1">?</button>
</div>
</div>
<div class="row">
<label for="CardHolderMail">Email</label>
<input type="text" size="30" id="CardHolderMail" placeholder="Ingrese su email" >
</div>
<br/><br/>
<div class="row">
<button type="submit" class="btn btn-primary col-xs-12">Pagar $AR 55</button>
</div>
<input type="hidden" name="idRequest" id="RequestKey" value="<?php echo $rta->PublicRequestKey; ?>" />
</form>
</body>
</html>