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 .