bergergit / ionic-pagseguro

Módulo para integração com API de Pagamento Transparente do PagSeguro
22 stars 22 forks source link

Documentação #2

Closed fjcunha closed 6 years ago

fjcunha commented 6 years ago

Existe alguma documentação ou um app de exemplo para seguir? Estou fazendo integração do meu app com pagseguro mas nem sei por onde começar, depois da instalação.

Se puderem me ajudar com um exemplo ou algo do tipo gostaria de contribuir para um guideline ou algo do tipo para o projeto.

bergergit commented 6 years ago

Fabrício, meu app está funcionando com essa Api. Existe um pouco de server side que fiz em nodejs rodando no firebase functions. Estou em viagem no momento, mas qdo voltar vou melhorar a documentação e adicionar um gist do código server side

Em seg, 12 de mar de 2018 13:20, Fabrício Júnio notifications@github.com escreveu:

Existe alguma documentação ou um app de exemplo para seguir? Estou fazendo integração do meu app com pagseguro mas nem sei por onde começar, depois da instalação.

Se puderem me ajudar com um exemplo ou algo do tipo gostaria de contribuir para um guideline ou algo do tipo para o projeto.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bergergit/ionic-pagseguro/issues/2, or mute the thread https://github.com/notifications/unsubscribe-auth/ACU3qgeTMpSiIBrPtE3v7RUJaUt9KR_7ks5tdrxlgaJpZM4SnJMY .

Stiveknx commented 6 years ago

@bergergit , O seu app funciona no IOS também? E aprovou na apple store por este método?

mauricionr commented 6 years ago

Eu tentei usar, mas desisti, acabei criando uma funcao para carregar o script do pagseguro e boa 🤔

loadScript()
    return new Promise((resolve) => {
      let script: HTMLScriptElement = document.createElement('script');
      script.addEventListener('load', r => resolve());
      script.src = 'https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js'
      document.head.appendChild(script);
    });
  }
bergergit commented 6 years ago

Eu desabilitei compras quando o aplicativo é iOS.

Na Apple Store voce pode usar outros métodos de pagamento alem do ApplePay, se for pra vender bens materiais (ingressos, produtos, etc) Se for pra vender serviços, apenas Apple Pay

Eu fiz exatamente como o Spotify faz: nao é possivel assinar o pacote Premium diretamente pelo aplicativo. Porem voce pode entrar na plataforma via site, e fazer a assinatura.

2018-04-04 10:58 GMT-03:00 André Stein notifications@github.com:

@bergergit https://github.com/bergergit , O seu app funciona no IOS também? E aprovou na apple store por este método?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bergergit/ionic-pagseguro/issues/2#issuecomment-378609244, or mute the thread https://github.com/notifications/unsubscribe-auth/ACU3qrRujd1JFf3u2h4dhtvdDc-6KgVuks5tlNF8gaJpZM4SnJMY .

-- Fábio Berger Tel: (11) 957-727-362 www.bergermobile.com.br

fjcunha commented 6 years ago

Eu dei uma desmontada nos arquivos e consegui aproveitar muita coisa mas adaptei para a minha própria estrutura, estou usando esse guide para implementar o checkout transparente. http://download.uol.com.br/pagseguro/docs/pagseguro-checkout-transparente.pdf

o app ainda está em desenvolvimento então não sei como vai ser aprovação na apple store.

mauricionr commented 6 years ago

pessoal, consegui fazer funcionar o checkout transparente no ios, depois de tanto apanhar e debugar a lib do pagseguro cheguei a conclusao que era so adicionar um allow-navigation no config.xml .

meu config.xml ficou assim

<access origin="*" />
<allow-navigation href="*" />
mauricionr commented 6 years ago

agora se vai ser aprovado na apple store e outros 500 :trollface:

bergergit commented 6 years ago

Atualizei a documentação. Acredito que vá ajudar para dar uma base de como utilizar esta biblioteca para integração com Checkout Transparente do PagSeguro. Possivelmente, cada projeto terá que adapta-la para os seus próprios requerimentos.

matheusleite commented 6 years ago

Legal @bergergit ! Consegui instalar aqui. Tive que instalar o moment e o mydatepicker tbm mas foi tranquilo. Coloquei o pagseguro-component no Html e também fiz a Cloud Function para criar a session.

Agora estou tendo outro erro:

No provider for PagSeguroService!

Consegue me ajudar?

bergergit commented 6 years ago

Voce tem que importar o PagSeguroModule no seu módulo

