forked from ntoirac/SDK-Java
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathformularioHibridoEjemplo.html
129 lines (123 loc) · 4.05 KB
/
formularioHibridoEjemplo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<head>
<title>Formulario Híbrido</title>
<meta charset="UTF-8">
<script src="https://developers.todopago.com.ar/resources/TPHybridForm-v0.1.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript">
</script>
</head>
<body class="contentContainer">
<div id="tp-form-tph">
<div id="tp-logo"></div>
<div id="tp-content-form">
<span class="tp-label">Elegí tu forma de pago </span>
<div>
<select id="formaDePagoCbx"></select>
</div>
<div>
<select id="bancoCbx"></select>
</div>
<div>
<select id="promosCbx" class="left"></select>
<label id="labelPromotionTextId" class="left tp-label"></label>
<div class="clear"></div>
</div>
<div><!-- Para los casos en el que el comercio opera con PEI -->
<label id="labelPeiCheckboxId"></label>
<input id="peiCbx"/>
</div>
<div>
<input id="numeroTarjetaTxt"/>
</div>
<div class="dateFields">
<input id="mesTxt" class="left">
<span class="left spacer">/</span>
<input id="anioTxt" class="left">
<div class="clear"></div>
</div>
<div>
<input id="codigoSeguridadTxt" class="left"/>
<label id="labelCodSegTextId" class="left tp-label"></label>
<div class="clear"></div>
</div>
<div>
<input id="apynTxt"/>
</div>
<div>
<select id="tipoDocCbx"></select>
</div>
<div>
<input id="nroDocTxt"/>
</div>
<div>
<input id="emailTxt"/><br/>
</div>
<div><!-- Para los casos en el que el comercio opera con PEI -->
<label id="labelPeiTokenTextId"></label>
<input id="peiTokenTxt"/>
</div>
<div id="tp-bt-wrapper">
<button id="MY_btnPagarConBilletera" class="tp-button"/>
<button id="MY_btnConfirmarPago" class="tp-button"/>
</div>
</div>
</div>
</body>
<script>
//PublicRequesKey, esta se obtiene de la respuesta del SAR
var publicKey = "t74222eed-0e34-49a5-dbf4-2d12f58007d3";
var mail = "[email protected]";
var completeName = "Juan Perez";
var dni = '31345234';
var defDniType = 'CI';
/************* CONFIGURACION DEL API ************************/
window.TPFORMAPI.hybridForm.initForm({
callbackValidationErrorFunction: 'validationCollector',
callbackCustomSuccessFunction: 'customPaymentSuccessResponse',
callbackCustomErrorFunction: 'customPaymentErrorResponse',
callbackBilleteraFunction: 'billeteraPaymentResponse',
botonPagarId: 'MY_btnConfirmarPago',
botonPagarConBilleteraId: 'MY_btnPagarConBilletera',
modalCssClass: 'modal-class',
modalContentCssClass: 'modal-content',
beforeRequest: 'initLoading',
afterRequest: 'stopLoading'
});
/************* SETEO UN ITEM PARA COMPRAR ************************/
window.TPFORMAPI.hybridForm.setItem({
publicKey: publicKey,
defaultNombreApellido: completeName,
defaultNumeroDoc: dni,
defaultMail: mail,
defaultTipoDoc: defDniType
});
//callbacks de respuesta del pago
function validationCollector(parametros) {
console.log("My validator collector");
console.log(parametros.field + " ==> " + parametros.error);
console.log(parametros);
}
function billeteraPaymentResponse(response) {
console.log("My wallet callback");
console.log(response.ResultCode + " : " + response.ResultMessage);
console.log(response);
}
function customPaymentSuccessResponse(response) {
console.log("My custom payment success callback");
console.log(response.ResultCode + " : " + response.ResultMessage);
console.log(response);
}
function customPaymentErrorResponse(response) {
console.log("Mi custom payment error callback");
console.log(response.ResultCode + " : " + response.ResultMessage);
console.log(response);
}
function initLoading() {
console.log('Cargando');
}
function stopLoading() {
console.log('Stop loading...');
}
</script>
</html>