Integração Pop-Up com Post/FORM

Introdução
 
Este documento tem como finalidade demonstrar a implementação da integração entre e-commerces e o meio de pagamento disponibilizado pela plataforma iVarejo via chamada ao ambiente iVarejo através do uso de Pop-Ups.
 
 
Padrão da integração
 
A integração é realizada por troca de informações via POST/FORMS para envio dos dados do pedido para pagamento.
 
Neste modelo de integração, o controle do processo de pagamento acontece no domínio da iVarejo, retirando grande parte da complexidade de implementação necessária nos outros modelos. As lojas virtuais, hotsites e ecommerces que adotarem este padrão implementarão um formulário simples onde a propriedade "Action" da tag <form> será configurada com um endereço da página de entrada de pedidos da iVarejo.  
 
Uma vez que a comunicação seja estabelecida entre as duas partes, a interface de pagamentos da iVarejo é exibida automaticamente em uma pop-up modal para o consumidor, orientando este através do fluxo de pagamento.
 
 
Código Fonte
 
1 - Formulário de Envio
 

<form id="frmForm1" method="post"

   action="http://hml.ivarejo.com.br/ecommerce/enviodadospedido.aspx">


   <input type="hidden" name="CodigoEntidade" value="Código da entidade ..." />
  

   <input type="hidden" name="URLRespostaProcessoPagamento"

      value="pagina retorno ecommrece ..." />
  

   <input type="hidden" name="TipoPessoa" id="TipoPessoa" value="F" />
  

   <!-- Valor do Pedido Sem Acréscimos de Frete + Taxas -->  

   <input type="hidden" name="ValorPedido" value="60.00" />
  

   <!-- Valor do Pedido Com Acréscimos de Frete + Taxas -->

   <input type="hidden" name="ValorTotalPedido" value="70.00" />

 


   <!-- Itens do Pedido -->
   <!-- Caso o pedido contenha mais de um item, adcionar novos campos. Ex:ItemPedido[x],

      QtdItemPedido[x], ValorItemPedido[x] -->

 

   <!--Nome do Item do Pedido-->
   <input type="hidden" name="DescItemPedido1" value="Guarda-Chuva Super SPC" />

 

   <!--Quantidade do Item do Pedido-->
   <input type="hidden" name="QtdItemPedido1" value="1" />  

 

   <!--Valor do Item do Pedido-->

   <input type="hidden" name="ValorItemPedido1" value="60.00" />

 

   <!-- Itens do Pedido -->

 

 

   <input type="text" id="NumeroPedido" name="NumeroPedido" readonly="readonly"

      style="left: 200px;position: absolute" />

 

   <input type="text" id="txtValorProduto" name="txtValorProduto" value="R$60,00"

      readonly="readonly" style="left: 200px; position: absolute;" />

 

   <input type="text" id="NomeConsumidor" name="NomeConsumidor" style="left: 200px;
      position: absolute;" />
    
   <input type="text" id="CPFConsumidor" name="CPFConsumidor" style="left: 200px;

      position: absolute;" />
    
   <input type="text" id="EmailConsumidor" name="EmailConsumidor" style="left: 200px;
      position: absolute;" />
    
   <input type="text" id="DataNascConsumidor" name="DataNascConsumidor" style="left: 200px;

      position: absolute;" />
    
   <select name="Sexo" style="left: 200px; position: absolute;">
      <option value="" selected="selected">Selecione...</option>
      <option value="M">Masculino</option>
      <option value="F">Feminino</option>
   </select>
    
   <input type="text" id="DDDTelefoneResidencial" name="DDDTelefoneResidencial" maxlength="2"
      style="left: 200px; position: absolute; width: 30px" />


   <input type="text" id="TelefoneResidencial" name="NumTelefoneResidencial"

      style="left: 250px; position: absolute; width: 100px" />
 
   <input type="text" id="DDDTelefoneComercial" name="DDDTelefoneComercial" maxlength="2"

      style="left: 200px; position: absolute; width: 30px" />


   <input type="text" id="TelefoneComercial" name="NumTelefoneComercial" style="left: 250px;

      position: absolute; width: 100px" />

 

   <input type="text" id="RamalTelefoneComercial" name="RamalTelefoneComercial"

      style="left: 400px; position: absolute; width: 50px" />

 

   <input type="text" id="DDDTelefoneCelular" name="DDDTelefoneCelular" maxlength="2"
      style="left: 200px; position: absolute; width: 30px" />

   <input type="text" id="TelefoneCelular" name="NumTelefoneCelular" style="left: 250px;
      position: absolute; width: 100px" />

   <input type="text" id="EnderecoResidencial" name="EnderecoResidencial"

      style="left: 200px; position: absolute" />

   <input type="text" id="NumeroResidencial" name="NumeroResidencial" style="left: 200px;
      position: absolute" />
  
   <input type="text" id="ComplementoResidencial" name="ComplementoResidencial"

      style="left: 200px; position: absolute" />

   <input type="text" id="CEPResidencial" name="CEPResidencial" style="left: 200px;
      position: absolute" />

   <input type="text" id="BairroResidencial" name="BairroResidencial" style="left: 200px;
      position: absolute" />
 
   <input type="text" id="CidadeResidencial" name="CidadeResidencial" style="left: 200px;
      position: absolute" />
    
   <select name="UFResidencial" style="left: 200px; position: absolute">
      <option value="" selected="selected">Selecione...</option>
      <option value='AC'>AC</option>
      <option value='AL'>AL</option>
      <option value='AM'>AM</option>
      <option value='AP'>AP</option>
      <option value='BA'>BA</option>
      <option value='CE'>CE</option>
      <option value='ES'>ES</option>
      <option value='DF'>DF</option>
      <option value='GO'>GO</option>
      <option value='MA'>MA</option>
      <option value='MG'>MG</option>
      <option value='MS'>MS</option>
      <option value='MT'>MT</option>
      <option value='PA'>PA</option>
      <option value='PB'>PB</option>
      <option value='PE'>PE</option>
      <option value='PI'>PI</option>
      <option value='PR'>PR</option>
      <option value='RJ'>RJ</option>
      <option value='RN'>RN</option>
      <option value='RR'>RR</option>
      <option value='RS'>RS</option>
      <option value='RO'>RO</option>
      <option value='SC'>SC</option>
      <option value='SE'>SE</option>
      <option value='SP'>SP</option>
      <option value='TO'>TO</option>
   </select>

 

    
   <!--Suprima a área "Endereço de Cobrança" caso você escolha utilizar o mesmo endereço

      da área "Endereço Residencial"-->


   <input type="text" id="EnderecoCobranca" name="EnderecoCobranca" style="left: 200px;
      position: absolute" />
   
   <input type="text" id="NumeroCobranca" name="NumeroCobranca" style="left: 200px;
      position: absolute" />
   

   <input type="text" id="ComplementoCobranca" name="ComplementoCobranca" style="left: 200px;
      position: absolute" />

 

   <input type="text" id="CEPCobranca" name="CEPCobranca" style="left: 200px;

      position: absolute" />
    
   <input type="text" id="BairroCobranca" name="BairroCobranca" style="left: 200px;
      position: absolute" />

   <input type="text" id="CidadeCobranca" name="CidadeCobranca" style="left: 200px;
      position: absolute" />

   <select name="UFCobranca" style="left: 200px; position: absolute">
      <option value="" selected="selected">Selecione...</option>
      <option value='AC'>AC</option>
      <option value='AL'>AL</option>
      <option value='AM'>AM</option>
      <option value='AP'>AP</option>
      <option value='BA'>BA</option>
      <option value='CE'>CE</option>
      <option value='ES'>ES</option>
      <option value='DF'>DF</option>
      <option value='GO'>GO</option>
      <option value='MA'>MA</option>
      <option value='MG'>MG</option>
      <option value='MS'>MS</option>
      <option value='MT'>MT</option>
      <option value='PA'>PA</option>
      <option value='PB'>PB</option>
      <option value='PE'>PE</option>
      <option value='PI'>PI</option>
      <option value='PR'>PR</option>
      <option value='RJ'>RJ</option>
      <option value='RN'>RN</option>
      <option value='RR'>RR</option>
      <option value='RS'>RS</option>
      <option value='RO'>RO</option>
      <option value='SC'>SC</option>
      <option value='SE'>SE</option>
      <option value='SP'>SP</option>
      <option value='TO'>TO</option>
   </select>

 

   <!--Suprima a área "Endereço de Cobrança" caso você escolha utilizar o mesmo endereço

      da área "Endereço Residencial"-->

 

 

 

   <!--Suprima a área "Endereço de Entrega" caso você escolha utilizar o mesmo endereço

      da área "Endereço Residencial"-->


   <input type="text" id="EnderecoEntrega" name="EnderecoEntrega" style="left: 200px;
      position: absolute" />

   <input type="text" id="NumeroEntrega" name="NumeroEntrega" style="left: 200px;

      position: absolute" />
   
   <input type="text" id="ComplementoEntrega" name="ComplementoEntrega" style="left: 200px;
      position: absolute" />
    
   <input type="text" id="CEPEntrega" name="CEPEntrega" style="left: 200px;

      position: absolute" />
    
   <input type="text" id="BairroEntrega" name="BairroEntrega" style="left: 200px;

      position: absolute" />
   
   <input type="text" id="CidadeEntrega" name="CidadeEntrega" style="left: 200px;

      position: absolute" />
   
   <select name="UFEntrega" style="left: 200px; position: absolute">
      <option value="" selected="selected">Selecione...</option>
      <option value='AC'>AC
