LightBox não abre no mobile

luccasr73 commented 4 years ago

Comportamento esperado

LightBox abrindo normalmente em plataformas mobile como abre no desktop

Comportamento atual

Ambiente (produção, sandbox)

Produção

Passos para reproduzir o bug

Chamar o LightBox numa plataforma mobile

dousakisnik commented 4 years ago

hello, in the mobile version the lightbox is trying to redirect to the pagseguro page but it doesnt have the permission to redirect the parent window if it is in an other domain. This is why it is working properly in https://lojateste.pagseguro.uol.com.br/lightbox and the redirect is stopped a normal commercial website. The errors that are produced are: `Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://www.--------.com.br' from frame with URL 'https://pagseguro.uol.com.br/checkout/embedded/i-ck.html#rmcl'. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture. See https://www.chromestatus.com/features/5851021045661696.

initApplicationAsRedir @ pagseguro.mediator.lightbox.1579733670360.js:1 (anonymous) @ pagseguro.mediator.lightbox.1579733670360.js:1 callbacks. @ pagseguro.mediator.lightbox.1579733670360.js:1 15:47:17.455 Uncaught DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to 'https://pagseguro.uol.com.br/checkout/v2/lightbox.html?layout=embedded&checkoutListener=javascript&code=60633D9B7777A6E00422CF95451DB849'. at PagSeguro.Lightbox.initApplicationAsRedir (https://stc.pagseguro.uol.com.br/pagseguro/j/pagescripts/checkout/embedded/pagseguro.mediator.lightbox.1579733670360.js:1:2932) at https://stc.pagseguro.uol.com.br/pagseguro/j/pagescripts/checkout/embedded/pagseguro.mediator.lightbox.1579733670360.js:1:3255 at callbacks. (https://stc.pagseguro.uol.com.br/pagseguro/j/pagescripts/checkout/embedded/pagseguro.mediator.lightbox.1579733670360.js:1:5058) initApplicationAsRedir @ pagseguro.mediator.lightbox.1579733670360.js:1 (anonymous) @ pagseguro.mediator.lightbox.1579733670360.js:1 callbacks. @ pagseguro.mediator.lightbox.1579733670360.js:1`

alexkilty commented 4 years ago

Any updates on this issue?

alecshoppe commented 4 years ago

O lightbox não foi feito para abrir no Mobile. Use o seguinte approach se você precisar disso:

var isOpenLightbox = PagSeguroLightbox({
    code: **CODIGO_DE_PAGAMENTO_AQUI**
}, {
    success : function(transactionCode) {
                // terminou o pagamento
        location.href=LINK_QUANDO_LIGHTBOX_FOR_SUCESSO;
    },
    abort : function() {
                //abortou pagamento
        location.href= LINK_QUANDO_LIGHTBOX_ABORTAR;
    }
});
if (!isOpenLightbox){
    location.href= LINK_REDIRECIONAR_LIGHTBOX_NÃO_SUPORTADO;
}
// Link para redirecionamento: https://pagseguro.uol.com.br/v2/checkout/payment.html?code=CODIGO_PAGAMENTO

Você deve redirecionar o usuário para a plataforma sempre que o Lightbox não for suportado.

luccasr73 commented 4 years ago

@AlexMacha Conheço essa abordagem e usei ela depois de muito procurar, mas é workaround(famosa gambiarra), o numero de acessos mobile só aumenta, até onde eu vi esse problema existe a anos e nada de ser concertado. Pra melhorar a situação não existe qualquer menção desse problema na documentação, na época em que abri essa issue eu estava participando de um projeto onde meu cliente perdeu diversas vendas porque o publico alvo dele beirava 90% mobile, nem o suporte sabe dizer ao certo se funciona ou não.

alecshoppe commented 4 years ago

@AlexMacha Conheço essa abordagem e usei ela depois de muito procurar, mas é workaround(famosa gambiarra), o numero de acessos mobile só aumenta, até onde eu vi esse problema existe a anos e nada de ser concertado. Pra melhorar a situação não existe qualquer menção desse problema na documentação, na época em que abri essa issue eu estava participando de um projeto onde meu cliente perdeu diversas vendas porque o publico alvo dele beirava 90% mobile, nem o suporte sabe dizer ao certo se funciona ou não.

Pois é, a alternativa pra isso é fazer checkout transparente mesmo, até melhor porque você personaliza do seu jeito. Sim a documentação é terrível e o suporte ao dev só piora, por isso outras plataformas tomaram tanto destaque ultimamente. Antigamente tinha um forum dedicado, hoje nem a doc funciona direito, abre 1 semana sim 1 semana não. Mas quanto ao lightbox no mobile, essa é o jeito correto mesmo, há uns 4 anos quando tinha documentação, era esse o jeito abordado nela. Ter a lightbox em si no mobile seria ruim, exp de usuário seria péssima, é melhor que seja um redirecionamento mesmo ou sem popups. Mas recomendo implementar o checkout transparente, da um pouco mais de trabalho mas vale a pena.

Lusatto commented 3 years ago

Boa tarde, estou com o mesmo problema citado, no celulares com android o sitema funciona, porém no IOS não abre de jeito nenhum. Tentei o código acima mencionado pelo "alecshoppe", mas ele ainda não funciona. Veja se entendi corretamente, através do código mencionado, o sistema entende que se não abrir o LIGHTBOX ele direciona por HTML é isso, correto? Sou um "programador" com pouca experiência. e pior ASP Classico . Sou novo aqui e precios de outra ajuda, tenho todo script do Pagseguro checkout transparente em PHP, preciso passar para ASP, alguem pode ou sabe como me auxiliar. Muito obrigado pela atenção.

alecshoppe commented 3 years ago

Boa tarde, estou com o mesmo problema citado, no celulares com android o sitema funciona, porém no IOS não abre de jeito nenhum. Tentei o código acima mencionado pelo "alecshoppe", mas ele ainda não funciona. Veja se entendi corretamente, através do código mencionado, o sistema entende que se não abrir o LIGHTBOX ele direciona por HTML é isso, correto? Sou um "programador" com pouca experiência. e pior ASP Classico . Sou novo aqui e precios de outra ajuda, tenho todo script do Pagseguro checkout transparente em PHP, preciso passar para ASP, alguem pode ou sabe como me auxiliar. Muito obrigado pela atenção.

@Lusatto tenta esse código abaixo, busquei umas plataformas antigas que fiz que usam e funcionam até hoje com o PagSeguro nesse modo Lightbox. Testei aqui e pelo menos no navegador está ativando a lightbox e ao inspecionar elemento e colocar no modo de celular ele redireciona.

Seu botão de Concluir checkout deve ativar essa função: (não se esqueça de trocar o código do pagseguro ali)

 function openPagSeguro() {
        try {
            PagSeguroLightbox(VARIAVEL_CODIGO_DE_PAGAMENTO_AQUI,  {
                success : function(transactionCode) { // Funcao que é executada se a compra for concluída 
                    window.location.href = "url para redirecionar sucesso de compra="+transactionCode;
                },
                abort : function() { // função se a compra da lightbox for cancelada pelo X 
                    window.location.href = "url para redirecionar para comprar novamente";
                }
            });
        }
        catch(err) { // Se não conseguir abrir a lightbox
            window.location.href="http://sandbox.pagseguro.uol.com.br/v2/checkout/payment.html?code="+VARIAVEL_CODIGO_DE_PAGAMENTO_AQUI; // endereço muda se for sandbox ou não
        }
    }

Se o problema for só no iOS provavelmente o problema não é nesse código em si. Testei em um site chamado browserstack.com, conectei o meu site que possui esse código do pagseguro aí e redirecionou 100%. Testei em iPhones novos e antigos e tudo certo.

alecshoppe commented 3 years ago

Boa tarde, estou com o mesmo problema citado, no celulares com android o sitema funciona, porém no IOS não abre de jeito nenhum. Tentei o código acima mencionado pelo "alecshoppe", mas ele ainda não funciona. Veja se entendi corretamente, através do código mencionado, o sistema entende que se não abrir o LIGHTBOX ele direciona por HTML é isso, correto? Sou um "programador" com pouca experiência. e pior ASP Classico . Sou novo aqui e precios de outra ajuda, tenho todo script do Pagseguro checkout transparente em PHP, preciso passar para ASP, alguem pode ou sabe como me auxiliar. Muito obrigado pela atenção.

Cara sobre o ASP, se ninguém do Google já converteu esse código vai ter que ser na unha mesmo kkkk Para estar precisando em asp creio que você está em um projeto que já seja fechado né? porque se estiver desenvolvendo um projeto do zero sai dessa, a curva de aprendizado de javascript com nodejs hoje é suavíssima, a comunidade é gigante e nem php hoje em dia não convém usar. E o conhecimento em javascript vai te proporcionar fazer backend, frontend, desktop e mobile, vale muito a pena.

pagseguro / pagseguro-sdk-php