💸 PagHiper: Agora com PIX (QrCode)

Leonardo_Vicentini_F · Dezembro 16, 2020, 7:11pm

Agora além de boleto o PagHiper também disponibiliza o QrCode do PIX no próprio Boleto, o que deve aumentar muito a conversão !!!

Esse plug-in abaixo é para poder capturar o “Código PIX” para pagar em algum aplicativo no próprio celular em vez de QrCode.

Como instalar:
PS: Use por sua conta e Risco.

function copyCodePix() {
  var InputPix = document.getElementById("InputPix");
  InputPix.select();
  InputPix.setSelectionRange(0, 99999);
  document.execCommand("copy");
  alert("Código Pix Copiado :)");
}
$(function() {
    setTimeout(function(){
        var imprimirBoleto = $('a#imprimirBoleto').attr('href');
        if(imprimirBoleto.length>0) {
            imprimirBoleto = imprimirBoleto.replace('https://www.paghiper.com/checkout/boleto/', 'https://pix.paghiper.com/pixcode/?')
            $.get(`https://api.qrserver.com/v1/read-qr-code/?fileurl=${imprimirBoleto}`, function(data){
                if (!window.matchMedia('screen and (max-width: 767px)').matches){
                    $('.status-pagamento').append(`
						<div class="alert alert-info" id="box-pagamento-loading" style="/* display: none; */">
							<div class="mensagem" id="mensagemLoading">
								<div
									class="novidade-pix"
									style="
										background: #ff7700;
										color: #fff;
										display: inline-block;
										padding: 0.25em 0.4em;
										font-size: 16px;
										line-height: 1;
										text-align: center;
										white-space: nowrap;
										vertical-align: baseline;
										border-radius: 0.25rem;
										transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
									"
								>
									Novidade
									<h3 style="color: #007bff;">PAGUE AGORA COM SEU PIX</h3>
									<p class="lead">Para pagar, basta pegar o smartphone, acessar o aplicativo onde está o seu <strong>PIX</strong> ativo, acione a opção de pagamento e aponte a câmera do aparelho para realizar a transação.</p>
									<div class="botoes-boleto">
										<div class="botoes-pix">
											<div class="control-group">
												<div class="controls">
													<input id="InputPix" name="codepix" type="text" value="${data[0].symbol[0].data}" />
													<p class="help-block">
														<strong>Copie e cole</strong> o código abaixo no app da sua instituição financeira para finalizar a compra
														<button id="CopiarCdógio" class="botao principal" onclick="copyCodePix()"><i class="icon-edit"></i> Copiar Código</button>
													</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					`);
                }
                else {
                    $('.status-pagamento').append(`
						<div class="alert alert-info" id="box-pagamento-loading" style="/* display: none; */">
							<div class="mensagem" id="mensagemLoading">
								<div
									class="novidade-pix"
									style="
										background: #ff7700;
										color: #fff;
										display: inline-block;
										padding: 0.25em 0.4em;
										font-size: 16px;
										line-height: 1;
										text-align: center;
										white-space: nowrap;
										vertical-align: baseline;
										border-radius: 0.25rem;
										transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
									"
								>
									Novidade
								</div>
								<h3 style="color: #007bff;">PAGUE AGORA COM SEU PIX</h3>
								<p class="lead">
									Para pagar, basta pegar o smartphone, acessar o app onde está o seu <strong style="font-weight: 900;">PIX</strong> cadastrado,<br />
									<strong style="font-weight: 900;">Copie e cole</strong> o código abaixo no app para finalizar a sua compra.
								</p>
								<div class="botoes-boleto">
									<div class="botoes-pix">
										<div class="control-group">
											<div class="controls"><input id="InputPix" name="codepix" type="text" value="${data[0].symbol[0].data}" /></div>
											<button id="CopiarCdógio" class="botao principal" onclick="copyCodePix()"><i class="icon-edit"></i> Copiar Código</button>
										</div>
									</div>
								</div>
							</div>
						</div>						
					`);
                }
            });
        }
    }, 3000);
});

By Danilo (Lojista do Grupo de Top Sellers)

Resultado:

betabaixinha · Dezembro 16, 2020, 7:44pm

Que legal!!! Muito obrigada!!

Recebi o e-mail do PagHiper. Achei muito bacana.