import { PagSeguroModule } from 'ionic-pagseguro';
@NgModule({
  declarations: [
    MyPage,
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    PagSeguroModule.forChild()
  ],
  providers: [  ],
  exports: [ MyPage ]
})
matheusleite commented 6 years ago

@bergergit valeu pela resposta! Mas permanece o mesmo erro....

NullInjectorError: No provider for PagSeguroService!

mauricionr commented 6 years ago

ele ta no seus providers?

bergergit commented 6 years ago

Ah, no seu app.module vc tem que adicionar o PagSeguroModel.forRoot()

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,

    PagSeguroModule.forRoot()
  ],

...
matheusleite commented 6 years ago

Valeu mais uma vez! @bergergit

Sua função do Cloud Functions está funcionando? A minha aqui após 60s retorna um timeout.

Já estou no plano Blaze do firebase (pra fazer requests externas) e instalei as dependencias.

bergergit commented 6 years ago

Funciona sim. Realmente confirme aí se o seu plano Blaze está ativo pois é necessário mesmo para poder fazer requests externas.

A URL que estou usando (functions.config().pagseguro.session_url), eu defini em uma Environment configuration. Veja se sua configuração aponta para uma URL valida.

firebase functions:config:set pagseguro.session_url="https://ws.pagseguro.uol.com.br/v2/sessions"

(Mais detalhes sobre como definir uma environment configuration, aqui: https://firebase.google.com/docs/functions/config-env)

Outro detalhe: quando eu fiz as functions, estava usando o SDK em versao Beta, e ainda nao migrei. Veja se no seu caso, voce nao precisa fazer alguma modificaçao. O guia de migração para o SDK 1.0 está aqui: https://firebase.google.com/docs/functions/beta-v1-diff

matheusleite commented 6 years ago

Obrigado! @bergergit conseguir rodar a Cloud Function no postman! Já tinha feito as configurações no functions.config().

Ele retorna:

{ "session": { "id": "beffc31462544225be8b80beea99fe78" } }

Mas quando ele faz a request pra chamar a cloud funcition no App ele me retorna no console:

Erro ao iniciar sessao

Depurando parece que ele faz uma XMLHttpRequest. Só que a cloud function retorna em JSON. Coloquei a cloud function pra retornar XML também mas vem o mesmo erro. :(

bergergit commented 6 years ago

O retorno da function é exatamente este aí. Então parece que ela está funcionando OK! Deve estar dando problema em alguma outra parte do seu código. Não sei se você modificou a biblioteca, mas ela já inicia a session e adiciona isso no PagSeguroDirectPayment.setSessionId(this.sessionId);

Quando voce adiciona isso no seu código:

// pre-loading script
setTimeout(() => {
        this.pagSeguroService.loadScript();
}, 1000);

Aí o component do PagSeguro já faz isso:

// carrega o .js do PagSeguro
    this.pagSeguroService.loadScript().then(_ => {
      this.pagSeguroService.startSession().then(response => {
        let result = response.json();
        this.sessionId = result.session.id;
        PagSeguroDirectPayment.setSessionId(this.sessionId);

        // recupera as opçoes de pagamento
        this.pagSeguroService.getPaymentMethods(this.amount || 100).then(response => {
          this.paymentMethods = response.paymentMethods;
        }).catch(error => {
          console.error('error', error);
        });
      }).catch(error => {
        console.error('Erro ao iniciar sessao', error);
      });
    });

Inspecione a invocação da function no Chrome para ver exatamente o que está retornando, qual código de erro, etc.

matheusleite commented 6 years ago

Obrigado pela ajuda novamente @bergergit ! O problema meu é que eu tinha desativado o CORS no Cloud Functions. Pro meu CORS funcionar precisava adicionar um parametro que era:

const cors = require('cors')({origin: true});

Tenho outras dúvidas, no navegador Web o formulário aparece mas quando compilo o aplicativo só fica na tela de carregando... Tem alguma ideia do que pode ser?

Você usa também uma Cloud Function para fazer o checkout, certo?! Pode compartilhar um exemplo?

Você só pega o PagSeguroData e manda nessa Function?

Agradeço mais uma vez.

bergergit commented 6 years ago

Voce tem que inspecionar no Chrome Developer Tools pra ver qual erro que ta dando e por que ele nao sai do Carregando... Eu nao compartilhei o código de checkout de propósito para nao revelar questões de segurança do aplicativo. Mas o principio é por aí sim: tudo que voce precisa para o Checkout está no PagSeguroData. Com isso sua cloud function pode fazer o request para o checkout transparente do PagSeguro

jtpdev commented 5 years ago

@matheusleite como você resolveu esse problema do timeout?