A configuração da Pagbank é feita no Admin (Administrador da plataforma) em 4 etapas:
- Formas de Pagamento
- Antifraude
- Gestor de script
- 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;
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;
Em casos de recusa pelo antifraude da Clearsale, a Wake disponibiliza uma request para garantir que o pedido seja cancelado na Pagbank. Essa funcionalidade assegura que os pedidos rejeitados sejam cancelados de forma eficaz em ambas as plataformas, evitando complicações futuras e mantendo a integridade das operações financeiras.
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 do sprint:
No conteúdo do Script, insira o código abaixo:
<script>
(() => {
const profile = 'PROD'
const URIsByEnvironment = {
SANDBOX: 'https://sandbox.api.partners.pagbank.com/wake/payment-data',
PROD: 'https://api.partners.pagbank.com/wake/payment-data'
}
/*
Para desativar a adição do estilo padrão do PagBank ao container
para pagamentos de Pix e Boleto, altere o valor do atributo
useDefaultStyles para 'false'.
*/
const controls = {
useDefaultStyles: true
}
const selectors = {
$boxInfoPagamento: '.box-info-pagamento'
}
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.$boxInfoPagamento)
function appendStyles() {
$('head').append('<style>.conclusion-wrapper{background-color:#fff;padding:1em;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}.paymentcode-display{font-size:inherit;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-color:#01508c;color:#fff;transition:.1s}button.paymentcode-button:hover{background-color:#2170ac}.paymentcode-disclaimer{margin:1em 0;font-weight:700}@media (min-width:1024px){.paymentcode-display{padding:1em 2em}}</style>')
}
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 appendMainPaymentSection() {
const mainPaymentSection = `<div class="conclusion-wrapper"></div>`
const optionalTarget = '#pagbank-payment-info-container'
if ($(optionalTarget).length !== 1) {
$($container).append(mainPaymentSection)
} else {
$(optionalTarget).html
Ao finalizar o script para publicar o conteúdo no site, basta clicar em "Salvar" e, em seguida, em "Publicar".
Devido à limitação no número de caracteres permitidos no campo "Number", é necessário que o seguinte script seja inserido na sua loja. Ele terá a função de limitar a quantidade de caracteres permitidos, prevenindo possíveis cancelamentos que possam ocorrer devido a essa restrição.
Para isso, acesse "Adicionar Novo Script":
Na sequência a tela geral será aberta e você deverá preencher os seguintes campos:
Nome:Checkout - Pagbank Address maxlength
• 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 Header- Ú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 do sprint:
<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 o script 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
- As informações de TID, NSU e AUTH são disponibilizadas pela Pagbank dentro do box "ver mais" do pedido. Porém, é importante observar a nomenclatura adotada pelo parceiro para esses dados: TID é identificado como "Código da transação", NSU foi mantido como 'NSU" ,Auth aparece como "Código de autorização" e Endtoend é igual ao EndtoendID (campo retornado no Pix).
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.