ūüíł PagHiper: Agora com PIX (QrCode)

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.

image

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:

image

7 Curtidas

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.

1 Curtida

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

1 Curtida

Muito Obrigada!!

Vou fazer!!

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

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

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.

1 Curtida

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‚Äô);

1 Curtida

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

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

No aplicativo de pagamento.

Agora entendi. √Č na pagina de transferencia via QRcode, seleciona a op√ß√£o: colar c√≥digo.

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

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

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.

image

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

11 Curtidas

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

5 Curtidas

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

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

3 Curtidas

Deu certo! Muito obrigado!

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

Obrigada e parabéns!

1 Curtida