A configuração da Pagbank é feita no Admin (Administrador da plataforma) em 3 etapas:
- Formas de Pagamento
- Antifraude
- Grupos de Pagamento e Parcelamentos
- Gestor de Script (apenas para lojistas que utilizam o checkout 1.0)
1ª Etapa - Formas de Pagamento
No painel administrativo da plataforma acesse o menu Pagamentos >> Conectores de Pagamentos >> Selecione o conector Pagbank >> "Instalar Configuração"
Descrições dos campos dos métodos de pagamentos disponíveis:
Cartão de crédito:
- Payment_method: Credit_card
- TOKEN_WAKE: Disponibilizado no Onboarding Pagbank no campo AcessToken
- 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.
- Antifraude: Antifraude utilizado pelo Lojista: Manual/Próprio ou Clearsale;
- Permitir Múltiplas Transações por Split? Esta feature flag deve ser habilitada para lojas que operam com múltiplos Centros de Distribuição (CDs) e utilizam o rateio de pagamento (split) entre eles. A ativação depende da compatibilidade técnica do conector utilizado. Nota: Atualmente, o conector Pagbank não suporta esta funcionalidade.
Tipo Pagamento: Deverá ser preenchido com a forma de pagamento configurada, neste caso cartão:
*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
- Payment_method: boleto
- TOKEN_WAKE: Disponibilizado no Onboarding Pagbank no campo AcessToken
- expiration_date:Quantidade de dias corridos (de 1 a 30) para definir quando o boleto deve vencer.
- Permitir Múltiplas Transações por Split?Esta feature flag deve ser habilitada para lojas que operam com múltiplos Centros de Distribuição (CDs) e utilizam o rateio de pagamento (split) entre eles. A ativação depende da compatibilidade técnica do conector utilizado. Nota: Atualmente, o conector Pagbank não suporta esta funcionalidade.
Tipo Pagamento: Deverá ser preenchido com a forma de pagamento configurada, neste caso boleto:
PIX
- 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.
- Permitir Múltiplas Transações por Split?Esta feature flag deve ser habilitada para lojas que operam com múltiplos Centros de Distribuição (CDs) e utilizam o rateio de pagamento (split) entre eles. A ativação depende da compatibilidade técnica do conector utilizado. Nota: Atualmente, o conector Pagbank não suporta esta funcionalidade.
Tipo Pagamento: Deverá ser preenchido com a forma de pagamento configurada, neste caso pix:
2ª Etapa - Antifraude
O conector Pagbank permite trabalhar com 2 antifraudes disponíveis hoje na plataforma, os quais serão listados abaixo.
Para acessar basta entrar no menu Pagamentos> Antifraude:
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 - Gerenciamento de Pagamentos
Após as primeiras configurações, você deverá clicar em Gerenciamento de Pagamentos>> e encontrar o tipo de pagamento Pagbank que deseja configurar (Cartão, pix, boleto…) e seguir o passo a passo completo no artigo Grupos e Pagamentos.
Especificidades para quem utiliza Storefront 1.0:
Ajuste de Layout
A configuração PIX necessita de alguns ajustes de Layout apenas para quem utiliza o Storefront 1.0. 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
Se você utilizar o Storefront 1.0, nós 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 no Storefront 1.0 vem desabilitada. Saiba como ajustar acessando o artigo Detalhes do Minha Conta.
4ª Etapa - Gestor de script (apenas storefront 1.0)
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 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)
}
// builds page component
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>
Ao finalizar o script para publicar o conteúdo no site, basta clicar em "Salvar" e, em seguida, em "Publicar".
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.
Comentários
0 comentário
Por favor, entre para comentar.