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 personalizar e implementar tu propia versión de la app de muestra de código abierto Firestripe.
Antes de comenzar, crea un proyecto en Firebase console y configura una cuenta de Stripe.
Descripción general de la implementación
- Usa Firebase Hosting para configurar e implementar tu app con las funciones de Firebase que necesitas para ejecutarla. Con Firebase CLI, puedes implementar una app de shell con Cloud Functions y Firebase Realtime Database habilitados directamente desde la línea de comandos.
- 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 e implementa tu app
Comienza con una app de shell que incluya todas las funciones de Firebase que necesites, asociadas con tu proyecto de Firebase. Después, implementa la app de shell y comprueba que esté configurada correctamente.
Qué hacer desde Firebase CLI
- Para instalar Firebase CLI, sigue los pasos que se indican en la sección de configuración de Firebase CLI.
- Una vez que haya instalado Firebase CLI, ejecuta
firebase init
para crear una app de shell. - Selecciona Database, Functions y Hosting. Después, selecciona tu proyecto de Firebase en la lista de proyectos.
Prueba si funciona
- Para implementar tu app de shell, ejecuta
firebase deploy
. - Comprueba que tu app se ejecute.
Obtén y configura la app de muestra
Qué hacer con la app de muestra
- Obtén el código fuente de Firestripe.
- Ejecuta
npm install -g
desde el directoriofunctions
para instalar las bibliotecas de Node.js localmente. Configura las claves de Firebase y de Stripe en el archivo
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');
Qué hacer desde Firebase CLI
- Para configurar la clave del servidor de Stripe, ejecuta el siguiente comando desde el directorio de tu proyecto:
firebase functions:config:set stripe.token="your-test-secret-key"
. - Ejecuta
firebase deploy
para implementar los cambios nuevos.
Prueba si funciona
Visita la URL de tu app de pagos en
y comprueba lo siguiente:
- Tu nombre de usuario aparece en la página.
- Puedes ingresar una tarjeta de crédito y agregarla.
- Puedes crear un nuevo cargo.
- Puedes salir de la sesión.
Para comparar, prueba el ejemplo de Firestripe.
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 configurado e implementado tu página de pagos, puedes consultar Firebase console y visualizar una lista de usuarios y transacciones.
Qué hacer en Firebase console
- Ve a Database.
- 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.