Ajuda na integração PHP+Pagseguro

[wneo 5]

Olá!

Alguém já integrou pagseguro com php de forma transparente?

Acho um pouco complicado...

Estou tentando com o arquivo sugerido no dev.pagseguro que pode ser baixado nesse link: exemplo-pagseguro

Nesse exemplo tem uma página de pagamento. Quero fazer algo com essa idéia.. porém diferente do que tem aí, que é adicionar os ítens ao carrinho com formulário.. Na realidade, quero que em uma tela anterior, clicar na foto do produto, depois escolher quantidade e mais detalhes, para daí então chegar nessa página de exemplo já com os valores prontos para serem pagos..

 

E o outro detalhe, é que não consigo gerar o pagamento nem em boleto... já coloquei e-mail e token do sandbox, mas fica somente com a mensagem de aguardando, e nada acontece.. =/

 

Então são 2problemas.... 1° é a idéia de uso que quero modificar, e o 2° é que não finaliza nenhum pagamento...

Para o 1°, preciso compartilhar um zip com os códigos para vcs entrarem na idéia...

Para o 2° pode ser visto direto no exemplo original...

 

Alguém ajuuuuuuuuuda...

[Ana Gauna 45]

Dessa forma, eu nunca usei, eu já usei o PagSeguro UOL, fazendo o login nele, para criar um botão dentro dele, para cobrar algo de alguém.  O email que eles atendem é o faleconosco@uol.com.br 

 

[Gabriel Heming 766]

No link abaixo há um pouco da informação.

 

A parte javascript deve ser feita a parte.

[wneo 5]

Essas documentações possuem bastante trecho de código.. mas em um contexto fica bastante vazio... 

Vou colocar a idéia que estou montando:

https://github.com/WPG2000/pagseguro-transparente-php

 

Quem puder ajudar, extrai no localhost... 

 

[Williams Duarte 431]

Sem ter conhecimento intermediário de JS, é quase impossível trabalhar com checkout Transparente.

 

Vê se te ajuda como base, já que está praticamente pronto.

https://github.com/lubuzzo/checkout-transparente-PagSeguro

[wneo 5]

24 minutos atrás, Williams Duarte disse:

Sem ter conhecimento intermediário de JS, é quase impossível trabalhar com checkout Transparente.

 

Vê se te ajuda como base, já que está praticamente pronto.

https://github.com/lubuzzo/checkout-transparente-PagSeguro

Nesse o pagamento tbm não segue adiante...

[Williams Duarte 431]

Tudo é exemplo, quem tem que implementar o que quer, é você!

Ou acha que é como ir em uma alfaiataria, sob medida para você?

[wneo 5]

26 minutos atrás, Williams Duarte disse:

Tudo é exemplo, quem tem que implementar o que quer, é você!

Ou acha que é como ir em uma alfaiataria, sob medida para você?

Não.. 

Por isso que estou conversando com quem já fez ou tem vontade de ver como funciona..

Quem tiver vontade e algo para agregar pode postar aqui.

Disponibilizei o código que já iniciei, para quem quiser ajudar poder visualizar a idéia.

[Ana Gauna 45]

Naquele dia, a página do desenvolvedor do PagSeguro UOL  estava desativada, hoje vi que voltou a funcionar.

 

https://dev.pagseguro.uol.com.br/documentacao/pagamentos

 

Guia de Integração = https://dev.pagseguro.uol.com.br/

 

 

[wneo 5]

Em 06/05/2017 at 14:49, Ana Gauna disse:

Naquele dia, a página do desenvolvedor do PagSeguro UOL  estava desativada, hoje vi que voltou a funcionar.

 

https://dev.pagseguro.uol.com.br/documentacao/pagamentos

 

Guia de Integração = https://dev.pagseguro.uol.com.br/

 

 

Sim, esse é o guia de integração oficial...

