Como deixar apenas o Pix como meio de Pagamento na Loja Integrada

Olá Pessoal tudo bom ? 

Hoje vamos demonstrar a como configurar seu meio de pagamento PagHiper, para que seja possível emitir PIX dentro da Loja Integrada

Alguns requisitos necessários para essa ação

Requisitos	Detalhes	Caminho
Parceria ativa com Loja Integrada	Parceria que permite usar a PagHiper junto com a loja Integrada	Painel Loja Integrada > Configurações de pagamento >> PagHiper >> Item 3
Habilitado  o pix junto ao boleto	Permite o boleto ser emitido junto com a opção pix	Painel PagHiper >> Ferramentas >> Personalizar >>Exibir no Boleto
Habilitado exibir somente pix	Permitir exibir apenas o pix	Painel PagHiper >> Ferramentas >> Personalizar >>Exibir no Boleto

Atenção! Realizando esse processo, só será possível emitir pix, tendo a opção de boleto desativada.

 

Primeiramente para disponibilizar o pix dentro da Loja Integrada, precisamos ter a parceria entre a PagHiper e Loja Integrada ativa, para localizar a parceria, basta acessar as configurações de pagamento da sua loja Integrada 

Agora vamos acessar as configurações do meio de pagamento PagHiper

Feito isso vamos realizar a etapa do item 3

Pronto! com a parceria ativa, vamos configurar em nosso painel PagHiper para habilitar o pix.

 

Vamos em nosso painel PagHiper e acessamos "Ferramentas" >> Personalizar

Vamos na opção " Exibir no Boleto "

Agora precisamos habilitar as seguintes opções " Exibir pix junto ao boleto " e " Exibir somente pix "

Feito isso vamos salvar essas alterações

Pronto! Com as configurações a cima, ao gerar um pedido em sua loja Integrada já exibirá o pix no lugar do boleto.

Agora para uma melhor estética em sua loja, vamos alterar o nome de alguns botões e imagens, para condizer com a forma de pagamento.

Primeiramente, vamos acessar nosso painel da Loja Integrada e vamos na opção " Personalize sua loja " >> Incluir código HTML

Agora vamos no canto superior  em " Adicionar código " caso essa opção não apareça, basta ir em " Modo Avançado"

Vamos fazer nossa primeira alteração que será  alterar o texto no checkout final, onde será renomeado as palavras " Boleto " para pix e alterado a imagem na forma de pagamento

Para isso vamos configurar os campos dessa maneira

Campo	Conteúdo	Observação
Descrição	Nome do Boleto e Logo	Você pode mudar o texto conforme desejar
Local publicação	Cabeçalho	Posição do código que vamos inserir
Página publicação	Página de finalização do pedido	Onde vamos trocar os nomes
Tipo	JavaScript	Linguagem que nosso código será executado

 

No campo conteúdo vamos inserir o seguinte código

window.onload = function(){
document.querySelector('#mensagemBoleto h3').textContent = 'Pix Pronto';
document.querySelector('#imprimirBoleto').textContent = 'Imprimir Pix';
};
$(function(){
var logo = document.getElementById('img-forma-pagamento');
if(logo !== null){
logo.src = 'https://paghiper.s3.amazonaws.com/imagens4974/49629pix-icon-198027.png';
logo.id = 'logo-pix-att';
}
}
);

Devendo ficar dessa maneira 

 

Agora só clicar no botão " Salvar Alterações ".
Atenção! As alterações pode levar até 15 minutos para ser processadas pela Loja Integrada.

Agora vamos mudar também a imagem(logo) que aparece em nossa página do produto.

Para isso vamos repetir os passos anteriores, e  "adicionar código" novo. Vamos alterar as configurações dos campos dessa maneira:

 

Campo	Conteúdo	Observação
Descrição	Bandeira Pix	Você pode mudar o texto conforme desejar
Local publicação	Cabeçalho	Posição do código que vamos inserir
Página publicação	Página do produto	Onde vamos trocar a imagem
Tipo	JavaScript	Linguagem que nosso código será executado

No campo conteúdo vamos inserir o seguinte código

$(function(){
var img = document.querySelector("img[alt*='Boleto Bancário']");
if(img !== null){
img.src = 'https://meiosdepagamento.s3.sa-east-1.amazonaws.com/pix.png';
}
});

Devendo ficar dessa maneira

Agora só clicar no botão " Salvar Alterações ".

 

Vamos mudar também o texto que aparece em nossa página quando aplicamos o desconto.

Para isso vamos repetir os passos anteriores, e  "adicionar código" novo. Vamos alterar as configurações dos campos dessa maneira:

 

Campo	Conteúdo	Observação
Descrição	Bandeira Pix Pagamento	Você pode mudar o texto conforme desejar
Local publicação	Cabeçalho	Posição do código que vamos inserir
Página publicação	Página do Produto	Onde vamos trocar o texto
Tipo	JavaScript	Linguagem que nosso código será executado

No campo conteúdo vamos inserir o seguinte código

window.onload = function(){
var texto = document.querySelector(".desconto-a-vista").innerHTML;
var textoNew = document.querySelector(".desconto-a-vista");
if(texto !== null){
var textoAtualizado = texto.replace(/Boleto Bancário/gi,'Pix');
textoNew.innerHTML = textoAtualizado;
}
};

Devendo ficar dessa maneira

Vamos mudar também o texto do desconto no carrinho de compras

Para isso vamos repetir os passos anteriores, e  "adicionar código" novo. Vamos alterar as configurações dos campos dessa maneira:

 

Campo	Conteúdo	Observação
Descrição	Alterar texto Boleto PgCar	Você pode mudar o texto conforme desejar
Local publicação	Cabeçalho	Posição do código que vamos inserir
Página publicação	Página do carrinho	Onde vamos trocar a imagem
Tipo	JavaScript	Linguagem que nosso código será executado

No campo conteúdo vamos inserir o seguinte código

$(document).ready(function(){
$("div").hover(function(){
var texto = document.querySelector(".descontos").innerHTML;
var textoNew = document.querySelector(".descontos");
if(texto !== null){
var textoAtualizado = texto.replace(/Boleto Bancário/gi,'Pix');
textoNew.innerHTML = textoAtualizado;
}
});
});

Devendo ficar dessa maneira

 

Vamos mudar também a imagem(logo) que aparece em nossa página de checkout 

Para isso vamos repetir os passos anteriores, e  "adicionar código" novo. Vamos alterar as configurações dos campos dessa maneira:

 

Campo	Conteúdo	Observação
Descrição	Alterar texto Boleto	Você pode mudar o texto conforme desejar
Local publicação	Rodapé	Posição do código que vamos inserir
Página publicação	Página de checkout	Onde vamos trocar a imagem
Tipo	JavaScript	Linguagem que nosso código será executado

No campo conteúdo vamos inserir o seguinte código

$(function(){
var img = document.querySelector("img[src*='https://cdn.awsli.com.br/production/static/loja/estrutura/v1/img/bandeiras/boleto.png']"); 
if(img !== null){
img.src = 'https://meiosdepagamento.s3.sa-east-1.amazonaws.com/pix.png';
}
});

Devendo ficar dessa maneira

Agora só clicar no botão " Salvar Alterações ".

Atenção! As alterações podem levar até 15 minutos para ser processadas pela Loja Integrada.

 

Pronto! Agora você já pode fornecer a opção Pix para o seu cliente.

Veja uma demonstração de como ficará em sua loja