Integrando Wake com PagBank

Utilizar o PagBank como na sua loja Wake é fácil e simples. Essa página apresenta todos os passos para você integrar o PagBank e configurar os meios de pagamento que serão disponibilizados aos seus clientes.

1. Onboarding PagBank

Para realizar o onboarding, complete os seguintes passos:

1. Acesse o portal de integração da Wake com o PagBank.

2. Se você não possui uma conta no PagBank, clique em Não tenho uma conta. Você será conduzido pelo processo de criação da conta PagBank. Se já possui, clique em Tenho conta.

3. Insira seu CPF, CNPJ ou email juntamente com sua senha para fazer login no PagBank e clique em Continuar.

4. Clique em Autorizar para integrar sua conta Wake com o PagBank.

   

5. Copie o TOKEN_WAKE exibido na tela de sucesso. Você irá utilizá-lo nas próximas etapas.

   

📘

Salve o TOKEN_WAKE em um lugar seguro. Você irá utilizá-lo para realizar configurações das formas de pagamento disponibilizadas na sua loja Wake.

2. Configuração das formas de pagamento

Após integrar o PagBank na sua conta Wake, você pode adicionar e configurar formas de pagamento para disponibilizar aos seus clientes. Siga os passos abaixo para configurar Cartão de Crédito, PIX e Boleto como formas de pagamento:

Após integrar o PagBank à sua conta Wake, você pode adicionar e configurar as formas de pagamento para seus clientes. Siga os passos abaixo para configurar Cartão de Crédito, PIX e Boleto:

1. Na plataforma Wake, acesse Pagamentos > Conectores de Pagamentos F-Gateway.

2. Localize o conector PagBank e clique em Instalar Configuração.

3. Preencha os campos para cada método de pagamento utilizando as seguintes instruções:

• Cartão de Crédito
  • TOKEN_WAKE: Disponibilizado no onboarding PagBank no campo AccessToken.
  • Payment_method: credit_card
  • Antifraude: Selecione uma das seguintes opções:
    • ClearSale: Utiliza um sistema antifraude externo.
    • Personalizado: O pedido será atualizado para Autorizado na plataforma Wake quando o PagBank confirmar a autorização. Após a análise manual, o status do pedido deve ser alterado para Pedido Aprovado Análise (status 14) via API Pública ou Admin para que a captura do pagamento seja realizada no PagBank.
    • Nenhum: Utiliza o motor de risco do PagBank, com captura automática, sem a necessidade de aprovação manual do pedido na plataforma Wake.
• Boleto
  • TOKEN_WAKE: Disponibilizado no onboarding PagBank no campo AccessToken.
  • Data de Vencimento: Defina a quantidade de dias corridos (entre 1 e 30) até o vencimento do boleto.
  • Payment_method: Boleto
  • Antifraude: Nenhum.
• PIX
  • TOKEN_WAKE: Disponibilizado no onboarding PagBank no campo AccessToken.
  • Payment_method: Pix
  • Antifraude: Nenhum.
  • Observação: O prazo de expiração do pagamento é fixo em 10 minutos para operações com o PIX.

📘

Payment_method

Você deve informar o Payment_method selecionado exatamente igual ao apesentado acima para evitar erros com a sua integração.

4. Após adicionar as informações de cada método de pagamento, clique em Atualizar para salvar as configurações.

3. Configuração de antifraude

O PagBank oferece duas opções de antifraude quando você utiliza ele na plataforma da Wake. Para acessas as opções de antifraude, accesse Pagamentos > Antifraude.

As seguintes opções estão disponíveis:

• ClearSale
• Antifraude Personalizado

ClearSale

Essa opção possibilita que você faça uma integração direta com a ClearSale. A ClearSale irá realizar a análise de fraude em pedidos pagos com cartão de crédito. Para integrar a ClearSale na sua conta:

1. Insira o código App e a Chave ClearSale na plataforma Wake.
2. Clique em Salvar.

📘

Lembre-se de comutar entre os ambientes de Sandbox e produção a medida que você finaliza o processo de validação e homologação da integração.

Antifraude personalizado

A opção de antifraude personalizado permite que pedidos pagos com cartão de crédito sejam processados em duas etapas:

1. Autorização
2. Captura

