Processar pagamentos com o Firebase
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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
- Configure uma conta do Stripe.
- Crie um projeto no Console do Firebase.
- Faça upgrade do seu projeto para o plano de preços Blaze de pagamento por uso.
- Configure a CLI Firebase para usar seu projeto com
firebase use --add.
- 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.
- Depois de implantar o app, procure uma lista de usuários e transações no Firebase console.
Configurar e implantar o app de exemplo
- Acesse o
código-fonte.
- Ative o Login do Google e do e-mail nas configurações do provedor de autenticação.
- Ative Cloud Firestore.
- Instale a CLI Firebase,
se ainda não tiver feito isso, e faça login com
firebase login.
- Configure esta amostra para usar seu projeto com
firebase use --add.
- Instale dependências localmente executando
cd functions; npm install; cd -
Adicione a chave secreta da API Stripe
à configuração do ambiente Cloud Functions:
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>
Defina a chave publicável do Stripe
em /public/javascript/app.js:
const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
Implante seu projeto usando firebase deploy. Esse comando:
- Envia todos os arquivos no diretório
public para Hosting para que seu site esteja disponível.
- Envia o código no diretório
functions para Cloud Functions for Firebase.
- 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.
- Acesse Cloud Firestore.
- 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.
Atualize sua configuração de secret do Stripe:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
Defina sua chave publicável ativa em
/public/javascript/app.js.
Reimplante Cloud Functions e Hosting para que as mudanças entrem em vigor:
firebase deploy.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2025-07-25 UTC.
[null,null,["Última atualização 2025-07-25 UTC."],[],[],null,["Using a few different Firebase features and Stripe, you can process payments in\nyour web app without building your own server infrastructure. This guide walks\nyou through customizing and deploying your own version of the open-source\n[cloud-functions-stripe-sample.web.app](//cloud-functions-stripe-sample.web.app/) example app.\n\nBefore you start, create a project in the\n[Firebase console](https://console.firebase.google.com) and set up a\n[Stripe](https://stripe.com/) account.\n| **Note:** Our partners at Stripe have introduced two new extensions, [Run Subscription Payments with Stripe](https://firebase.google.com/products/extensions/firestore-stripe-subscriptions) and [Send Invoices using Stripe](https://firebase.google.com/products/extensions/firestore-stripe-invoices), to make it possible to process payments with even less code!\n\nImplementation overview\n\n1. Set up a [Stripe](//stripe.com/) account.\n2. Create a project in the [Firebase console](//console.firebase.google.com).\n3. Upgrade your project to the [pay-as-you-go Blaze pricing plan](/pricing).\n4. Configure the Firebase CLI to use your project with `firebase use --add`.\n5. Get the [source code](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe) for the sample Firestripe app. Configure it with the right information for your project and customize the code to fit your app.\n6. Once you've deployed your app, look for a list of users and transactions in the Firebase console.\n\nSet up and deploy the sample app\n\n1. Get the [source code](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe).\n2. Enable Google \\& Email sign-in in your [authentication provider settings](//console.firebase.google.com/project/_/authentication/providers).\n3. Enable [Cloud Firestore](//console.firebase.google.com/project/_/firestore).\n4. Install the [Firebase CLI](//github.com/firebase/firebase-tools) if you haven't already, and log in with `firebase login`.\n5. Configure this sample to use your project with `firebase use --add`.\n6. Install dependencies locally by running `cd functions; npm install; cd -`\n7. Add your [Stripe API Secret Key](//dashboard.stripe.com/account/apikeys)\n to your Cloud Functions environment configuration:\n\n `firebase functions:config:set stripe.secret=\u003cYOUR STRIPE SECRET KEY\u003e`\n8. Set your [Stripe publishable key](//dashboard.stripe.com/account/apikeys)\n in [`/public/javascript/app.js`](//github.com/firebase/functions-samples/tree/main/Node-1st-gen/stripe/public/javascript/app.js#L16):\n\n `const STRIPE_PUBLISHABLE_KEY=\u003cYOUR STRIPE PUBLISHABLE KEY\u003e;`\n9. Deploy your project using `firebase deploy`. This command:\n\n 1. Sends all the files in the `public` directory to Hosting so that your website is available.\n 2. Sends the code in the `functions` directory to Cloud Functions for Firebase.\n 3. Sets security rules on your Cloud Firestore database as configured in `firestore.rules`. The provided rules only allow a user to read and write their own payments and payment methods.\n\nTest the sample app\n\nVisit your payments app's URL at\n`your-firebase-project-id.web.app` and verify that the following features work:\n\n- You can sign in via Google or Email.\n- You can add a new [Stripe test card](//stripe.com/docs/testing) and view it in the card select element.\n- You can select one of your cards and charge it.\n- You can sign out.\n\nFor comparison, see\n[cloud-functions-stripe-sample.web.app](//cloud-functions-stripe-sample.web.app/).\n\nTo provide a streamlined experience for your users, you can further customize\nyour payment page's appearance, or plug it into your existing app.\n\nView processed payments\n\nOnce you've set up and deployed your payments page, you can check the Firebase\nconsole and see a list of users along with their payment methods and payments.\n\n1. Go to [Cloud Firestore](https://console.firebase.google.com/project/_/firestore/data).\n2. Check for a list of your users and, if they added any credit cards or made any transactions, a list of those under each user.\n\nAccept live payments\n\nOnce you're ready to go live, you'll need to exchange your test keys for your\nlive keys. See the [Stripe docs](https://stripe.com/docs/keys) to learn more\nabout these keys.\n\n1. Update your Stripe secret config:\n\n `firebase functions:config:set stripe.secret=\u003cYOUR STRIPE LIVE SECRET KEY\u003e`\n2. Set your [live publishable key](//dashboard.stripe.com/account/apikeys) in\n [`/public/javascript/app.js`](//github.com/thorsten-stripe/functions-samples/blob/thorsten-stripe/update-stripe-template/stripe/public/javascript/app.js#L16).\n\n3. Redeploy both Cloud Functions and Hosting for the changes to take effect:\n `firebase deploy`."]]
