Обработка платежей с помощью Firebase

Используя несколько различных функций Firebase и Stripe, вы можете обрабатывать платежи в своем веб-приложении, не создавая собственную серверную инфраструктуру. В этом руководстве рассказывается, как настроить и развернуть собственную версию примера приложения cloud-functions-stripe-sample.web.app с открытым исходным кодом.

Прежде чем начать, создайте проект в консоли Firebase и настройте учетную запись Stripe .

Обзор реализации

  1. Настройте учетную запись Stripe .
  2. Создайте проект в консоли Firebase .
  3. Включите биллинг для вашего проекта и настройте интерфейс командной строки Firebase для использования вашего проекта с помощью firebase use --add .
  4. Получите исходный код примера приложения Firestripe. Настройте его, указав нужную информацию для вашего проекта, и настройте код в соответствии с вашим приложением.
  5. После развертывания приложения найдите список пользователей и транзакций в консоли Firebase.

Настройка и развертывание примера приложения

  1. Получите исходный код .
  2. Включите вход в Google и электронную почту в настройках вашего поставщика аутентификации .
  3. Включите Cloud Firestore .
  4. Установите Firebase CLI, если вы еще этого не сделали, и войдите в систему, используя firebase login .
  5. Настройте этот пример для использования вашего проекта с firebase use --add .
  6. Установите зависимости локально, запустив cd functions; npm install; cd -

  7. Добавьте секретный ключ Stripe API в конфигурацию среды Cloud Functions :

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

  8. Установите публикуемый ключ Stripe в /public/javascript/app.js :

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. Разверните свой проект с помощью firebase deploy . Эта команда:

    1. Отправляет все файлы в public каталоге на Hosting , чтобы ваш сайт был доступен.
    2. Отправляет код из каталога functions в Cloud Functions for Firebase .
    3. Устанавливает правила безопасности в вашей базе данных Cloud Firestore , как указано в firestore.rules . Предоставленные правила позволяют пользователю только читать и писать свои собственные платежи и способы оплаты.

Протестируйте пример приложения

Посетите URL-адрес вашего платежного приложения по адресу your-firebase-project-id.web.app и убедитесь, что следующие функции работают:

  • Вы можете войти через Google или электронную почту.
  • Вы можете добавить новую тестовую карту Stripe и просмотреть ее в элементе выбора карты.
  • Вы можете выбрать одну из своих карт и оплатить ее.
  • Вы можете выйти из системы.

Для сравнения см. cloud-functions-stripe-sample.web.app .

Чтобы упростить работу ваших пользователей, вы можете дополнительно настроить внешний вид своей платежной страницы или подключить ее к существующему приложению.

Просмотр обработанных платежей

После того как вы настроили и развернули страницу платежей, вы можете проверить консоль Firebase и увидеть список пользователей, а также их способы оплаты и платежи.

  1. Перейдите в Cloud Firestore .
  2. Проверьте список ваших пользователей и, если они добавили какие-либо кредитные карты или совершили какие-либо транзакции, список тех, кто находится под каждым пользователем.

Принимайте живые платежи

Когда вы будете готовы к запуску, вам нужно будет обменять тестовые ключи на активные ключи. Дополнительную информацию об этих ключах см. в документации Stripe .

  1. Обновите секретную конфигурацию Stripe:

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

  2. Установите свой публикуемый ключ в /public/javascript/app.js .

  3. Повторно разверните Cloud Functions и Hosting , чтобы изменения вступили в силу: firebase deploy .