Gua 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 pgina Web
del comercio. Ej. width: 800px;

La propiedad height debe tener el mismo largo del contenido de la pgina Web
del comercio. Ej. height: 600px;

Hacer el llamado de la hoja de estilos en la pgina 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 pgina de pago
1
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 sern enviados al VPOS.
3. Agregar funcin de JavaScript
Dentro de la seccin de JavaScript, se debe agregar la siguiente funcin:


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 pgina 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 nmero 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 9.0.0.4
Mozilla Firefox 3.0.1
Internet Explorer 6.0.2800.1106 (SP1)
Opera 9.52

6. Esquema Conceptual


Interfaz - Carrito
de compras
DIV Overlay con
opacity
VPOS
Web Browser