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

Agora que você já integrou o PagBank a 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:

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

2. Encontre o conector PagBank e clique em Nova Configuração.
3. Insira o nome da configuração e secione a forma de pagamento. Inicialmente, vamos configurar a opção de Cartão de Crédito, portanto:
   • Para Nome da configuração use Cartão de Crédito.
   • Para Forma de Pagamento selecione Cartão
4. Clique em Adicionar Configuração.
5. Na sequência, para autorizar a configuração da forma de pagamento, insira o TOKEN_WAKE, obtido na etapa de onboarding , no campo AcessToken.
6. Na opção Antifraude, escolha a opção viável para sua loja. Se optar pelo Motor de Risco do PagBank, escolha Manual/Próprio. Se escolher Manual/Próprio, você também habilitará a funcionalidade de Pré-Captura de suas transações com cartão de Crédito.
7. Para finalizar, clique em Atualizar.

Para a configuração das formas de pagamento com Boleto e Pix, repita os passos anteriores. A tabela a seguir sumariza as configurações que você irá utilizar quando configurando Boleto e PIX:

3. Configuração do gestor de scripts

Para configurar o script que irá gerir o funcionamento dos pagamentos, 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. O formulário de configuração do script será apresentado. Preencha os campos conforme a tabela abaixo:

4. Insira o seguinte código no campo de Conteúdo do Script:

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

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

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

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