Tem bastante coisa, mas como toda integração de API, tem seu nível de complexidade e muitas vezes demorado sendo a primeira utilização.. =/

Lendo esse guia e outros conteúdos, montei essa parte, que pode ser baixada aqui:

https://github.com/WPG2000/pagseguro-transparente-php

 

E sigo no desafio de fazer uma boa integração transparente, como mencionei no primeiro post...

 

Seguindo minha necessidade, preciso:

1 - Ter a foto dos produtos com sua descrição em uma pagina;

2 - Ao clicar no produto, abrir uma tela com mais detalhes, para o usuário escolher quantidade e demais itens conforme tipo de produto;

3 - Ao definir isso, ser direcionado a uma nova tela, onde carrega no carrinho o que o usuário quer comprar, e o formulário para dados do comprador. Podendo assim, escolher forma de pagamento e gerar o mesmo...(boleto ou cartões)...

 

* O 1 e 2 já estão acontecendo na idéia que montei...

* O 3 ainda está no desafio...

* Quem puder compartilhar alguma idéia, pode baixar o código...

[Guilherme Luiz 41]

Cara, pagseguro, particularmente, achei complexa a integração...

Hoje utilizo a do Gerencianet em meu site para boletos e cartões... muito mais facil a integração e taxas melhores. 

 

vale a pena conferir.

[wneo 5]

50 minutos atrás, Guilherme Luiz disse:

Cara, pagseguro, particularmente, achei complexa a integração...

Hoje utilizo a do Gerencianet em meu site para boletos e cartões... muito mais facil a integração e taxas melhores. 

 

vale a pena conferir.

Olá Guilherme!

Vou ver essa opção enquanto tento desvendar o pagseguro...

Quem tiver mais idéias pode compartilhar, ainda estou na busca da integração perfeita...

[Gabriel Heming 766]

2 minutos atrás, wneo disse:

[...]ainda estou na busca da integração perfeita...

 

Vai morrer esperando... Não existe isso. Todas terão seus prós e contras.

 

Se está tendo alguma dificuldade em implementar, traga sua dificuldade, mostre-nos aonde você parou. Evite usar links de códigos externos quando o fórum provê essa facilidade.

[wneo 5]

11 minutos atrás, Gabriel Heming disse:

Vai morrer esperando... Não existe isso. Todas terão seus prós e contras.

 

Se está tendo alguma dificuldade em implementar, traga sua dificuldade, mostre-nos aonde você parou. Evite usar links de códigos externos quando o fórum provê essa facilidade.

 

Nesse link tem o código que eu montei para ser baixado e acompanhar a idéia:

https://github.com/WPG2000/pagseguro-transparente-php

 

*Como existe uma estrutura de modelo que montei, acredito ser melhor ter o código em mãos para quem quiser ajudar ter mais facilidade de entender, daí então falamos sobre trechos específicos.

 

*Com relação a trazer minha dificuldade.. em post anterior apresentei:

 

Seguindo minha necessidade, preciso:

1 - Ter a foto dos produtos com sua descrição em uma pagina;

2 - Ao clicar no produto, abrir uma tela com mais detalhes, para o usuário escolher quantidade e demais itens conforme tipo de produto;

3 - Ao definir isso, ser direcionado a uma nova tela, onde carrega no carrinho o que o usuário quer comprar, e o formulário para dados do comprador. Podendo assim, escolher forma de pagamento e gerar o mesmo...(boleto ou cartões)...

 

* O 1 e 2 já estão acontecendo na idéia que montei...

* O 3 ainda está no desafio...

* Quem puder compartilhar alguma idéia, pode baixar o código...

 

- Com relação a prós e contras de integrações.. sim sabemos que existem inúmeras.

- Procurei o fórum para compartilhar a idéia e encontrar quem já fez ou tem vontade de fazer, colaborar com a solução contribuindo com sua própria evolução de conhecimento e dos demais assim como eu.

 

 

 

[Gabriel Heming 766]