</option>
      <option value='AL'>AL</option>
      <option value='AM'>AM</option>
      <option value='AP'>AP</option>
      <option value='BA'>BA</option>
      <option value='CE'>CE</option>
      <option value='ES'>ES</option>
      <option value='DF'>DF</option>
      <option value='GO'>GO</option>
      <option value='MA'>MA</option>
      <option value='MG'>MG</option>
      <option value='MS'>MS</option>
      <option value='MT'>MT</option>
      <option value='PA'>PA</option>
      <option value='PB'>PB</option>
      <option value='PE'>PE</option>
      <option value='PI'>PI</option>
      <option value='PR'>PR</option>
      <option value='RJ'>RJ</option>
      <option value='RN'>RN</option>
      <option value='RR'>RR</option>
      <option value='RS'>RS</option>
      <option value='RO'>RO</option>
      <option value='SC'>SC</option>
      <option value='SE'>SE</option>
      <option value='SP'>SP</option>
      <option value='TO'>TO</option>

   </select>


  
<!--Suprima a área "Endereço de Entrega" caso você escolha utilizar o mesmo endereço da área "Endereço Residencial"-->

  

   <input id="btnComprar" type="submit" value="Comprar" />
</form>

 
 
2 - Página de Retorno
 

<%@ language="VBScript" %>
<%
   Response.Write(Request.QueryString("ReturnCode") & " - " _

      & HTMLDecode(Request.QueryString("ReturnMsg")))
    
   Function HTMLDecode(sText)
      Dim I
        
      sText = Replace(sText, "&quot;", Chr(34))
      sText = Replace(sText, "&lt;"  , Chr(60))
      sText = Replace(sText, "&gt;"  , Chr(62))
      sText = Replace(sText, "&amp;" , Chr(38))
      sText = Replace(sText, "&nbsp;", Chr(32))
        
      For I = 1 to 255
         sText = Replace(sText, "&#" & I & ";", Chr(I))
      Next
        
      HTMLDecode = sText
    End Function
%>

<html>
   <head>
      <title>Exemplo Integração iVarejo ASP 3.0</title>
   </head>
   <body>
   </body>
</html>

 

ċ
meioPagamentoiVarejoPostForm.asp
(13k)
Usuário desconhecido,
18 de mai de 2011 07:15
ċ
retornoMeioPagamentoiVarejoPostForm.asp
(1k)
Usuário desconhecido,
1 de jul de 2011 06:59