PagSeguro Lightbox 03 2013

GUIA DE INTEGRAO DO PAGAMENTO DIRETO 1
VERSO 1.0 FEV 2013

GUIA DE INTEGRAO DO CHECKOUT
LIGHTBOX

wgtwt4
asdasdasd

VERSO 1.0 FEV 2013

Todos os direitos reservados. PagSeguro uma marca registrada do PagSeguro Internet Ltda.
O logotipo do PagSeguro uma marca comercial do PagSeguro Internet Ltda. Outras marcas
comerciais, nomes, logotipos e marcas so de propriedade de seus respectivos proprietrios.

As informaes contidas neste documento pertencem a PagSeguro Internet Ltda. Todos os
direitos reservados. PagSeguro Internet Ltda. - Av. Brig. Faria Lima, 1384 - 6 andar - parte -
So Paulo/SP - CEP 01452-002.

O servio no e nem se destina a ser comparvel aos servios financeiros oferecidos por
instituies financeiras ou administradoras de carto de crdito, consistindo apenas em uma
forma de facilitao e acompanhamento da realizao de transaes de comrcio eletrnicas,
mediante gesto de pagamento. Qualquer transao realizada atravs do PagSeguro est de
acordo com as leis da Repblica Federativa do Brasil.

Voc est aconselhado a ler os termos e condies cuidadosamente.

AVISO DE NO RESPONSABILIDADE
O PagSeguro no oferece garantias de qualquer tipo (seja expressa, implcita ou legal) com
relao s informaes nele contidas. O PagSeguro no assume nenhuma responsabilidade
por perdas e danos (diretos ou indiretos), causados por erros ou omisses, ou resultantes da
utilizao deste documento ou a informao contida no presente documento ou resultantes da
aplicao ou uso do produto ou servio aqui descrito. O PagSeguro se reserva o direito de
fazer quaisquer tipos de alteraes a quaisquer informaes contidas neste documento sem
aviso prvio.


VERSO 1.0 FEV 2013
NDICE
1 Introduo ........................................................................................................... 4
2 Integrao ........................................................................................................... 4
2.1 Informando os dados de pagamento ............................................................... 4
2.1.1 Informando o cdigo da API de pagamentos .......................................... 4
2.1.2 Informando todos parmetros um a um .................................................. 5
2.1.3 Informando um formulrio html ............................................................... 6
2.2 Eventos do Checkout LightBox ........................................................................ 7


VERSO 1.0 FEV 2013
1 INTRODUO

Este documento descreve o processo de integrao com o Checkout Lightbox do
PagSeguro.

O Checkout Lightbox permite que todo o processo de pagamento seja feito em uma janela
que se sobrepe ao site do vendedor. Dessa forma o comprador no redirecionado para
outra janela ou pop-up para realizar o pagamento.

2 INTEGRAO

O Checkout Lightbox usa vrias caractersticas do HTML 5 e por isso o primeiro passo que
a sua pgina seja anotada com o doctype ma primeira linha:

<!DOCTYPE html>

Os browsers mais comuns j suportam esse tipo de anotao, e os que ainda no suportam,
ela ser ignorada.

A integrao com o Checkout Lightbox ocorre atravs de uma API JavaScript, portanto o
passo seguinte importar na pgina de pagamento o seguinte JavaSscript:

<script type="text/javascript"
src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.
js"></script>

Esse JavaScript possui o mtodo PagSeguroLightbox que inicia o processo de pagamento.

Diferente da integrao normal, no existe redirecionamento de URLs na integrao com
Checkout Lightbox, o integrador recebe os eventos a partir de funces callbacks passadas na
abertura do lightbox e descritas na seo 2.2. Porm nada muda nas notificaes de
pagamentos.
2.1 INFORMANDO OS DADOS DE PAGAMENTO

Existem 3 formas de se passar os dados para inicio do checkout para o lightbox. Essas formas
so descritas nas sesses a seguir:

2.1.1 Informando o cdigo da API de pagamentos

Essa integrao permite que o seja usado o cdigo de pagamento gerado pela API de
pagamentos. Esse cdigo pode ser passado em um parmetro string ou em formato json.


VERSO 1.0 FEV 2013
Exemplo:

PagSeguroLightbox(1F69A3CF7878ED9994B3DF9DDC706796);

ou

PagSeguroLightbox({
code: 1F69A3CF7878ED9994B3DF9DDC706796
});

2.1.2 Informando todos parmetros um a um

Caso no seja usado a API de pagamento, a integrao pode ser feita passando todos os
parmetros aceitos pela API diretamente para o lightbox. Os parmetros devem ser passados
no formado chave/valor em um objeto json.

Essa integrao parecida com o pagamento via html, recebendo inclusive os mesmos
parmetros com exceo das urls.

Exemplo:

PagSeguroLightbox({
// Campos obrigatrios
receiverEmail:'suporte@lojamodelo.com.br',
currency: 'BRL',

//Itens do pagamento (ao menos um item obrigatrio)
itemId1: '0001',
itemDescription1: 'Notebook Prata',
itemAmount1: '24300.00',
itemQuantity1: '1',
itemWeight1: '1000',

//Cdigo de referncia do pagamento no seu sistema (opcional)
reference: 'REF1234',

//Informaes de frete (opcionais)
shippingType: '1',
shippingAddressPostalCode: '01452002',
shippingAddressStreet: 'Av. Brig. Faria Lima',
shippingAddressNumber: '1384',
shippingAddressComplement: '5o andar',
shippingAddressDistrict: 'Jardim Paulistano',
shippingAddressCity: 'Sao Paulo',
shippingAddressState: 'SP',
shippingAddressCountry: 'BRA',

//Dados do comprador (opcionais)
senderName: 'Jos Comprador',
senderAreaCode: '11',
senderPhone: '56273440',
senderEmail: 'comprador@uol.com.br'
});


VERSO 1.0 FEV 2013
2.1.3 Informando um formulrio html

Caso j exista uma integrao com formulrio html com o PagSeguro, esse o formulrio pode
ser usado na integrao com o Checkout Lightbox, para isso basta passar o elemento html do
formulrio na chamada ao lightbox.

Exemplo, caso exista um formulrio na pgina html j integrando com o PagSeguro na url
https://pagseguro.uol.com.br/v2/checkout/payment.html, basta alterar o evento onSubmit do
formulrio realizando a chamada ao lightbox.

Exemplo:

Formulrio atual:

<form target="pagseguro" method="post" id="formulario"
action="https://pagseguro.uol.com.br/v2/checkout/payment.html">
<input type="hidden" name="receiverEmail" value="suporte@lojamodelo.com.br">
<input type="hidden" name="currency" value="BRL">
<input type="hidden" name="itemId1" value="0001">
<input type="hidden" name="itemDescription1" value="Notebook Prata">
<input type="hidden" name="itemAmount1" value="24300.00">
<input type="hidden" name="itemQuantity1" value="1">
<input type="hidden" name="itemWeight1" value="1000">
<input type="image" name="submit"
src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/120x53-pagar.gif"
alt="Pague com PagSeguro">
</form>

<form target="pagseguro"
action="https://pagseguro.uol.com.br/checkout/v2/payment.html" method="post">
<input type="hidden" name="code" value="1F69A3CF7878ED9994B3DF9DDC706796" />
<input type="image"
src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/209x48-comprar-
assina.gif" name="submit" alt="Pague com PagSeguro - rpido, grtis e seguro!" />
</form>

Formulrio com LightBox

<form target="pagseguro" method="post" id="formulario"
action="https://pagseguro.uol.com.br/v2/checkout/payment.html"
onsubmit="PagSeguroLightbox(this); return false;">
<input type="hidden" name="receiverEmail" value="suporte@lojamodelo.com.br">
<input type="hidden" name="currency" value="BRL">
<input type="hidden" name="itemId1" value="0001">
<input type="hidden" name="itemDescription1" value="Notebook Prata">
<input type="hidden" name="itemAmount1" value="24300.00">
<input type="hidden" name="itemQuantity1" value="1">
<input type="hidden" name="itemWeight1" value="1000">
<input type="image" name="submit"
src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/120x53-pagar.gif"
alt="Pague com PagSeguro">
</form>

<form target="pagseguro"
action="https://pagseguro.uol.com.br/checkout/v2/payment.html" method="post"
onsubmit="PagSeguroLightbox(this); return false;">
<input type="hidden" name="code" value="1F69A3CF7878ED9994B3DF9DDC706796" />
<input type="image"
src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/209x48-comprar-
assina.gif" name="submit" alt="Pague com PagSeguro - rpido, grtis e seguro!" />

VERSO 1.0 FEV 2013
</form>

Para realizar a chamada usando o formulrio dentro de um mtodo JavaScript, basta passar o
elemento html que representa o formulrio, dessa forma:

PagSeguroLightbox(
document.forms.formulario
);

ou

PagSeguroLightbox(
document.getElementById(formulario)
);

2.2 EVENTOS DO CHECKOUT LIGHTBOX

Diferente do checkout comum, o Checkout Lightbox no requer URLs de retorno. Os
eventos de sucesso e abandono ocorrem em chamadas callback no javascript que so
passadas em qualquer modelo de parmetros descritos na seo 2.1

Basta passar uma funco JavaScript com nome success e abort via json na chamada de
abertura do Lightbox.

Exemplo:

PagSeguroLightbox({
code: '1F69A3CF7878ED9994B3DF9DDC706796'
}, {
success : function(transactionCode) {
alert("success - " + transactionCode);
},
abort : function() {
alert("abort");
}
});

PagSeguroLightbox(
document.forms.formulario
, {
success : function(transactionCode) {
alert("success - " + transactionCode);
},
abort : function() {
alert("abort");
}
});


VERSO 1.0 FEV 2013
A funco success ser chamada sempre que o comprador finalizar o checkout e tem como
parmetro o cdigo da transao. A funco abort chamada sempre que o comprador fechar
o lightbox sem que uma transao seja criada, ou seja, no concluiu o processo de pagamento.

PagSeguro Lightbox 03 2013

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

PagSeguro Lightbox 03 2013

Caricato da

Copyright:

Formati disponibili

GUIA DE INTEGRAO DO PAGAMENTO DIRETO 1

VERSO 1.0 FEV 2013

Potrebbero piacerti anche