Mas essa atualização acontece sozinha? gerei um boleto, hojoe pela manhã, mas não gerou com o Pix.

Leonardo_Vicentini_F · Dezembro 16, 2020, 7:50pm

Possivelmente fizeram após o envio do email
faça um pedido teste!

betabaixinha · Dezembro 16, 2020, 8:15pm

Muito Obrigada!!

Vou fazer!!

minhaplaquinha · Dezembro 17, 2020, 5:24pm

Será que seria possível configurar de alguma forma pra oferecer um desconto no pagamneto via Píx?

Leonardo_Vicentini_F · Dezembro 17, 2020, 5:28pm

sim, mas será para boleto e para pix ao mesmo tempo, neste caso.

RafaMonteiroo · Dezembro 18, 2020, 1:26pm

Opa adicionei o Icone apos o logotipo do boleto na forma de pagamento, porem nao alterou dentro do produto , alguma dica?

segue a forma:
Agora que o Pix está integrado aos principais meios de pagamento é bom alertar aos clientes que eles podem usar essa facilidade. Depois de configurar nas Formas de Pagamento, para exibir os selos Pix é só inserir o código abaixo. Para cada selo é preciso criar um código diferente. Substitua o XX na frente de #pagamentoXX pelos números:

Boleto (PagHiper) = 6

Mercado Pago = 18

PagSeguro = 26

Depois altere (nome da plataforma de pagamento) por Boleto, Mercado Pago ou PagSeguro.

RafaMonteiroo · Dezembro 18, 2020, 1:27pm

Outra coisa, alterei via script de “via Boleto Bancário” para “via PIX ou Boleto” porem só alterou dentro do produto e no primeiro item q exibe na listagem, se alguem manjar repetir esse codigo para trocar em todas as palavras… segue o que usei:

javascript rodape

document.body.innerHTML = document.body.innerHTML.replace(‘via Boleto Bancário’, ‘via PIX ou Boleto’);

RafaMonteiroo · Dezembro 18, 2020, 2:11pm

fiz o teste do codigo do topico, e na versao PC ficou meio desproporcional a tela, alguma dica?

minhaplaquinha · Dezembro 19, 2020, 3:36am

Eu não entendi muito bem. O cliente vai copiar esse código gerado e vai colar ele onde exatamente? Fiquei bem confuso.

Leonardo_Vicentini_F · Dezembro 19, 2020, 11:23am

No aplicativo de pagamento.

minhaplaquinha · Dezembro 19, 2020, 3:03pm

Agora entendi. É na pagina de transferencia via QRcode, seleciona a opção: colar código.

minhaplaquinha · Dezembro 19, 2020, 3:05pm

Como posso alterar esse texto de orientação sobre o código?

Leonardo_Vicentini_F · Dezembro 19, 2020, 3:11pm

precisa ver no código onde está o texto que vc quer alterar e alterar…

Will · Dezembro 19, 2020, 3:17pm

Amigos, vi que o codigo ta quebrado na versão desktop, resolvi arrumar e adcionar mais uns itens para todos instalarem corretamente.

Qualquer dúvida fico a disposição.

