Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Обработка платежей с помощью 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. Включить облачный магазин FireStore .
  4. Установите интерфейс командной строки Firebase , если вы еще этого не сделали, и войдите в систему с помощью 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 каталоге на хостинг, чтобы ваш сайт был доступен.
    2. Отправляет код из каталога functions в Cloud Functions для Firebase.
    3. Устанавливает правила безопасности в вашей базе данных Cloud Firestore в соответствии с настройками в firestore.rules . Предоставленные правила позволяют пользователю только читать и записывать свои платежи и способы оплаты.

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

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

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

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

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

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

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

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

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

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

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

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

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

  3. Повторно разверните облачные функции и хостинг, чтобы изменения вступили в силу: firebase deploy .