Processar pagamentos com Firebase

Usando alguns recursos diferentes do Firebase e do Stripe, você pode processar pagamentos em seu aplicativo da Web sem criar 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 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 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 exemplo. Configure-o com as informações corretas para 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 Firebase console.

Configurar e implantar o aplicativo de amostra

  1. Obtenha o código-fonte .
  2. Ative o login do Google & Email nas configurações do seu provedor de autenticação .
  3. Ative o Cloud Firestore .
  4. Instale a Firebase CLI , caso ainda não tenha feito, e faça login com firebase login .
  5. Configure esta amostra para usar seu projeto com o 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 do Cloud Functions:

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

  8. Defina sua 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 . Este comando:

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

Teste o aplicativo de amostra

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 do Stripe e visualizá-lo no elemento de seleção do 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 para 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 com suas formas de pagamento e pagamentos.

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

Aceite pagamentos ao vivo

Quando estiver pronto para entrar em operação, você precisará trocar suas chaves de teste por suas chaves ativas. Consulte os documentos 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 .