Processar pagamentos com Firebase

Usando alguns recursos diferentes do Firebase e do Stripe, você pode processar pagamentos em seu aplicativo da web sem construir sua própria infraestrutura de servidor. Este guia orienta você na personalização e implantação de sua própria versão do aplicativo de exemplo de código aberto cloud-functions-stripe-sample.web.app .

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

Visão geral da implementação

  1. Configure uma conta Stripe .
  2. Crie um projeto no console do Firebase .
  3. Ative o faturamento para seu projeto e configure a Firebase CLI para usar seu projeto com firebase use --add .
  4. Obtenha o código-fonte do aplicativo Firestripe de amostra. Configure-o com as informações corretas para o seu projeto e personalize o código para se adequar ao seu aplicativo.
  5. Depois de implantar seu aplicativo, procure uma lista de usuários e transações no Console do Firebase.

Configurar e implantar o aplicativo de exemplo

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

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

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

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

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

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

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

Teste o aplicativo de exemplo

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

  • Você pode fazer login via Google ou e-mail.
  • Você pode adicionar um novo cartão de teste Stripe e visualizá-lo no elemento de seleção de cartão.
  • Você pode selecionar um de seus cartões e carregá-lo.
  • Você pode sair.

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

Para fornecer uma experiência simplificada aos seus usuários, você pode personalizar ainda mais a aparência da sua página de pagamento ou conectá-la ao seu aplicativo existente.

Ver pagamentos processados

Depois de configurar e implantar sua página de pagamentos, você pode verificar o console do Firebase e ver uma lista de usuários junto com suas formas de pagamento e pagamentos.

  1. Acesse o Cloud Firestore .
  2. Verifique uma lista de seus usuários e, se eles adicionaram algum cartão de crédito ou fizeram alguma transação, uma lista daqueles em cada usuário.

Aceite pagamentos em tempo real

Quando estiver pronto para entrar no ar, você precisará trocar suas chaves de teste pelas chaves ativas. Consulte a documentação do Stripe para saber mais sobre essas chaves.

  1. Atualize sua configuração secreta 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 o Cloud Functions e o Hosting para que as alterações entrem em vigor: firebase deploy .