Conectores de Pagamento - Como configurar Pagbank

  A configuração da Pagbank é feita no Admin (Administrador da plataforma) em 4 etapas:

1. Formas de Pagamento
2. Antifraude
3. Gestor de script
4. Grupos de Pagamento e Parcelamentos

1ª Etapa - Formas de Pagamento

No painel administrativo da plataforma acesse o menu Pagamentos >> Conectores de Pagamentos F-Gateway.

Em seguida direcionar ao conector em >> Pagbank >> "Adicionar Configuração":

Cadastre um nome para a configuração e selecione o seu tipo: Cartão, PIX ou Boleto:

Descrições dos campos dos métodos de pagamentos disponíveis:

Cartão de crédito:

Nome da Configuração: Identificação interna da configuração. Não será o nome apresentado ao consumidor (cliente final);

TOKEN_WAKE: Disponibilizado no Onboarding Pagbank no campo AcessToken

Payment_method: Credit_card

Antifraude: Antifraude utilizado pelo Lojista: Manual/Próprio ou Clearsale;

3DS: Indica se a transação deve passar pelo processo de autenticação 3DS. Caso o valor informado seja diferente de "sim", a transação com cartão será processada sem a autenticação 3DS.

*O 3DS se aplica apenas a clientes autenticados, ou seja, aqueles que estão logados na loja no momento da compra (usuário e senha). Para clientes não autenticados, a transação seguirá sem a etapa de autenticação 3DS, mesmo que configurada.

BOLETO

Nome da Configuração: Identificação interna da configuração. Não será o nome apresentado ao consumidor (cliente final);

TOKEN_WAKE: Disponibilizado no Onboarding Pagbank no campo AcessToken

Data de Vencimento:Quantidade  de dias corridos (de 1 a 30) para definir quando o boleto deve vencer.

Payment_method: boleto

PIX

Nome da Configuração: Identificação interna da configuração. Não será o nome apresentado ao consumidor (cliente final);

TOKEN_WAKE: Disponibilizado no Onboarding Pagbank no campo AcessToken

Payment_method: pix

Para o meio de pagamento PIX, a expiração é fixa em 10 minutos. 

Ajuste de Layout

A configuração PIX necessita de alguns ajustes de Layout, uma delas é a exibição do botão "Copiar Código", que está no código-fonte da página de "Fechamento" e, por padrão, vem configurado como display:none de forma nativa.

Como são ajustes mais técnicos que necessitam de profissionais especializados, sugerimos que verifique com a sua agência esse e outros ajustes de layout necessários para que a experiência de pagamentos com PIX seja completa.

E-mail Transacional

Disponibilizamos algumas tags para enviar os dados do PIX nos e-mails transacionais, confira qual tag utilizar no artigo 'Como editar os e-mails transacionais'.

Atenção: Informamos que caso a imagem do QR Code seja no formato .svg, o Gmail não exibirá pois esse formato não é suportado pelo Gmail.

Exibição do QR Code para pagamentos no 'Minha Conta'

Por padrão, a exibição do QR Code vem desabilitada. Saiba como ajustar acessando o artigo Detalhes do Minha Conta.

2ª Etapa - Antifraude

O Conector Pagbank permite trabalhar com 2 antifraudes disponíveis hoje na plataforma.Para acessar basta entrar no menu Pagamentos> Antifraude:

Abaixo listamos quais são e como funcionam:

Antifraude Clearsale: Nossa plataforma tem integração direta com a Clearsale e permite que seus pedidos pagos com cartão de crédito passem pela análise de fraude. 

Para configurar, basta inserir o código App e a Chave da Clearsale na plataforma;

Antifraude Personalizado: Funciona como um antifraude manual, permitindo que os pedidos pagos com cartão de crédito sejam processados em 2 passos (Autorização e Captura). No primeiro passo, o pagamento será apenas autorizado junto ao Pag Bank e após a aprovação manual do pedido, será capturado junto ao Pag Bank.

Com este antifraude, o pedido será atualizado para “Autorizado” na plataforma quando a Pagbank retornar com a autorização. Após a análise manual, o pedido deve ser alterado via API Pública ou via Admin para o status 14 “Pedido Aprovado Análise”, para que a captura do pagamento seja realizada no Pagbank.

Você também pode definir um valor mínimo, fazendo com que somente os pedidos acima desse valor passem pelo Two-steps (Autorização e Captura). Ou seja, pedidos abaixo são capturados automaticamente.

