GuĂa VPOS-X INLINE
1. Crear hoja de estilos Se debe crear una hoja de estilos (CSS) que contenga lo siguiente:
.imgloadvpos { position: absolute; top: 17.5%; left: 19%; width: 595px; height: 485px; z-index: 1003; background-color: #FFFFFF; visibility: hidden; border-width: 1px; border-style: ridge; } .overlayvpos { position: absolute; top: 0; left: 0; background: #000; z-index: 1001; opacity: 0.30; filter: alpha(opacity=30); visibility: hidden; height: ?px; width: ?px; } .modalvpos { position: absolute; top: 17.5%; left: 19%; width: 595px; height: 485px; padding: 0px; z-index: 1004; border-width: 1px; border-style: ridge; visibility: hidden; margin: 0px; } .iframevpos { padding: 0px; clear: both; width: 595px; height: 485px; margin: 0px; border: 0px; } .imgloadingvpos { position: absolute; left:46%; top: 42%; }
En el estilo overlayvpos, se debe editar las propiedades width y height. La propiedad width debe tener el mismo ancho del contenido de la página Web del comercio. Ej. width: 800px; La propiedad height debe tener el mismo largo del contenido de la página Web del comercio. Ej. height: 600px; Hacer el llamado de la hoja de estilos en la página Web antes del cierre de la etiqueta HEAD de la siguiente manera:
<link href="[nombre de la hoja de estilos].css" rel="stylesheet" type="text/css">
2. Agregar etiquetas HTML Dentro de la página de pago1 del comercio, se debe agregar las siguientes etiquetas HTML:
<div id="overlayvpos" class="overlayvpos"></div> <div id="imgloadvpos" class="imgloadvpos"><img alt="Cargando VPOS" src="loading.gif" class="imgloadingvpos"></div> <div id="modalvpos" class="modalvpos"><iframe name="iframevpos" class="iframevpos" scrolling="no" frameborder="0"></iframe></div>
La imagen loading.gif será proporcionada por ALIGNET. Si esta es colocada dentro de un directorio, se debe cambiar la propiedad src de la etiqueta IMG, de la siguiente manera:
src="images/loading.gif"
1
contiene el formulario con los datos cifrados que serán enviados al VPOS.
3. Agregar función de JavaScript Dentro de la sección de JavaScript, se debe agregar la siguiente función:
function enviarvpos(){ var divOverlay = document.getElementById("overlayvpos"); var divImgLoad = document.getElementById("imgloadvpos"); var divModal = document.getElementById("modalvpos"); divOverlay.style.visibility="visible"; divImgLoad.style.visibility="visible"; divModal.style.visibility="visible"; document.[nombre del formulario].target="iframevpos"; document.[nombre del formulario].submit(); }
4. Nombres reservados El VPOS tiene etiquetas con un id único asignado. Ej.
<div id="back"> … </div>
Se requiere, que la página de pago del comercio no use los siguientes nombres: − − − − − − − − − − − − − − − − − − − − − − − −
back container planpago contPP etiquetaPP tot tarjeta etiquetaTit contTarj elementoinput mtarjcontCombo mtarjCombo lista numtar contAyuTarj ayuTarjSombra ayuTarjeta pTarj codseg contAyuCodSeg ayuCodSombra ayuCodSeg pCvv imgbrand
− − − − − − − − − − − − − − − − − −
fechaTarjcontCombo fechaTarjCombo FeTarjComboScroll FeTarjCombolist brand_# (# es un número correlativo) sbrand_# mes_# anio_# plan_# anoTarjcontCombo anoTarjCombo PPCuotasContCombo PPCuotasCombo Listacuotas PPlanContCombo PPPlanCombo Listaplanes EditarFlechita
5. Navegadores soportados El VPOS ha sido comprobado con los siguientes navegadores: Netscape Navigator Mozilla Firefox Internet Explorer Opera
9.0.0.4 3.0.1 6.0.2800.1106 (SP1) 9.52
6. Esquema Conceptual Web Browser
VPOS
Interfaz - Carrito de compras
DIV Overlay con opacity