Este modelo permite que todo o processo de pagamento seja feito em uma janela que se sobrepõe ao site do vendedor. Para isso é necessário incluir a biblioteca javascript conforme código abaixo:
Eventos do Lightbox
O Lightbox possui alguns eventos, como o de sucesso, abandono e, quando o lightbox não consegue abrir. Veja abaixo como funciona:
<!DOCTYPE html>
<script type="text/javascript" src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js"></script>
<script type="text/javascript">
//Insira o código de checkout gerado no Passo 1
var code = 'INSIRA_SEU_CÓDIGO';
var callback = {
success : function(transactionCode) {
//Insira os comandos para quando o usuário finalizar o pagamento.
//O código da transação estará na variável "transactionCode"
console.log("Compra feita com sucesso, código de transação: " + transactionCode);
},
abort : function() {
//Insira os comandos para quando o usuário abandonar a tela de pagamento.
console.log("abortado");
}
};
//Chamada do lightbox passando o código de checkout e os comandos para o callback
var isOpenLightbox = PagSeguroLightbox(code, callback);
// Redireciona o comprador, caso o navegador não tenha suporte ao Lightbox
if (!isOpenLightbox){
location.href="https://pagseguro.uol.com.br/v2/checkout/payment.html?code=" + code;
console.log("Redirecionamento")
}
</script>
</body>
</html>
Configurações Opcionais
Essas configurações devem ocorrer nos parâmetros feitos no passo 1.
Você poderá configurar sua chamada, adicionando os parâmetros necessários para a situação que desejar. Conheça cada uma delas abaixo:
Com esta configuração você poderá excluir dinamicamente os grupos e os meios de pagamento.
Os grupos de pagamento são divididos entre BALANCE
(Saldo PagSeguro), BOLETO
(Boleto), CREDIT_CARD
(Cartão de Crédito), DEPOSIT
(Depósito) e EFT
(Débito Online)
Já os meios de pagamentos são divididos entre Bandeiras e os Bancos disponíveis, sendo eles:
Débito Online: DEBITO_BRADESCO
, DEBITO_ITAU
, DEBITO_UNIBANCO
, DEBITO_BANCO_BRASIL
, DEBITO_BANRISUL
e DEBITO_HSBC
Boleto: BOLETO
Bandeiras: VISA
, MASTERCARD
, AMEX
, DINERS
, HIPERCARD
, AURA
, ELO
, PLENOCARD
, PERSONALCARD
, JCB
, DISCOVER
, BRASILCARD
, FORTBRASIL
, CARDBAN
, VALECARD
, CABAL
, MAIS
, AVISTA
, GRANDCARD
e SOROCRED
.
currency=BRL
&itemId1=0001
&itemDescription1=Notebook Prata
&itemAmount1=24300.00
&itemQuantity1=1
&itemWeight1=1000
&reference=REF1234
&senderName=Jose Comprador
&[email protected]
&shippingType=1
&shippingAddressStreet=Av. Brig. Faria Lima
&shippingAddressNumber=1384
&shippingAddressComplement=5o andar
&shippingAddressDistrict=Jardim Paulistano
&shippingAddressPostalCode=01452002
&shippingAddressCity=Sao Paulo
&shippingAddressState=SP
&shippingAddressCountry=BRA
&excludePaymentMethodGroup=CREDIT_CARD,BOLETO
&excludePaymentMethodName=DEBITO_ITAU,DEBITO_BRADESCO
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<checkout>
<currency>BRL</currency>
<items>
<item>
<id>0001</id>
<description>Notebook Prata</description>
<amount>24300.00</amount>
<quantity>1</quantity>
<weight>1000</weight>
</item>
</items>
<reference>REF1234</reference>
<sender>
<name>José Comprador</name>
<email>[email protected]</email>
</sender>
<shipping>
<type>1</type>
<address>
<street>Av. Brig. Faria Lima</street>
<number>1384</number>
<complement>5o andar</complement>
<district>Jardim Paulistano</district>
<postalCode>01452002</postalCode>
<city>Sao Paulo</city>
<state>SP</state>
<country>BRA</country>
</address>
</shipping>
<acceptedPaymentMethods>
<exclude>
<paymentMethod>
<group>CREDIT_CARD</group>
</paymentMethod>
<paymentMethod>
<group>BOLETO</group>
</paymentMethod>
<paymentMethod>
<name>DEBITO_ITAU</name>
</paymentMethod>
</exclude>
</acceptedPaymentMethods>
</checkout>
Para oferecer um parcelamento sem juros, você deverá utilizar três parâmetros: Grupo, Chave e Valor paymentMethodGroup1
, paymentMethodConfigKey1_1
epaymentMethodConfigValue1_1
.
No parâmetro grupo você deve informar o meio pagamento CREDIT_CARD
(Cartão de Crédito).
Para o campo chave, utilize o parâmetro MAX_INSTALLMENTS_NO_INTEREST
que configura o parcelamento sem juros. Já no campo valor, você deve informar o número de parcelas que você deseja assumir.
currency=BRL
&itemId1=0001
&itemDescription1=Notebook Prata
&itemAmount1=24300.00
&itemQuantity1=1
&itemWeight1=1000
&reference=REF1234
&senderName=Jose Comprador
&senderAreaCode=11
&senderPhone=56273440
&[email protected]
&shippingType=1
&shippingAddressRequired=true
&shippingAddressStreet=Av. Brig. Faria Lima
&shippingAddressNumber=1384
&shippingAddressComplement=5o andar
&shippingAddressDistrict=Jardim Paulistano
&shippingAddressPostalCode=01452002
&shippingAddressCity=Sao Paulo
&shippingAddressState=SP
&shippingAddressCountry=BRA
&paymentMethodGroup1=CREDIT_CARD
&paymentMethodConfigKey1_1=MAX_INSTALLMENTS_NO_INTEREST
&paymentMethodConfigValue1_1=6
<?xml version="1.0"?>
<checkout>
<currency>BRL</currency>
<items>
<item>
<id>0001</id>
<description>Notebook Prata</description>
<amount>24300.00</amount>
<quantity>1</quantity>
<weight>1000</weight>
</item>
</items>
<reference>REF1234</reference>
<sender>
<name>José Comprador</name>
<email>[email protected]</email>
<phone>
<areaCode>11</areaCode>
<number>56273440</number>
</phone>
</sender>
<shippingAddressRequired>true</shippingAddressRequired>
<shipping>
<type>1</type>
<address>
<street>Av. Brig. Faria Lima</street>
<number>1384</number>
<complement>5o andar</complement>
<district>Jardim Paulistano</district>
<postalCode>01452002</postalCode>
<city>Sao Paulo</city>
<state>SP</state>
<country>BRA</country>
</address>
</shipping>
<paymentMethodConfigs>
<paymentMethodConfig>
<paymentMethod>
<group>CREDIT_CARD</group>
</paymentMethod>
<configs>
<config>
<key>MAX_INSTALLMENTS_NO_INTEREST</key>
<value>6</value>
</config>
</configs>
</paymentMethodConfig>
</paymentMethodConfigs>
</checkout>
Se você deseja oferecer o desconto por meio de pagamento, também deverá utilizar os três parâmetros: Grupo, Chave e Valor paymentMethodGroup1
, paymentMethodConfigKey1_1
epaymentMethodConfigValue1_1
.
No campo grupo você deve informar o meio pagamento: CREDIT_CARD
(Cartão de Crédito), DEPOSIT
(Depósito) e/ou EFT
(Débito Online). Em chave, informe o DISCOUNT_PERCENT
, já o campo valor a porcentagem de desconto que deseja oferecer. No exemplo abaixo, você poderá oferecer um desconto de 10% para o meio de pagamento boleto e 5% para o meio de pagamento via cartão de crédito:
currency=BRL
&itemId1=0001
&itemDescription1=Notebook Prata
&itemAmount1=24300.00
&itemQuantity1=1
&itemWeight1=1000
&reference=REF1234
&senderName=Jose Comprador
&senderAreaCode=11
&senderPhone=56273440
&[email protected]
&shippingType=1
&shippingAddressStreet=Av. Brig. Faria Lima
&shippingAddressNumber=1384
&shippingAddressComplement=5o andar
&shippingAddressDistrict=Jardim Paulistano
&shippingAddressPostalCode=01452002
&shippingAddressCity=Sao Paulo
&shippingAddressState=SP
&shippingAddressCountry=BRA
&paymentMethodGroup1=BOLETO
&paymentMethodConfigKey1_1=DISCOUNT_PERCENT
&paymentMethodConfigValue1_1=10.00
&paymentMethodGroup2=CREDIT_CARD
&paymentMethodConfigKey2_1=DISCOUNT_PERCENT
&paymentMethodConfigValue2_1=5.00
<?xml version="1.0"?>
<checkout>
<currency>BRL</currency>
<items>
<item>
<id>0001</id>
<description>Notebook Prata</description>
<amount>24300.00</amount>
<quantity>1</quantity>
<weight>1000</weight>
</item>
</items>
<reference>REF1234</reference>
<sender>
<name>José Comprador</name>
<email>[email protected]</email>
<phone>
<areaCode>11</areaCode>
<number>56273440</number>
</phone>
</sender>
<shipping>
<type>1</type>
<address>
<street>Av. Brig. Faria Lima</street>
<number>1384</number>
<complement>5o andar</complement>
<district>Jardim Paulistano</district>
<postalCode>01452002</postalCode>
<city>Sao Paulo</city>
<state>SP</state>
<country>BRA</country>
</address>
</shipping>
<paymentMethodConfigs>
<paymentMethodConfig>
<paymentMethod>
<group>CREDIT_CARD</group>
</paymentMethod>
<configs>
<config>
<key>DISCOUNT_PERCENT</key>
<value>22.50</value>
</config>
</configs>
</paymentMethodConfig>
<paymentMethodConfig>
<paymentMethod>
<group>BOLETO</group>
</paymentMethod>
<configs>
<config>
<key>DISCOUNT_PERCENT</key>
<value>2.25</value>
</config>
</configs>
</paymentMethodConfig>
</paymentMethodConfigs>
</checkout>