Processar pagamentos com o Firebase

Com alguns recursos diferentes do Firebase e do Stripe, você pode processar pagamentos no app da Web sem construir sua própria infraestrutura de servidor. Neste guia, você vai ver como personalizar e implantar sua versão do app de exemplo cloud-functions-stripe-sample.web.app de código aberto.

Antes de começar, crie um projeto no Console do Firebase e configure uma conta do Stripe.

Visão geral da implementação

  1. Configure uma conta do Stripe.
  2. Crie um projeto no Console do Firebase.
  3. Faça upgrade do seu projeto para o plano de preços Blaze de pagamento por uso.
  4. Configure a CLI Firebase para usar seu projeto com firebase use --add.
  5. Pegue o código-fonte para o app Firestripe de exemplo. Configure-o com as informações corretas para seu projeto e personalize o código para se adequar ao app.
  6. Depois de implantar o app, procure uma lista de usuários e transações no Firebase console.

Configurar e implantar o app de exemplo

  1. Acesse o código-fonte.
  2. Ative o Login do Google e do e-mail nas configurações do provedor de autenticação.
  3. Ative Cloud Firestore.
  4. Instale a CLI Firebase, se ainda não tiver feito isso, e faça login com firebase login.
  5. Configure esta amostra para usar seu projeto com firebase use --add.
  6. Instale dependências localmente executando cd functions; npm install; cd -

  7. Adicione a chave secreta da API Stripe à configuração do ambiente Cloud Functions:

    firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>

  8. Defina a chave publicável do Stripe em /public/javascript/app.js:

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Implante seu projeto usando firebase deploy. Esse comando:

    1. Envia todos os arquivos no diretório public para Hosting para que seu site esteja disponível.
    2. Envia o código no diretório functions para Cloud Functions for Firebase.
    3. Define regras de segurança no banco de dados Cloud Firestore conforme configurado em firestore.rules. As regras fornecidas permitem que um usuário leia e grave apenas os próprios pagamentos e formas de pagamento.

Testar o app de amostra

Acesse o URL do app de pagamentos em your-firebase-project-id.web.app e verifique se os seguintes recursos funcionam:

  • É possível fazer login pelo Google ou por e-mail.
  • É possível adicionar um novo cartão de teste do Stripe e o visualizar no elemento de seleção do cartão.
  • É possível selecionar um dos seus cartões e carregá-lo.
  • É possível se desconectar.

Para uma comparação, consulte cloud-functions-stripe-sample.web.app.

Para oferecer uma experiência simplificada a seus usuários, personalize a aparência da página de pagamento ou conecte-a ao seu app existente.

Ver pagamentos processados

Depois de configurar e implantar sua página de pagamentos, verifique o Console do Firebase e veja uma lista de usuários, além dos pagamentos e das formas de pagamento de cada um.

  1. Acesse Cloud Firestore.
  2. Verifique se há uma lista de usuários e, caso eles tenham adicionado cartões de crédito ou realizado transações, se há uma lista dessas operações para cada um.

Aceitar pagamentos em tempo real

Quando estiver tudo pronto para a ativação, você vai precisar trocar as chaves de teste pelas chaves ativas. Consulte os documentos do Stripe para saber mais sobre essas chaves.

  1. Atualize sua configuração de secret do Stripe:

    firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>

  2. Defina sua chave publicável ativa em /public/javascript/app.js.

  3. Reimplante Cloud Functions e Hosting para que as mudanças entrem em vigor: firebase deploy.