Procesar pagos con Firebase

Utilizando algunas funciones diferentes de Firebase y Stripe, puedes procesar pagos en tu aplicación web sin crear tu propia infraestructura de servidor. Esta guía le guiará en la personalización e implementación de su propia versión de la aplicación de ejemplo de código abierto cloud-functions-stripe-sample.web.app .

Antes de comenzar, cree un proyecto en Firebase console y configure una cuenta de Stripe .

Descripción general de la implementación

1. Configura una cuenta de Stripe .
2. Crea un proyecto en Firebase console .
3. Habilite la facturación para su proyecto y configure Firebase CLI para usar su proyecto con firebase use --add .
4. Obtenga el código fuente de la aplicación Firestripe de muestra. Configúrelo con la información correcta para su proyecto y personalice el código para que se ajuste a su aplicación.
5. Una vez que hayas implementado tu aplicación, busca una lista de usuarios y transacciones en Firebase console.

Configurar e implementar la aplicación de muestra

1. Obtenga el código fuente .
2. Habilite el inicio de sesión de Google y correo electrónico en la configuración de su proveedor de autenticación .
3. Habilite Cloud Firestore .
4. Instale Firebase CLI si aún no lo ha hecho e inicie sesión con firebase login .
5. Configure este ejemplo para usar su proyecto con firebase use --add .
6. Instale dependencias localmente ejecutando cd functions; npm install; cd -

7. Agregue su clave secreta de API de Stripe a la configuración de su entorno de Cloud Functions:

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

8. Configure su clave publicable de Stripe en /public/javascript/app.js :

   const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

9. Implemente su proyecto usando firebase deploy . Este comando:

   1. Envía todos los archivos del directorio public al Hosting para que tu sitio web esté disponible.
   2. Envía el código en el directorio functions a Cloud Functions para Firebase.
   3. Establece reglas de seguridad en su base de datos de Cloud Firestore según lo configurado en firestore.rules . Las reglas proporcionadas solo permiten al usuario leer y escribir sus propios pagos y métodos de pago.

Pruebe la aplicación de muestra

Visita la URL de tu aplicación de pagos en your-firebase-project-id.web.app y verifica que las siguientes funciones funcionen:

• Puede iniciar sesión a través de Google o correo electrónico.
• Puede agregar una nueva tarjeta de prueba de Stripe y verla en el elemento de selección de tarjeta.
• Puedes seleccionar una de tus tarjetas y cargarla.
• Puedes cerrar sesión.

Para comparar, consulte cloud-functions-stripe-sample.web.app .

Para brindar una experiencia optimizada a sus usuarios, puede personalizar aún más la apariencia de su página de pago o conectarla a su aplicación existente.

Ver pagos procesados

Una vez que haya configurado e implementado su página de pagos, puede consultar la consola Firebase y ver una lista de usuarios junto con sus métodos de pago y pagos.

1. Vaya a Cloud Firestore .
2. Verifique una lista de sus usuarios y, si agregaron alguna tarjeta de crédito o realizaron alguna transacción, una lista de aquellos debajo de cada usuario.

Aceptar pagos en vivo

Una vez que esté listo para comenzar a funcionar, deberá intercambiar sus claves de prueba por sus claves en vivo. Consulte los documentos de Stripe para obtener más información sobre estas claves.

1. Actualice su configuración secreta de Stripe:

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

2. Configure su clave publicable en vivo en /public/javascript/app.js .

3. Vuelva a implementar Cloud Functions y Hosting para que los cambios surtan efecto: firebase deploy .