Procesa pagos con Firebase

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

  1. Configura una cuenta de Stripe.
  2. Crea un proyecto en Firebase console.
  3. Habilita la facturación para tu proyecto y configura Firebase CLI para usar tu proyecto con firebase use --add.
  4. 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.
  5. 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

  1. Obtén el código fuente.
  2. Habilita el acceso a Google y a la dirección de correo electrónico en la configuración del proveedor de autenticación.
  3. Habilita Cloud Firestore.
  4. Instala Firebase CLI si aún no lo hiciste y accede con firebase login.
  5. Configura esta muestra para usar tu proyecto con firebase use --add.
  6. Ejecuta cd functions; npm install; cd - para instalar las dependencias de forma local

  7. Agrega tu clave secreta de API de Stripe a tu configuración de entorno de Cloud Functions:

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

  8. Configura tu clave publicable de Stripe en /public/javascript/app.js:

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Implementa tu proyecto con firebase deploy. Este comando realiza las siguientes acciones:

    1. Envía todos los archivos del directorio public a Hosting para que el sitio web esté disponible.
    2. Envía el código del directorio functions a Cloud Functions para Firebase.
    3. 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.

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

  1. Actualiza la configuración del secreto de Stripe:

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

  2. Configura tu clave publicable en /public/javascript/app.js.

  3. Vuelve a implementar Cloud Functions y Hosting para que se apliquen los cambios: firebase deploy.