3ª Etapa - Gestor de script

Na plataforma Wake, entre em Configurações > Gestor de Script:

Em seguida, clique na opção "Adicionar Script". 

Na sequência a tela geral será aberta e você deverá preencher os seguintes campos:

• Nome: PagBank 

• Data Inicial: (Deixe em branco para que o script seja exibido a partir do cadastro)

• Data Final: (Deixe em branco para que o script seja exibido indefinidamente) 

• Status do Script Ativo: (Deixe a opção marcada) 

• Prioridade: (Deixe 0 para que os scripts obedeçam a ordem de cadastro) 

• Posição do Script na página: (Deixe a opção Footer - Última linha) 

• Páginas que o script será inserido: (Deixe a opção Todas) 

• Identificador de Página: (Coloque um asterisco (*) para que o script seja exibido em  todas as páginas!) 

• Conteúdo dos scripts: 

No conteúdo do Script do primeiro formulário, insira o código abaixo:

<script>
(() => {
const profile = 'PROD'

const selectors = {
$confirmacaoBox: 'h2 + .row > .confirmacao-box'
}

const URIsByEnvironment = {
SANDBOX: 'https://sandbox.api.partners.PagBank.com/wake/payment-data',
PROD: 'https://api.partners.PagBank.com/wake/payment-data'
}

const getPaymentResponse = async (cartId, orderId) => {
try {
const response = await fetch(URIsByEnvironment[profile], {
body: JSON.stringify({
pedido: orderId,
carrinhoId: cartId
}),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
}).then(response => response.json())

if (response.status === 400) {
throw new Error()
}

return response
} catch (error) {
console.error(error)
return
}
}

const getPaymentMethodFromResponse = (response = {}) => {
if (response.barcodeBoleto) {
return 'BOLETO'
}
if (response.qrCodeText) {
return 'PIX'
}
return null
}

const buildConclusionDisplay = (response = {}, paymentMethod) => {
if (!paymentMethod) {
return
}

let shouldGenerateText = true
const $container = $(selectors.$confirmacaoBox)

async function handleCopyButtonClick(event) {
event.preventDefault()
const barCodeText = $('.paymentcode-display').text()
await navigator.clipboard.writeText(barCodeText)
if (shouldGenerateText) {
$('<p class="paymentcode-disclaimer">Código copiado com sucesso!</p>').insertAfter($(event.target))
shouldGenerateText = false
}
}

function appendStyles() {
$('head').append(`
<style>
.paymentcode-display {
font-size: 16px;
padding: 1em;
margin: 0 auto 1em;
text-align: center;
border: 1px solid #ececec;
word-break: break-all;
}
button.paymentcode-button {
border: none;
outline: 0;
cursor: pointer;
font-size: 18px;
padding: 1em;
border-radius: 8px;
width: 100%;
background: #01508c;
color: #fff;
transition: .1s;
}
.conclusion-wrapper {
width: 90%;
margin: 0 auto;
}
.conclusion-qrcode-image {
width: 100%;
max-width: 300px;
height: auto;
margin: 24px auto;
display: block;
}
.paymentcode-container {
padding: 24px 0;
}
button.paymentcode-button:hover {
background: #2170ac;
}
.paymentcode-disclaimer {
margin: 1em 0;
font-weight: 700;
}
@media (min-width: 1024px) {
.paymentcode-display {
padding: 1em 2em;
}
}
</style>
`)
}

function appendMainPaymentSection() {
$(`
<section class="confirmacao-box col-xs-12">
<div class="conclusion-wrapper"></div>
</section>
`).insertAfter($container)
}

function buildBoletoComponent() {
const barCode = response.barcodeBoleto || 'EXAMPLE BARCODE FOR EVALUATION'
$('.conclusion-wrapper').append(`
<p>Estamos aguardando a confirmação do pagamento do boleto. Por favor, copie o código de barras e efetue o pagamento.</p>
<div class="paymentcode-container">
<div class="paymentcode-display">${barCode}</div>
<button class="paymentcode-button">Copiar Código de Barras</button>
</div>
`)
$(document).on('click', '.paymentcode-button', handleCopyButtonClick)
}

function buildPixComponent() {
const { qrCodeExpirationDate, qrCodeText, qrCodeImage } = response
$('.conclusion-wrapper').append(`
<p>Seu pagamento com PIX foi iniciado. Escaneie o QR Code utilizando o app da instituição financeira de sua preferência para finalizar seu pagamento:</p>
<img class="conclusion-qrcode-image" src="${qrCodeImage}" alt="Código QR para pagamento" />
<p>Você também pode realizar seu pagamento através do Pix Copia e Cola, utilizando o código abaixo: </p>
<div class="paymentcode-container">
<div class="paymentcode-display">${qrCodeText}</div>
<button class="paymentcode-button">Copiar Chave Pix</button>
</div>
<p><small><strong>O QR Code gerado expira em ${qrCodeExpirationDate}.</strong><br />
Após este período, será necessário gerar um novo pedido.</small></p>
`)
$(document).on('click', '.paymentcode-button', handleCopyButtonClick)
}

appendStyles()
appendMainPaymentSection()

const loadPaymentComponent = {
'BOLETO': buildBoletoComponent,
'PIX': buildPixComponent
}[paymentMethod]

loadPaymentComponent()
}

const init = async () => {
try {
if (!/\/Confirmacao/.test(window.location.href)) {
return
}

const response = await getPaymentResponse(Fbits.Carrinho.Id, Fbits.Carrinho.PedidoId)
const paymentMethod = getPaymentMethodFromResponse(response)

if (!paymentMethod) {
return
}

buildConclusionDisplay(response, paymentMethod)
} catch (error) {
console.log(error)
}
}

init()
})()
</script>

