Procesa pagos con Firebase
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Si usas algunas funciones de Firebase en combinación con Stripe, puedes procesar pagos en tu app web sin necesidad de crear tu propia infraestructura de servidor. En esta guía, aprenderás a implementar y personalizar tu propia versión de la app de código abierto de ejemplo cloud-functions-stripe-sample.web.app.
Antes de comenzar, crea un proyecto en Firebase console y configura una cuenta de Stripe.
Descripción general de la implementación
- Configura una cuenta de Stripe.
- Crea un proyecto en Firebase console.
- Actualiza tu proyecto al plan de precios de pago por uso de Blaze.
- Configura la CLI de Firebase para usar tu proyecto con
firebase use --add.
- Obtén el código fuente de la app de muestra de Firestripe. Configúralo con la información correspondiente de tu proyecto y personaliza el código para adaptarlo a tu app.
- Una vez que hayas implementado tu app, busca una lista de usuarios y de transacciones en Firebase console.
Configura y, luego, implementa la app de ejemplo
- Obtén el código fuente.
- Habilita el acceso a Google y a la dirección de correo electrónico en la configuración del proveedor de autenticación.
- Habilita Cloud Firestore.
- Instala la CLI de Firebase si aún no lo hiciste y accede con
firebase login.
- Configura esta muestra para usar tu proyecto con
firebase use --add.
- Ejecuta
cd functions; npm install; cd - para instalar las dependencias de forma local
Agrega tu clave secreta de API de Stripe a la configuración de tu entorno Cloud Functions:
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>
Configura tu clave publicable de Stripe en /public/javascript/app.js:
const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;
Implementa tu proyecto con firebase deploy. Este comando realiza las siguientes acciones:
- Envía todos los archivos del directorio
public a Hosting para que el sitio web esté disponible.
- Envía el código del directorio
functions a Cloud Functions for Firebase.
- Configura reglas de seguridad en la base de datos de Cloud Firestore como se configura en
firestore.rules. Las reglas proporcionadas solo permiten que un usuario lea y escriba sus propios pagos y formas de pago.
Prueba la app de muestra
Visita la URL de tu app de pagos en your-firebase-project-id.web.app y verifica que funcionen las siguientes características:
- Puedes acceder a través de Google o de correo electrónico.
- Puedes agregar una nueva tarjeta de prueba Stripe y verla en el elemento de selección de la tarjeta.
- Puedes seleccionar una de tus tarjetas y cargarla.
- Puedes salir de la sesión.
Para comparar, consulta cloud-functions-stripe-sample.web.app.
A fin de brindarles una experiencia optimizada a tus usuarios, puedes personalizar más el aspecto de tu página de pagos o incorporarla en tu app existente.
Visualiza los pagos procesados
Una vez que hayas implementado y configurado tu página de pagos, puedes consultar Firebase console y ver una lista de usuarios junto con sus formas de pago y pagos.
- Ve a Cloud Firestore.
- Busca la lista de usuarios. Si agregaron tarjetas de crédito o hicieron transacciones, verás una lista con esa información por cada usuario.
Acepta pagos reales
Cuando estés listo para recibir pagos reales, deberás intercambiar las claves de prueba por tus claves activas. Consulta la documentación de Stripe para obtener más información sobre estas claves.
Actualiza la configuración del secreto de Stripe:
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>
Configura tu clave publicable en /public/javascript/app.js.
Vuelve a implementar Cloud Functions y Hosting para que se apliquen los cambios: firebase deploy.
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-07-25 (UTC)
[null,null,["Última actualización: 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`."]]
