• O PIX offline no Magento 1 é configurado usando o módulo nativo de Transferência Bancária, sem necessidade de gateway externo
• Após configurar o método de pagamento, você gera um QR Code personalizado e exibe os dados na página de confirmação do pedido
• A configuração envolve quatro etapas: ativar o método de pagamento, criar o bloco CMS com o QR Code, ativar o GTM e configurar o widget na página de sucesso
• Compatível com Magento 1 na plataforma MageShop

#Passo a Passo por Escrito

#1. Configure o módulo de Transferência Bancária como PIX

No painel administrativo, acesse Sistema → Configuração → Vendas → Formas de Pagamento → Pagamento por Transferência Bancária e preencha os campos:

• Habilitado: selecione Sim
• Título: preencha com Pagamento via Pix
• Novo Status do Pedido: selecione o status que deve aparecer no pedido ao ser criado (ex: Novo pedido)
• Pagamento para Países Selecionados: selecione Países Específicos
• Pagamento para Países Específicos: selecione Brasil (e outros países caso necessário)
• Instruções: preencha com a mensagem que o cliente verá ao finalizar o pedido. Exemplo: Ao finalizar o pedido, os dados para pagamento via PIX serão exibidos na tela de confirmação. Após realizar o pagamento, envie o comprovante pelo WhatsApp ou e-mail indicados.
• Valor Mínimo do Pedido: informe o valor mínimo para exibir este meio de pagamento (deixe em branco para exibir sempre)
• Valor Máximo do Pedido: informe o valor máximo para exibir este meio de pagamento (deixe em branco para exibir sempre)
• Ordem: define a posição deste método na lista de formas de pagamento

Clique em Salvar configuração.

#2. Gere o QR Code personalizado

Acesse conexpro.com.br/qr-code e preencha os campos:

1 · Conteúdo

• Tipo de QR Code: selecione PIX (recebimento)
• Chave PIX: informe sua chave PIX (CPF, e-mail, telefone no formato +5561999999999 ou chave aleatória)
• Nome do recebedor: informe o nome da pessoa ou empresa (obrigatório)
• Cidade: informe a cidade do recebedor (obrigatório)
• Valor (opcional): deixe em branco — o valor será exibido dinamicamente na página de sucesso
• Identificador (opcional): deixe em branco ou use um identificador padrão

2 · Aparência do Card

Personalize as cores do QR Code, fundo e textos conforme a identidade visual da sua loja.

3 · Textos e Logo

• Texto acima do QR Code (opcional): ex: Pague com PIX — deixe em branco se preferir
• Texto abaixo do QR Code (opcional): ex: Aponte a câmera — deixe em branco se preferir
• Logo (opcional): faça upload da sua logo para personalizar o QR Code
• Posição da logo: escolha onde a logo aparecerá no QR Code

Clique em Gerar meu QR Code. Se gostar do resultado, clique em Baixar card em PNG.

Copie também o código copia e cola gerado — você vai precisar dele na próxima etapa.

#3. Crie o bloco CMS com os dados do PIX

No painel administrativo, acesse CMS → Bloco e clique em Adicionar novo bloco. Preencha:

• Título: Página de sucesso Pix offline
• Identificador: page_sucess_pix_offline
• Status: Habilitado

Faça o upload do QR Code:

1. No editor, clique em Inserir imagem
2. Clique em Armazenamento → Procurar arquivos
3. Selecione a imagem do QR Code baixada no passo anterior
4. Clique em Enviar arquivos e feche a tela após o upload

Cole o código abaixo no editor (clique em Mostrar/Ocultar Editor para acessar o modo HTML):

<!-- PIX - página de sucesso (widget Magento 1) -->

<script>
var PIX_CONFIG = {
    pagamentoTitulo : 'pagamento via pix',

    chaveExibicao : 'suachave@email.com.br',
    chaveCopia    : 'suachave@email.com.br',
    chaveTitulo   : 'Chave PIX (E-mail)',

    banco         : 'Nome do Banco',
    favorecido    : 'Nome do Favorecido',

    whatsappNumero: '5511999999999',
    whatsappTexto : 'WhatsApp (11) 99999-9999',

    email         : 'contato@suaempresa.com.br',
    emailTexto    : '',
    emailAssunto  : 'Comprovante PIX',

    qrcode        : '{{media url="wysiwyg/nome-do-arquivo-qrcode.png"}}',
    qrcodeAlt     : 'QR Code para pagamento via PIX',

    copiaCola     : 'COLE_AQUI_O_CODIGO_COPIA_E_COLA_GERADO_NO_PASSO_2',

    avisoTopo     : '<strong>Importante:</strong> após efetuar o pagamento, envie o comprovante para:',
    avisoRodape   : 'Após efetuar o pagamento, favor enviar o comprovante para:',
    valorLabel    : 'Valor a pagar'
};
</script>

