Blog‎ > ‎

Integração via Pop-up com Http Post/FORM (final)

postado em 29 de jun de 2011 07:59 por Usuário desconhecido
por Filipe Abelha

No post anterior, falamos um pouco mais sobre o método POST (das mensagens de request) e sobre a tag html FORM. Agora falaremos sobre a montagem do FORM e como fazemos para integrar com a iVarejo utilizando o Pop-Up com Post/FORM.


Montagem do Form

Como já definimos o html FORM, vamos partir logo para um exemplo com a sua respectiva explicação:

01 <form action="http://sitecadastro.com.br/programa/cadastropessoa" method="post">
02    <p>
03        <label>
04            Nome:
05        </label> 06     <input type="text" id="nome">
07        <br> 08     <label>
09            Sobrenome:
10        </label> 11     <input type="text" id="sobrenome">
12        <br> 13     <label>
14            Email:
15        </label> 16     <input type="text" id="email">
17        <br> 18     <input type="radio" name="sexo" value="Masculino">Masculino
19        <br> 20     <input type="radio" name="sexo" value="Feminino">Feminino
21        <br> 22     <input type="submit" value="Enviar">
23        <input type="reset"> 24 </p> 25 </form>

Linhas 01 e 25 - tag html FORM, com os atributos action (que especifica o endereço para o qual vai a informação do formulário) e method (o método do request (neste caso o post)).

Linhas 02 e 24 - formatação de parágrafo; não influencia o POST, apenas formata a informação do FORM.

Linhas 03 a 05, 08 a 10 e 13 a 15 - textos que nomearão os campos do formulário; não influencia o POST.

Linhas 06, 11 e 16  - tag html que representa uma caixa de texto (representado pelo atributo type="text") e que possibilita a inserção de dados pelo usuário; participam do POST. O acesso a informação correta de cada campo acontece pelo valor do atributo id de cada campo.

Linhas 07, 12, 17, 19 e 21 - quebra de linha; não influencia o POST, apenas formata a informação do FORM.

Linhas 18 e 20 - tag html que representa uma espécie de menu de opções (representado pelo atributo type="radio") e possibilita que o usuário escolha entre dois ou mais valores, neste caso o sexo da pessoa ("Masculino" ou "Feminino"); participam do POST. O acesso a informação correta da escolha acontece pelo valor do atributo name, que pode ser usado em mais de um campo ao mesmo tempo.

Linha 22 - tag html que representa um botão passível de clique pelo usuário (representado pelo atributo type="submit") que envia o formulário.

Linha 23 - também representa um botão passível de clique, entretanto o atributo type="reset" limpa o conteúdo dos inputs do html FORM.


Integrando com a iVarejo

Agora que você já entendeu como um html FORM é criado e como as coisas funcionam dentro dele, sugiro a leitura da documentação de integração com a iVarejo via Pop-Up com Post/FORM. Você pode estar surpreso com o tamanho do formulário, mas não tenha medo! =)

As duas principais diferenças entre o nosso exemplo acima e o modelo de formulário da documentação são: a quantidade de campos que o usuário deve preencher e o valor do atributo action do FORM que aponta para o nosso ambiente de homologação

http://hml.ivarejo.com.br/ecommerce/enviodadospedido.aspx

Quando o usuário preenche o formulário e clica no botão de envio, as informações do formulário passam a fazer parte do corpo da entidade da mensagem de request e são enviadas. Quando a plataforma iVarejo recebe essa mensagem, realiza o processamento necessário e abre uma pop-up com o processo de pagamento no computador do seu cliente.

Assim que a compra for finalizada ou tenha sido cancelada por algum motivo, a iVarejo retorna o status da transação. Na documentação você pode ver como "receber" a resposta do pagamento utilizando a tecnologia ASP. Em breve, nós atualizaremos a documentação para exemplificar o recebimento da resposta em outras linguagens.


Espero que tenha gostado do assunto. Agora você já sabe com se intergrar à iVarejo utilizando o Pop-Up com POST/Form, mas caso tenha qualquer dúvida, basta entrar em contato conosco através dos canais disponibilizados!

No próximo post começaremos a falar sobre o XML para podermos falar depois sobre a integração com a iVarejo via POST/XML.




tags: #http, #protocolo, #request, #integracao,  #html, #w3c

Fontes:

http://www.w3.org/TR/html4/interact/forms.html
Comments