Primeiro, o pagamento é autorizado pelo PagBank. Em seguida, após a aprovação manual, o pedido é capturado.

Quando o PagBank confirma a autorização, o status do pedido na plataforma é atualizado para Autorizado. Após a análise manual, o status deve ser alterado para Pedido Aprovado Análise (status 14) via API Pública ou Admin, permitindo a captura com o PagBank.

Você pode definir um valor mínimo para que apenas pedidos acima desse valor passem por essas duas etapas. Pedidos abaixo desse limite são capturados automaticamente.

4. Configuração do gestor de scripts

Para configurar o script que irá gerir o funcionamento dos pagamentos feitos com Pix e Boleto, siga os seguintes passos:

1. Na plataforma Wake, acesse Configurações > Gestor de Scripts.

2. Clique no botão + Adicionar Script , localizado no lado direito da sua tela.

3. Preencha o formulário de configuração do script conforme indicado abaixo:

4. No campo 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(mainPaymentSection)
                }
            }

            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)
            }

            if (controls.useDefaultStyles) {
                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>

5. Para finalizar, clique em Salvar e em seguida em Publicar.

4.1 Customização (opcional) do container para pagamentos por Pix ou Boleto

Uma das responsabilidades do script citado anteriormente é inserir na página de confirmação (checkout) um container contendo instruções e também o QRCode ou o código de barras do boleto.

Esse container possui uma estilização padrão:

O código CSS responsável por criar essa estilização padrão (para ambos, Pix e Boleto) pode ser consultado abaixo:

.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
    }
}

Customização de estilo

Caso seja necessário realizar a customização de estilo desse container siga os passos abaixo:

1. Ainda no Gestor de Script, na linha 16 do script, altere o valor do atributo useDefaultStyles para false.

   

2. Clique em Publicar.

3. No menu lateral, clique em Storefront > Repositório.

4. Verifique qual é a branch desejada e clique em Editar ao lado dela.

5. Na árvore de diretórios, abra o arquivo: Assets > CSS > checkout > checkout.css.

6. Ao final do arquivo adicione o código CSS com as modificações necessárias. Você pode usar como base o código CSS da estilização padrão, citado anteriormente, e apenas modificar o que precisa.

Customização de posicionamento

Por padrão o script insere o container dentro do elemento que contém a classe ".box-info-pagamento" (que é disponibilizada pelo template da Wake). Porém, caso seja necessário posicionar o container em outro lugar na página, siga os passos abaixo:

1. Acesse a aplicação Style Editor disponibilizada pela Wake.

2. Procure pelo template: Carrinho > Confirmação e clique em Desktop na coluna Editar. Você verá então o editor do template.

3. Escolha o lugar onde o container para pagamentos por Pix ou Boleto deverá ser inserido e coloque uma div vazia com o id igual a "pagbank-payment-info-container". Por exemplo, veja a linha 3 do código abaixo:

   1. HTML

      <h2 class="title-confirmacao">Pedido realizado com sucesso!</h2>
      
      <div id="pagbank-payment-info-container"></div>
      
      <div class="row">
        <FBITS:BannerEbit />
      
        <section class="confirmacao-box col-xs-12">
          <FBITS:Pedido />
          </sction>
      
        <section class="confirmacao-box col-xs-12">
          <FBITS:Pagamento />
        </section>
      
      </div>
      

4. Clique em Publicar template.

📘

Customização da página de confirmação

Para mais informações sobre como customizar a página de confirmação (ou Checkout), consulte a documentação da Wake: https://wakecommerce.readme.io/docs/checkout-storefront

5. Configuração de parcelamento

Nessa etapa, você ira configurar as opções de parcelamento que você irá disponibilizar para os seus clientes. Os passos a seguir mostram como configurar uma opção de parcelamento.

1. Clique em Pagamentos > Grupos e Parcelamentos.
2. Clique em Parcelamentos no topo direito da página e depois no botão + Criar Parcelamentos.
3. Para cada configuração de parcelamento que você cria, você deve informar:
   1. Nome do parcelamento: essa informação é utilizada para identificar as diferentes configurações que você cria.
   2. Número de parcelas: número máximo de parcelas aceitas.
   3. Valor mínimo por parcela: o menor valor aceito para uma parcela.
   4. Juros a partir da: informa a partir de qual parcela os juros irão incidir sobre o valor da compra.
   5. Fator multiplicador: valor utilizado para o cálculo do ajuste da compra se o número de parcelas for igual ou maior do que o número definido por Juros a partir da.