<style>
.pedidoSuccesso { padding-bottom: 20px; }
.pix-box { max-width: 460px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 3px 14px rgba(0,0,0,.10); text-align: center; }
.pix-valor { display: none; text-align: center; background: #f4fbf6; border: 1px solid #cde9d6; border-radius: 6px; padding: 12px; margin-bottom: 10px; }
.pix-valor-label { display: block; font-size: 12px; color: #6b8a76; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.pix-valor-num { display: block; font-size: 26px; font-weight: 700; color: #e30f1d; line-height: 1.2; }
.pix-valor-pedido { display: block; font-size: 12px; color: #888; margin-top: 4px; }
.pix-chave { background: linear-gradient(90deg,#1f8f4d,#33b864); color: #fff; border-radius: 6px; padding: 14px 12px; }
.pix-chave span { display: block; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; opacity: .9; margin-bottom: 0; }
.pix-chave strong { font-size: 22px; font-weight: 700; letter-spacing: 1px; word-break: break-all; }
.btn-copiar { display: block; width: 100%; border: 0; cursor: pointer; padding: 12px; border-radius: 6px; font-family: inherit; font-size: 15px; font-weight: 600; background: #1f8f4d; color: #fff; margin-bottom: 0; transition: background .2s; }
.btn-copiar:hover { background: #17703c; }
.btn-copiar.copiado { background: #0f5f31; }
.pix-dados { font-size: 15px; }
.pix-dados b { color: #1f8f4d; }
.pix-qr { margin-bottom: 0; }
.pix-qr img { width: 100%; max-width: 100%; height: auto; border: 6px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1px #e0e0e0; }
.pix-copiacola { border-top: 1px solid #e5e5e5; padding-top: 18px; }
.pix-copiacola label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #666; margin-bottom: 6px; }
.pix-copiacola textarea { width: 100%; height: 72px; resize: none; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-family: monospace; font-size: 12px; line-height: 1.5; color: #444; background: #fafafa; box-sizing: border-box; }
.pix-aviso { border-top: 1px solid #e5e5e5; padding-top: 18px; font-size: 15px; line-height: 1.6; }
.pix-aviso--topo { border-top: 0; padding-top: 0; padding-bottom: 6px; }
.pix-aviso p { margin: 0 0 12px; }
.pix-contatos a { display: block; margin: 8px 0; padding: 11px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 16px; word-break: break-word; }
.zap { background: #25d366; color: #fff; }
.mail { background: #eef1ee; color: #1f8f4d; }
@media (max-width: 480px) { .pix-chave strong { font-size: 18px; } .pix-contatos a { font-size: 15px; } }
</style>

<div id="pixBox"></div>

<script>
(function () {
    'use strict';
    var cfg = window.PIX_CONFIG;
    var box = document.getElementById('pixBox');
    if (!cfg || !box) return;
    function esc(s) { return String(s == null ? '' : s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
    function preenchido(v) { return typeof v === 'string' && v.trim() !== ''; }
    function normalizar(s) { s = String(s == null ? '' : s).trim().toLowerCase(); if (s.normalize) { s = s.normalize('NFD').replace(/[̀-ͯ]/g, ''); } return s; }
    function buscarPedido() {
        var dl = window.dataLayer || []; var p = { valor: null, pedido: null, moeda: null, pagamento: null };
        for (var i = dl.length - 1; i >= 0; i--) {
            var ev = dl[i]; if (!ev || typeof ev !== 'object') continue;
            if (p.pagamento === null && ev.transactionPayment != null) p.pagamento = ev.transactionPayment;
            if (p.valor === null && ev.transactionTotal != null) p.valor = Number(ev.transactionTotal);
            if (p.pedido === null && ev.transactionId != null) p.pedido = ev.transactionId;
            if (p.moeda === null && ev.transactionCurrency) p.moeda = ev.transactionCurrency;
            var ec = ev.ecommerce;
            if (ec) {
                if (p.moeda === null && ec.currencyCode) p.moeda = ec.currencyCode;
                if (p.valor === null && ec.value != null) p.valor = Number(ec.value);
                if (p.pedido === null && ec.transaction_id != null) p.pedido = ec.transaction_id;
                var af = ec.purchase && ec.purchase.actionField;
                if (af) { if (p.valor === null && af.revenue != null) p.valor = Number(af.revenue); if (p.pedido === null && af.id != null) p.pedido = af.id; }
            }
        }
        return p.pagamento === null ? null : p;
    }
    function pagamentoConfere(nome) {
        var lista = cfg.pagamentoTitulo; if (!lista) return false; if (!Array.isArray(lista)) lista = [lista];
        var alvo = normalizar(nome);
        for (var i = 0; i < lista.length; i++) { if (alvo && alvo === normalizar(lista[i])) return true; } return false;
    }
    function blocoContatos() {
        var html = '';
        if (preenchido(cfg.whatsappNumero)) { html += '<a class="zap" href="https://wa.me/' + esc(cfg.whatsappNumero.replace(/\D/g,'')) + '" target="_blank" rel="noopener">' + esc(preenchido(cfg.whatsappTexto) ? cfg.whatsappTexto : cfg.whatsappNumero) + '</a>'; }
        if (preenchido(cfg.email)) { var href = 'mailto:' + esc(cfg.email.trim()); if (preenchido(cfg.emailAssunto)) href += '?subject=' + encodeURIComponent(cfg.emailAssunto); html += '<a class="mail" href="' + href + '">' + esc(preenchido(cfg.emailTexto) ? cfg.emailTexto : cfg.email) + '</a>'; }
        return html;
    }
    function blocoAviso(texto, modificador) {
        var contatos = blocoContatos(); if (!contatos) return '';
        return '<div class="pix-aviso' + (modificador || '') + '">' + (preenchido(texto) ? '<p>' + texto + '</p>' : '') + '<div class="pix-contatos">' + contatos + '</div></div>';
    }
    function montar(pedido) {
        box.className = 'pix-box';
        box.innerHTML = [
            '<div class="pix-valor" id="pixValor"><span class="pix-valor-label">' + esc(cfg.valorLabel) + '</span><span class="pix-valor-num" id="pixValorNum"></span><span class="pix-valor-pedido" id="pixValorPedido"></span></div>',
            blocoAviso(cfg.avisoTopo, ' pix-aviso--topo'),
            '<div class="pix-chave"><span>' + esc(cfg.chaveTitulo) + '</span><strong id="pixChave">' + esc(cfg.chaveExibicao) + '</strong><button type="button" class="btn-copiar" data-alvo="pixChave" data-valor="' + esc(cfg.chaveCopia) + '">Copiar chave</button></div>',
            '<div class="pix-dados">Banco <b>' + esc(cfg.banco) + '</b><br>Em nome de: <b>' + esc(cfg.favorecido) + '</b></div>',
            preenchido(cfg.qrcode) ? '<div class="pix-qr"><img src="' + esc(cfg.qrcode) + '" alt="' + esc(cfg.qrcodeAlt) + '"></div>' : '',
            '<div class="pix-copiacola"><label for="pixCodigo">Ou use o PIX copia e cola</label><textarea id="pixCodigo" readonly rows="3">' + esc(cfg.copiaCola) + '</textarea><button type="button" class="btn-copiar" data-alvo="pixCodigo">Copiar código copia e cola</button></div>',
            blocoAviso(cfg.avisoRodape)
        ].join('');
        var valor = Number(pedido.valor);
        if (pedido.valor !== null && !isNaN(valor)) {
            document.getElementById('pixValorNum').textContent = valor.toLocaleString('pt-BR', { style: 'currency', currency: pedido.moeda || 'BRL' });
            if (pedido.pedido) { document.getElementById('pixValorPedido').textContent = 'Pedido #' + pedido.pedido; }
            document.getElementById('pixValor').style.display = 'block';
        }
    }
    document.addEventListener('click', function (e) {
        var btn = e.target && e.target.closest ? e.target.closest('.btn-copiar') : null; if (!btn) return;
        var alvo = document.getElementById(btn.getAttribute('data-alvo'));
        var texto = btn.getAttribute('data-valor') || (alvo ? (alvo.value || alvo.textContent).trim() : ''); if (!texto) return;
        var original = btn.textContent;
        function ok() { btn.textContent = 'Copiado!'; btn.classList.add('copiado'); setTimeout(function () { btn.textContent = original; btn.classList.remove('copiado'); }, 2000); }
        function fallback(t, cb) { var tmp = document.createElement('textarea'); tmp.value = t; tmp.style.cssText = 'position:fixed;opacity:0'; document.body.appendChild(tmp); tmp.select(); try { document.execCommand('copy'); } catch(e) {} document.body.removeChild(tmp); cb(); }
        if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(texto).then(ok)['catch'](function () { fallback(texto, ok); }); } else { fallback(texto, ok); }
    });
    var ESPERA_MAXIMA_MS = 15000;
    function tentar() { var pedido = buscarPedido(); if (!pedido) return false; if (pagamentoConfere(pedido.pagamento)) { montar(pedido); } return true; }
    if (!tentar()) { var limite = Math.ceil(ESPERA_MAXIMA_MS / 100); var tentativas = 0; var timer = setInterval(function () { if (tentar() || ++tentativas > limite) clearInterval(timer); }, 100); }
})();
</script>

Edite os dados da sua loja no bloco PIX_CONFIG:

Após preencher os dados, clique em Salvar bloco.

#4. Ative o módulo Google Tag Manager

O script da página de sucesso depende do Google Tag Manager para identificar o pedido e exibir os dados do PIX. Verifique se o módulo está ativo antes de testar.

No painel administrativo, acesse Sistema → Configuração → Serviços → Google Tag Manager → Configurações e preencha:

• Enabled (Yireo GTM): selecione Sim
• ID Público do Container: informe o ID do seu contêiner GTM (ex: GTM-XXXXXXX). Se ainda não possui GTM, preencha com GTM-XXXXXXX provisoriamente para ativar o módulo

Clique em Salvar configuração.

#5. Configure o widget na página de sucesso

No painel administrativo, acesse CMS → Widgets e clique em Criar novo widget. Preencha:

• Tipo: selecione Bloco CMS estático
• Pacote de Template: selecione mageshop / default

Clique em Avançar e preencha:

• Título do Widget: Página de sucesso Pix offline

Em Atualizações de Layout, clique em Adicionar atualização de layout e preencha:

• Exibir em: selecione Página específica
• Página: selecione Finalizar Pedido com Sucesso
• Bloco de referência: selecione Área de conteúdo

Em Opções de Widget, no campo Bloco, clique em Selecionar bloco, pesquise por pix e selecione Página de sucesso Pix offline.

Clique em Salvar.

#6. Limpe o cache e teste

Acesse Sistema → Gerenciamento de Cache e clique em Liberar Cache de Armazenamento do Magento.

Em seguida, realize um pedido de teste na loja selecionando Pagamento via Pix como forma de pagamento. Ao chegar na página de confirmação do pedido, verifique se o bloco com o QR Code e os dados do PIX é exibido corretamente.

#Validação e Testes

Após concluir a configuração, execute os testes abaixo para confirmar o funcionamento correto.

Teste 1 — Exibição do método de pagamento no checkout

Ação: Acesse a loja, adicione um produto ao carrinho e avance até a etapa de pagamento no checkout.

Teste 2 — Exibição do bloco PIX na página de sucesso

Ação: Finalize o pedido selecionando Pagamento via Pix. Verifique a página de confirmação.

Teste 3 — Botões de copiar

Ação: Clique em Copiar chave e em Copiar código copia e cola. Cole em um campo de texto para verificar o conteúdo copiado.

Se não funcionar, verifique:

• Se o cache foi limpo após salvar o bloco e o widget
• Se o identificador do bloco está exatamente como page_sucess_pix_offline
• Se o nome do arquivo do QR Code no campo qrcode do código corresponde exatamente ao nome do arquivo enviado, incluindo a extensão (.png ou .jpg). Para confirmar o nome, clique em Inserir imagem no editor do bloco e localize o arquivo no armazenamento
• Se o código copia e cola foi colado corretamente no campo copiaCola, sem quebras de linha extras
• Se o campo pagamentoTitulo no código está idêntico ao Título configurado no módulo no passo 1 (ex: pagamento via pix)
• Se o módulo Google Tag Manager está habilitado (passo 4)

#Observações Importantes

• O bloco só aparece para pedidos pagos com PIX: o código verifica automaticamente o meio de pagamento. Se o cliente escolheu outro método, o bloco não é exibido.
• O valor do pedido é exibido automaticamente: o código lê o total do pedido via dataLayer e o exibe na página de sucesso — não é necessário configurar nenhum valor fixo no código.
• QR Code sem valor fixo: o QR Code gerado no passo 2 não deve ter valor preenchido, pois cada pedido tem um valor diferente. O cliente verá o valor total na tela e deverá informar o valor correto ao realizar o PIX.
• Comprovante manual: este método é offline — a confirmação do pagamento depende do recebimento e validação manual do comprovante enviado pelo cliente.
• Quer PIX automático? Se preferir uma solução com confirmação automática de pagamento via PIX, entre em contato com o time de suporte da MageShop para mais detalhes sobre as opções disponíveis.