No segundo script do Segundo formulário prencha os campos e insira o código conforme abaixo: 

Campo	Valor (segundo formulário)
Nome	Checkout - Pagbank Address maxlength
Data Inicial	Deixe em branco. Assim, o script vai ser exibido a partir do cadastro.
Data Final	Deixe em branco. Assim, o script será exibido indefinidamente.
Status do Script Ativo	Utilize a opção que já está marcada.
Prioridade	Defina como 0. Assim os scripts irão seguir a ordem de cadastro.
Posição do Script na página	Selecione a opção Header - Última linha.
Páginas onde o script será inserido	Selecione a opção Todas.
Identificador de Página	Adicione * para que o script seja exibido em todas as páginas.

 

 

 

<script>
(() => {
const targetNode = document.getElementById('div-endereco-body');
if (!targetNode) return;


new MutationObserver(() => {
const campoNumero = document.querySelector('#div-endereco-body input[name="Numero"]');
if (campoNumero) campoNumero.setAttribute('maxlength', '20');
}).observe(targetNode, { childList: true, subtree: true });
})();
</script>

 

Ao finalizar os scripts para publicar o conteúdo no site, basta clicar em "Salvar" e, em seguida,  em "Publicar".

 

4ª Etapa - Grupos de Pagamento e Parcelamento

Após as primeiras configurações, você deverá clicar em Grupos e Parcelamentos >> Parcelamentos e seguir o passo a passo completo no artigo Grupos e Pagamentos.

Recomendações Gerais

• Cancelamento / Estorno de Pagamentos: A opção de Cancelamento do pedido está disponível em nossa API Pública, assim como a opção de Estorno total ou parcial. Essas ações devem ser feitas por uma aplicação externa usando nossa API Pública;
• Realize um pedido teste com um cartão válido para verificar se o pagamento transacionará corretamente na Pagbank;
• Faça um pedido teste com Boleto Pagbank, para verificar se o boleto será gerado corretamente, caso vá utilizar esta forma de pagamento;
• Faça um pedido teste com PIX Pagbank, para verificar se o QR Code será gerado corretamente, caso vá utilizar esta forma de pagamento;
• Ao tentar realizar o pedido, o sistema de segurança da plataforma poderá bloquear as URLs externas da Pagbank. Para orientações sobre o desbloqueio, confira o conteúdo Gerenciar Políticas de Segurança;
• Para utilizar o ambiente de teste da Pagbank, ative a chave “Sandbox” dentro das configurações;
• Acesse o material disponibilizado pela Pagbank em casos de dúvidas
• O Onboarding Pagbank é feito através da URL: https://wake.pagbank.com.br/bemvindo

Caso não possua uma conta no PagBank, clique na opção 'Não tenho uma conta'. Caso já tenha uma conta, clique na opção 'Tenho conta'> Insira seu CPF, CNPJ ou e-mail juntamente com sua senha para fazer login no PagBank e clique  em continuar> Clique em “Autorizar” para conseguir vender com o Pagbank> Será exibido uma tela de sucesso com o seu TOKEN_WAKE.