4. Clique Salvar.

Após salvar, a configuração do parcelamento será apresentada a você. Você pode excluir ou adicionar parcelas, além de poder configurar juros ou descontos utilizando o botão seletor do Tipo de ajuste e o campo do Fator Multiplicador.

📘

Fator multiplicador

No campo Fator Multiplicador, os descontos ou juros são preenchidos em números decimais, por exemplo:

• Para um desconto de 5%, use Fator Multiplicador = -0,05.
• Para um desconto de 10%, use Fator Multiplicador = -0,10.
• Para juros de 5% sobre o valor da parcela, use Fator Multiplcador = 0,05.
• Para juros de 10% sobre o valor da parcela, use Fator Multiplcador = 0,10.

📘

Maior número de parcelas

Para habilitar parcelamento de 13 a 18 vezes, contate o PagBank para ativar essa opção em sua conta.

Após fazer as alterações desejadas, clique em Visualizar Ajustes Editados para confirmar os juros ou descontos em percentual e então salvar as alterações realizadas.

Você pode configurar mais de uma opção de parcelamento para disponibilizar e utilizar diferentes configurações para cada forma de pagamento. A associação entre a forma de pagamento e as opções de parcelamento, são configuradas através dos Grupos.

6. Configuração de Grupos

O componente Grupos de Pagamento é o responsável por unificar a forma de pagamento e a opção de parcelamento criadas nos passos anteriores. Por esse motivo, cada grupo deve conter uma forma de pagamento (PIX, Cartão de Crédito, ou Boleto) e uma opção de pacelamento.

Aqui você vai definir quais clientes terão acesso a uma dada forma de pagamento e opção de parcelamento. Para criar um Grupo, siga os passos a seguir:

1. Na plataforma Wake, acesse Pagamentos > Grupos e Parcelamentos.
2. Clique em + Criar Grupo.
3. Para cada Grupo que você, você deve informar:
   1. Nome do Grupo: utilizado para identificar o grupo.
   2. Nome de exibição: nome que será exibido na loja.
   3. Valor mínimo (opcional): define o valor mínimo do pedido. Se não preenchido, não existirá um limite para o valor mínimo para uma compra.
   4. Valor máximo (opcional): define o valor máximo do pedido. Se não preenchido, não existirá um limite para o valor máximo para uma compra.
   5. Validar limite de crédito: Ative essa opção se você deseja verificar o limite de crédito do cliente. Para mais detalhes, acesse o artigo Clientes - Limite de Crédito.
4. Além das configurações anteriores, você também precisa definir a Regras de exibição, a qual permite definir se o Grupo que está sendo criado será exibido apenas para uma lista de categorias, para uma categoria exclusiva ou para uma lista de parceiros.
   1. Selecione a regra desejada (Parceiros, Categoria ou Categoria Exclusiva).
   2. Caso não apareçam as regras, você deverá configurá-las na Estrutura de Pagamento.
   3. Por fim, selecione a categoria a qual a regra se aplica.
5. Clique em Salvar para terminar o processo de criação do grupo.

Após criar o Grupo, você deve selecionar a forma de pagamento e a opção de parcelamento. Siga os passos a seguir:

1. No grupo criado, clique em Vincular Formas de Pagamento e selecione a forma de pagamento criada anteriormente (Cartão de Crédito, PIX, ou Boleto).
2. Clique em Vincular Parcelamento e Vincular Configurações para selecionar a regra de parcelamento e forma de pagamento criadas anteriormente.
3. Na sequência, ative as duas chaves para que a forma de pagamento fique visível na tela de pagamento da sua loja.

📘

Pix e Boleto

Grupos que utilizam Boleto ou Pix como forma de pagamento, devem, obrigatóriamente, fornecer apenas pagamento à vista.

A próxima imagem apresenta exemplos para a configuração das formas de pagamento com Cartão de Crédito, PIX, e Boleto.

Isso conclui o processo de integração e configuração do PagBank com a sua conta Wake e a configuração das formas de pagamento a serem oferecidas aos seus clientes.