Reforço, traga seu código para o post. Por N aspectos.

 

- Links externos, apesar de poderem ter informações importantes, podem se perder com o tempo, tornando inválida toda uma discussão;

- O fórum não perderá as informações que nele constar;

- Não é nada confiável baixar um arquivo compactado;

- A maioria dos usuários que poderiam te ajudar, vão te ignorar pelo simples fato de ter que baixar um arquivo.

 

[Williams Duarte 431]

22 minutos atrás, Gabriel Heming disse:

Vai morrer esperando... Não existe isso. Todas terão seus prós e contras.

Quando ele chegar na parte do Bug do PagSeguro para parcelamentos então. Morre, pois ja esta apanhando em implementação Básicas de carrinho de compras, que é o desafio que ele fala!

 

14 minutos atrás, wneo disse:

* Quem puder compartilhar alguma idéia, pode baixar o código...

Quem vai baixar código rapaz, se quer usar o GitHub, começa estudando como ele funciona para atrair contribuidores para seu projeto.

O que te falta é estudar sobre Requisitos, HTML+Javascript, pois checkout transparente nada mais é, do que uma pagina de finalizar pedido com eventos em Javascript.

[ESerra 744]

Na realidade tudo já está pronto:

https://comunidade.pagseguro.uol.com.br/hc/pt-br/community/posts/220126928-Exemplo-de-Checkout-Transparente

 

Além disso, tem a explicação com os exemplos (que até onde me lembro, estão funcionais) na outra página do manual:

https://dev.pagseguro.uol.com.br/documentacao/pagamentos/pagamento-transparente

[wneo 5]

Certo pessoal...

Seguindo então com base nos últmos posts de Gabriel, Williams e ESerra.

- Coloquei os arquivos no github sem rar.

https://github.com/WPG2000/pagseguro-transparente-php

 

- O desafio de um modo geral, é ter a integração completa funcionando, de inicio o pagseguro me parecia um bom recurso, no entanto receber mais ideias me atrai muito, assim como a do Guilherme, que falou sobre o gerencianet. Considero ideal o contexto colaborativo de uma idéia, para evolução mútua de quem frequenta e procura o forum, mantendo os questionamentos e respostas em um nível didático, no entanto cada um tem sua liberdade de expressão, embora nem sempre agreguem com algo de valor a todos.

 

- Fazendo um resumo então da necessidade atual.. considerando os posts anteriores em que já a apresentei... e mencionando a orientação correta de Gabriel, e também do ESerra:

-  A idéia que montei, e para facilitar o entendimento, está dividida em 3 partes:

 

1 - Ter a foto dos produtos com sua descrição em uma pagina;

2 - Ao clicar no produto, abrir uma tela com mais detalhes, para o usuário escolher quantidade e demais itens conforme tipo de produto;

3 - Ao definir isso, ser direcionado a uma nova tela, onde carrega no carrinho o que o usuário quer comprar, e o formulário para dados do comprador. Podendo assim, escolher forma de pagamento e gerar o mesmo...(boleto ou cartões)...

 

* O 1 e 2 já estão acontecendo na idéia que montei...

* Originalmente nessa idéia com o material do pagseguro, o ítem 3, era uma pagina onde havia um recurso de adicionar os items, que seriam os produtos e ao lado dados do comprador e forma de pagamento.

* Quero modificar isso, fazendo de um modo onde chegando nessa página, o produto já esteja selecionado com suas especificações escolhidas pelo cliente, e então possa ser finalizada a compra.

* Persistir os dados até esse momento, já está acontecendo, pode ser visualizado no projeto para download... Gostaria então, de resgatar ele nesse contexto de código que vem do material do pagseguro, e finalizar a compra, pq atualmente fica apenas com a mensagem de aguardando na tela...não gera o boleto nem pgto via cartão:

// Setting the application NameSpace
var MyApplication = window.MyApplication || {};
MyApplication.CheckoutPage = new function() {
	
	var hasSessionId = false; // Inicia sem sessionId
	
	var updateSessionId = function(callback) {
		
		showLoading();
		
		$.ajax({
			url: "engine/pagseguro/sessionid.php",
			type:"GET",
			cache: false,
			success: function(response) {
				
				PagSeguroDirectPayment.setSessionId(response);
				
				hasSessionId = true;
				cardBrandEvents();
				callback();
				
			},
			error: function() {
				alert(" Não foi possível obter o Session ID do PagSeguro ");
			},
			complete: function() {
				hideMessages();
			}
		});
		
	};
	
	// Atualiza dados de parcelamento atráves da bandeira do cartão
	var updateInstallments = function(brand) {
		
		var amount = Number($("#totalValue").html());
		
		PagSeguroDirectPayment.getInstallments({
			amount: amount,
			brand:  brand,
			success: function(response) {
				
				// Para obter o array de parcelamento use a bandeira como "chave" da lista "installments"
				var installments = response.installments[brand];
				
				var options = '';
				for (var i in installments) {
					
					var optionItem     = installments[i];
					var optionQuantity = optionItem.quantity; // Obtendo a quantidade
					var optionAmount   = optionItem.installmentAmount; // Obtendo o valor
					var optionLabel    = (optionQuantity + "x " + formatMoney(optionAmount)); // montando o label do option
					var price          = Number(optionAmount).toMoney(2,'.',',');
					
					options += ('<option value="' + optionItem.quantity + '" dataPrice="'+price+'">'+ optionLabel +'</option>');
					
				};
				
				// Atualizando dados do select de parcelamento
				$("#installmentQuantity").html(options);
				
				// Exibindo select do parcelamento
				$("#installmentsWrapper").show();
				
				// Utilizando evento "change" como gatilho para atualizar o valor do parcelamento
				$("#installmentQuantity").trigger('change');
				
			},
			error: function(response) {
				
			},
			complete: function(response) {
				
			}
		});
		
	};
	
	
	var updateCardBrand = function(cardBin) {
		
		PagSeguroDirectPayment.getBrand({
			
			cardBin: cardBin,
			
			success: function(response) {
				
				var brand = response.brand.name;
				
				$("#cardBrand").attr('brand', brand);
				$("#creditCardBrand").val(brand);
				
				updateInstallments(brand);
				
			},
			
			error: function(response) {
				
			},
			
			complete: function(response) {
				
			}
			
		});
		
	};
	
	var changeMethod = function(method) {
		
		var loading = $("#paymentMethodLoading");
		
		loading.show();
		
		var showBox = function() {
			
			var allMethods = $(".paymentMethodGroup");
			var thisMethod = allMethods.filter("[dataMethod='"+method+"']");
			
			allMethods.hide();
			thisMethod.show();
			loading.hide();
			
		};
		
		if (hasSessionId) {
			showBox();
		} else {
			// obter sessioId se ainda não foi setado
			updateSessionId(showBox);
		}
		
	};
	
	
	var updateCardToken = function(callback) {
		
		PagSeguroDirectPayment.createCardToken({
			
			cardNumber: $("#cardNumber").val(),
			brand: $("#creditCardBrand").val(),
			cvv: $("#cardCvv").val(),
			expirationMonth: $("#cardExpirationMonth").val(),
			expirationYear: $("#cardExpirationYear").val(),
			
			success: function(response) {
				
				// Obtendo token para pagamento com cartão
				var token = response.card.token;
				
				// Executando o callback (pagamento) passando o token como parâmetro
				callback(token);
				
			},
			
			error: function(response) {
				
				showCardTokenErrors(response.errors);
				
			},
			
			complete: function(response) {
				
			}
			
		});
		
	};
	
	
	// Fazer pagamento de qualquer tipo
	var doPayment = function(params, callback) {
		
		// travando a tela (loading)
		showLoading();
		
		// Adicionando dados do comprador aos parâmentros de pagamento
		areaToParams("buyerData", params);
		
		// Adicionando dados dos items (carrinho) aos parâmetros de pagamento
		addCartData(params);
		
		// Atualizando hash do comprador
		params.senderHash = PagSeguroDirectPayment.getSenderHash();
		
		// Request para o PHP passando os dados do pagamento
		$.ajax({
			type:"POST",
			url: "payment.php",
			data: params,
			dataType: 'json',
			cache: false,
			success: function(response) {
				
				// Executa o callback passado como parâmentro
				callback(response.transaction);
				
			},
			error: function(jqxhr) {
				// Liberando a tela (esconde o loading)
				//hideMessages();
				
				// obtendo lista de erros
				var response = $.parseJSON(jqxhr.responseText);
				
				// Exibindo lista de erros
				showPaymentErrors(response.errors);
				
			}
			
		});
		
	};
	
	// Pagamento com cartão de crédito
	var creditCardPayment = function() {
		
		showLoading();
		
		//////////////////////////////////////
		// fazer validação nesse ponto;
		//////////////////////////////////////
		
		updateCardToken(function(cardToken) {
			
			// Atualizando field que deve conter o valor do token
			$("#creditCardToken").val(cardToken);
			
			var params = {
				paymentMethod: 'creditCard'
			};
			
			// Adicionando dados do cartão de crédito aos parâmentros de pagamento
			areaToParams("creditCardData", params);
			
			// Fazer pagamento via cartão de crédito passando um callback a ser executado no final
			doPayment(params, function(transaction){
				
				// Aqui você tem o código da transação no final do pagamento
				showTransactionCode(transaction.code);
				
			});
			
		});
		
	};
	
	// Alerando tipo de meio de pagamento (cartão, boleto ou tef)
	var changeMethodEvents = function() {
		var radioInputs = $("input[name='changePaymentMethod']");
		radioInputs.click(function(){
			
			var method = $(this).val();
			
			changeMethod(method);
			
		});
		radioInputs.filter(":checked").trigger("click");
	};
	
	
	// Pagamento via cartão de crédito no click do "botão pagar"
	var creditCardPaymentEvents = function() {
		$("#creditCardPaymentButton").click(function(){
			creditCardPayment();
		});
	};
	
	
	// Gerenciando bandeira do cartão
	var cardBrandEvents = function() {
		
		var verifyBrand = function() {
			
			// Obtendo apenas os 6 primeiros dígitos (bin)
			var cardBin = $("#cardNumber").val().substring(0, 6);
			
			// Atualizar Brand apenas se tiver 6 ou mais dígitos preenchidos
			if (String(cardBin).length >= 6) {
				
				// Atualizar Brand
				updateCardBrand(cardBin);
				
			} else {
				
				// Se não digitou o número do cartão, esconder parcelamento
				$("#installmentsWrapper").hide();
				
			}
			
		};
		
		// Verificar bandeira após qualquer mudança nos inputs de cartão de crédito
		$(".cardDatainput").change(function(){
			verifyBrand();
		});
		
		// Verificar bandeira logo no início
		verifyBrand();
		
	};
	
	// Atualizando o valor do parcelamento
	var installmentQuantityEvents = function() {
		$("#installmentQuantity").change(function() {
			var option = $(this).find("option:selected");
			if (option.length) {
				$("#installmentValue").val( option.attr("dataPrice") );
			}
		});
	};
	
	var holderEvents = function() {
		
		var holderData = $("#holderData");
		
		// Usar dados do comprador para preencher dados do dono do cartão
		$("#sameHolder").click(function(){
			
			$("#buyerData input[holderField]").each(function(){
				var fieldRef = $(this).attr('holderField');
				var value = $(this).val();
				holderData.find("input[holderField=\""+fieldRef+"\"]").val(value);
			});
			
			$("#creditCardHolderBirthDate").focus();
			holderData.show();
			
		});
		
		// limpar dados do dono do cartão para preecher novo
		$("#otherHolder").click(function(){
			holderData.find("input").val('');
			holderData.show();
			$("#creditCardHolderBirthDate").focus();
		});
		
		// Verificar no início
		$("input[name='holderType']:checked").trigger('click');
		
	};
	
	// Adicionar dados do carrinho aos parâmetros de pagamento
	var addCartData = function(params) {
		
		$("#cartTable tbody tr").each(function(index, element){
			$(element).find("td").each(function(){
				if($(this).attr("data-name")) {
					if (startsWith($(this).attr("data-name"),"itemAmount")) {
						params[$(this).attr("data-name") + (index+1)] = $(this).html().replace(",",".");
					} else {
						params[$(this).attr("data-name") + (index+1)] = $(this).html();
					}
				}
			});
		});
		
	};
	
	// Eventos do carrinho (adicioanr item)
	var cartEvents = function() {
		
		$("#addItem").click(function(){
			
			$.colorbox({
				html: $("#cartItemHidden").html(),
				fixed: true
			});
			
			$("#colorbox .addToCart").unbind('click').bind('click', function(){
				
				var parent     = $(this).parents(".cartItemFields");
				var itemid     = parent.find(".itemId").val();
				var descr      = parent.find(".itemDescription").val();
				var amount     = Number(parent.find(".itemAmount").val().replace(",", "."));
				var qty        = Number(parent.find(".itemQuantity").val());
				var itemValue  = (amount * qty);
				
				var html  = ("<tr>");
				html += ("<td data-name='itemId'>" + itemid + "</td>");
				html += ("<td data-name='itemDescription'>" + descr + "</td>");
				html += ("<td data-name='itemAmount'>" + amount.toMoney(2, ',', '.') + "</td>");
				html += ("<td data-name='itemQuantity'>" + '<?php echo $quantidade; ?>' + "</td>");
				html += ("<td>" + itemValue.toMoney(2, ',', '.') + "</td>");
				html += ("</tr>");
				
				$("#cartTable tbody").append(html);
				
				var total = Number($("#totalValue").html());
				total = total + itemValue;
				
				$("#totalValue").html(total.toMoney(2, '.', ','));
				
				if ($("#installmentQuantity").val() != "") {
					updateInstallments( $("#creditCardBrand").val() );
				}
				
				$.colorbox.close();
				
			});
			
		});
		
	};
	
	
	// Pagamento com TEF
	var eftEvents = function() {
		
		$(".bank-flag").click(function(){
			var bank = $(this).attr("dataBank");
			var params = {
				paymentMethod: 'eft',
				bankName: bank
			};
			doPayment(params, function(transaction){
				window.open(transaction.paymentLink);
				showWaitingPayment("Débito online");
			});
		});
		
	};
	
	
	// Pagamento com boleto
	var boletoEvents = function() {
		
		$("#boletoButton").click(function(){
			var params = {
				paymentMethod: 'boleto'
			};
			doPayment(params, function(transaction){
				window.open(transaction.paymentLink);
				showWaitingPayment("Pagamento com Boleto...");
			});
		});
		
	};
	
	
	// Aplicando eventos apenas quado o documento estiver pronto
	$(document).ready(function(){
		cartEvents();
		changeMethodEvents();
		holderEvents();
		creditCardPaymentEvents();
		installmentQuantityEvents();
		eftEvents();
		boletoEvents();
	});
	
};

 

[Ana Gauna 45]

Já experimentou o do Paypal?  https://www.paypal-brasil.com.br/desenvolvedores/

 

 

[wneo 5]

57 minutos atrás, Ana Gauna disse:

Já experimentou o do Paypal?  https://www.paypal-brasil.com.br/desenvolvedores/

 

 

Ainda não,

Vou ver como é, obrigado Ana!