Procesar pagos con Firebase

Usando algunas características diferentes de Firebase y Stripe, puede procesar pagos en su aplicación web sin construir su propia infraestructura de servidor. Esta guía lo guiará a través de 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 la consola de Firebase y configure una cuenta de Stripe .

Descripción general de la implementación

  1. Configura una cuenta de Stripe .
  2. Cree un proyecto en la consola de Firebase .
  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 haya implementado su aplicación, busque una lista de usuarios y transacciones en la consola de Firebase.

Configurar e implementar la aplicación de muestra

  1. Obtén 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. Habilita Cloud Firestore .
  4. Instale Firebase CLI si aún no lo ha hecho e inicie sesión con firebase login .
  5. Configure esta muestra para usar su proyecto con firebase use --add .
  6. Instale dependencias localmente ejecutando cd functions; npm install; cd -

  7. Agregue su clave secreta 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. Implementa tu proyecto usando firebase deploy . Este comando:

    1. Envía todos los archivos del directorio public a Hosting para que tu web esté disponible.
    2. Envía el código en el directorio de 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 que un usuario lea y escriba sus propios pagos y métodos de pago.

Probar la aplicación de muestra

Visite la URL de su aplicación de pagos en your-firebase-project-id.web.app y verifique 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 de Firebase y ver una lista de usuarios junto con sus métodos de pago y pagos.

  1. Ve a Cloud Firestore .
  2. Busque 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.

Acepte pagos en vivo

Una vez que esté listo para comenzar, deberá cambiar sus claves de prueba por sus claves activas. 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 .