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 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

  1. 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.
  2. 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.
  3. 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

  1. Para instalar Firebase CLI, sigue los pasos que se indican en la sección de configuración de Firebase CLI.
  2. Una vez que haya instalado Firebase CLI, ejecuta firebase init para crear una app de shell.
  3. Selecciona Database, Functions y Hosting. Después, selecciona tu proyecto de Firebase en la lista de proyectos.

Prueba si funciona

  1. Para implementar tu app de shell, ejecuta firebase deploy.
  2. Comprueba que tu app se ejecute.

Obtén y configura la app de muestra

Qué hacer con la app de muestra

  1. Obtén el código fuente de Firestripe.
  2. Ejecuta npm install -g desde el directorio functions para instalar las bibliotecas de Node.js localmente.

  3. 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

  1. 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".
  2. Ejecuta firebase deploy para implementar los cambios nuevos.

Prueba si funciona

Visita la URL de tu app de pagos en your-firebase-project-id.firebaseapp.com 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

  1. Ve a Database.
  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.