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. Com este guia, você aprende a personalizar e implantar sua própria versão do exemplo do Firestripe de código aberto.

Antes de começar, crie um projeto no Console do Firebase e configure uma conta do Stripe (em inglês).

Visão geral da implementação

  1. Use o Firebase Hosting para configurar e implantar o app com os recursos do Firebase necessários para executá-lo. Com a Firebase CLI, implante um app shell com Cloud Functions e Firebase Realtime Database ativados diretamente a partir da linha de comando.
  2. Receba o código-fonte do app de amostra do Firestripe. Configure-o com as informações corretas para seu projeto e personalize o código para se adequar ao app.
  3. Depois de implantar o app, procure uma lista de usuários e transações no Firebase console.

Configurar e implantar o app

Comece com um app shell que inclua todos os recursos necessários do Firebase associados ao projeto do Firebase. Em seguida, implante o app shell e verifique se ele está configurado corretamente.

O que fazer a partir da Firebase CLI

  1. Para instalar a Firebase CLI, siga as etapas na seção Configuração da Firebase CLI.
  2. Depois de instalar a Firebase CLI, crie um app shell executando firebase init.
  3. Selecione Database, Functions e Hosting. Em seguida, selecione o projeto do Firebase na lista de projetos.

Verificar se funciona

  1. Para implantar o app shell, execute o firebase deploy.
  2. Verifique se o app está em execução.

Obter e configurar o app de amostra

O que fazer com o app de amostra

  1. Consiga o código-fonte para o Firestripe.
  2. Instale localmente as bibliotecas do Node.js, executando npm install -g a partir do diretório functions.
  3. Configure as chaves do Firebase e do Stripe no arquivo public/index.html:

      firebase.initializeApp({
        apiKey: "your-web-api-key",
        authDomain: "your-firebase-project-id.firebaseapp.com",
        databaseURL: "https://your-firebase-project-id.firebaseio.com",
        storageBucket: "your-firebase-project-id.appspot.com",
        messagingSenderId: "your-cloud-messaging-sender-id"
      });
      Stripe.setPublishableKey('your-stripe-publishable-key');
    

O que fazer a partir da Firebase CLI

  1. Para configurar a chave de servidor do Stripe, execute o seguinte comando no diretório do seu projeto: firebase functions:config:set stripe.token="your-test-secret-key".
  2. Envie as novas alterações executando firebase deploy.

Verificar o funcionamento

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

  • Seu nome de usuário é exibido na página.
  • Você pode inserir um cartão de crédito e adicioná-lo.
  • Você pode criar uma Cobrança.
  • Você pode sair.

Para uma comparação, teste o Firestripe de amostra.

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

Após configurar e implantar a página de pagamentos, verifique o Firebase console e veja uma lista de usuários e transações.

O que fazer no Firebase console

  1. Acesse o Banco de dados.
  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.