function copyCodePix() {
  var InputPix = document.getElementById("InputPix");
  InputPix.select();
  InputPix.setSelectionRange(0, 99999);
  document.execCommand("copy");
  alert("Código Pix Copiado!\n 1 - Agora abra o aplicativo do seu banco onde você possui chave Pix\n 2 - Vá na opção Pix, e em pagar cole o codigo copiado.\n 3 - Confira o valor e confirme o pagamento! :)");
}
$(function () {
  setTimeout(function () {
    var imprimirBoleto = $('a#imprimirBoleto').attr('href');
    if (imprimirBoleto.length > 0) {
      imprimirBoleto = imprimirBoleto.replace('https://www.paghiper.com/checkout/boleto/', 'https://pix.paghiper.com/pixcode/?')
      $.get(`https://api.qrserver.com/v1/read-qr-code/?fileurl=${imprimirBoleto}`, function (data) {
        if (!window.matchMedia('screen and (max-width: 767px)').matches) {
          $('.status-pagamento').append(`
						<div class="alert alert-info" id="box-pagamento-loading" style="/* display: none; */">
						<div class="alert alert-info" id="box-pagamento-loading" style="/* display: none; */">
							<div class="mensagem" id="mensagemLoading">
								<div
									class="novidade-pix"
									style="
										background: #ff7700;
										color: #fff;
										display: inline-block;
										padding: 0.25em 0.4em;
										font-size: 16px;
										line-height: 1;
										text-align: inherit;
										white-space: inherit;
										vertical-align: baseline;
										border-radius: 0.25rem;
										transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
									"
								>
									Novidade
								</div>
								<h3 style="color: #007bff;">PAGUE AGORA COM SEU PIX</h3>
								<p class="lead">
									Para pagar, basta pegar o smartphone, acessar o app onde está o seu <strong style="font-weight: 900;">PIX</strong> cadastrado,<br />
									<strong style="font-weight: 900;">Copie e cole</strong> o código abaixo no app para finalizar a sua compra.
								</p>
								<div class="botoes-boleto">
									<div class="botoes-pix">
										<div class="control-group">
											<div class="controls"><input id="InputPix" name="codepix" type="text" value="${data[0].symbol[0].data}" /></div>
											<button id="CopiarCdógio" class="botao principal grande" onclick="copyCodePix()"><i class="icon-edit"></i> Copiar Código</button>
										</div>
									</div>
								</div>
							</div>
						</div>						
					`);
        }
        else {
          $('.status-pagamento').append(`
						<div class="alert alert-info" id="box-pagamento-loading" style="/* display: none; */">
							<div class="mensagem" id="mensagemLoading">
								<div
									class="novidade-pix"
									style="
										background: #ff7700;
										color: #fff;
										display: inline-block;
										padding: 0.25em 0.4em;
										font-size: 16px;
										line-height: 1;
										text-align: inherit;
										white-space: inherit;
										vertical-align: baseline;
										border-radius: 0.25rem;
										transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
									"
								>
									Novidade
								</div>
								<h3 style="color: #007bff;">PAGUE AGORA COM SEU PIX</h3>
								<p class="lead">
									Para pagar, basta pegar o smartphone, acessar o app onde está o seu <strong style="font-weight: 900;">PIX</strong> cadastrado,<br />
									<strong style="font-weight: 900;">Copie e cole</strong> o código abaixo no app para finalizar a sua compra.
								</p>
								<div class="botoes-boleto">
									<div class="botoes-pix">
										<div class="control-group">
											<div class="controls"><input id="InputPix" name="codepix" type="text" value="${data[0].symbol[0].data}" /></div>
											<button id="CopiarCdógio" class="botao principal grande" onclick="copyCodePix()"><i class="icon-edit"></i> Copiar Código</button>
										</div>
									</div>
								</div>
							</div>
						</div>						
					`);
        }
      });
    }
  }, 3000);
});

Leonardo_Vicentini_F · Dezembro 19, 2020, 3:22pm

Uhuuuu Perfeito!
Para isso que é a comunidade, um ajuda o outro!

Yuri.Rodrigues · Dezembro 20, 2020, 11:56am

Bom dia @RafaMonteiroo
Qual código usou para colocar logo do PIX na frente do boleto?

RafaMonteiroo · Dezembro 20, 2020, 3:31pm

css:

/* Tarja Produto PIX no boleto */
.pagina-produto .tarja img { margin-top: 30px; }

li.accordion-group:last-child {
background: url(https://cdn.awsli.com.br/294/294169/arquivos/PIX.png);
background-repeat: no-repeat;
background-size: 70px;
background-position: 80px;
}

Yuri.Rodrigues · Dezembro 20, 2020, 9:12pm

Deu certo! Muito obrigado!

betabaixinha · Dezembro 21, 2020, 11:45am

Oi Yuri. Sua loja é linda!
Como você fez essa mensagem do Cookies?

Obrigada e parabéns!

Tópico		Respostas	Visualizações
Pagamento Pix - Mercado Pago Formas de Pagamento	6	1241	1 de Junho de 2021
Pix Mercado Pago - Dúvida Formas de Pagamento	1	566	22 de Maio de 2021
Pagamento Nativo PIX - PagHiper Formas de Pagamento	25	2523	4 de Julho de 2021
Como fazer recebimento por PIX? Formas de Pagamento	6	357	6 de Maio de 2021
Queria ajuda pra arrumar algumas coisas no meu site Layout	1	521	28 de Janeiro de 2021

💸 PagHiper: Agora com PIX (QrCode)

Tópicos relacionados