Stripe помогает интегрировать платежи в ваше приложение FlutterFlow. Используя этот платежный сервис, вы можете легко продавать товары прямо внутри вашего приложения и легко управлять транзакциями.

Используя Stripe в качестве провайдера платежей, пользователи могут покупать товары с помощью кредитной карты, Apple Pay или Google Pay.

стрип 1

Пререквизиты

Прежде чем приступить к настройке платежей, убедитесь, что вы:

  • Выполнили все шаги по настройке Firebase для вашего проекта.
  • Обновили проект Firebase до Blaze Plan.
  • Включили аутентификацию Firebase для вашего проекта.
FlutterFlow использует Firebase Cloud Functions для обработки транзакции с помощью провайдера платежей Stripe.

Интеграция Stripe

Интеграция платежей Stripe в ваше приложение включает в себя следующие шаги:

  1. Настройка платежей Stripe
  2. Настройка Apple Pay (опционально)
  3. Запуск Stripe-платежа
  4. Тестирование
  5. Выпуск в производство

Настройка оплаты Stripe

Настройка оплаты через Stripe включает в себя получение ключей от вашей учетной записи Stripe и добавление их к вашей интеграции Stripe внутри FlutterFlow.

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

Выполните следующие шаги, чтобы настроить оплату с помощью Stripe:

  • Создайте новую учетную запись Stripe здесь. Если у вас уже есть учетная запись, войдите в нее.
  • На странице приборной панели нажмите Разработчики.
  • Включите тестовый режим (в правом верхнем углу экрана), если вы хотите опробовать платежи внутри вашего приложения.
  • Выберите API-ключи в левом меню.
  • Перейдите в проект FlutterFlow и перейдите к Settings and Integrations > In App Purchases & Subscriptions > Stripe. Используйте переключатель, чтобы включить Stripe Payments.
  • Скопируйте Публикуемый ключ и Секретный ключ со страницы ключей API Stripe и вставьте их в соответствующие поля внутри FlutterFlow. Если вы используете Stripe в тестовом режиме, убедитесь, что вы вставили их в раздел Test Credentials.
  • В разделе Дополнительные настройки вам нужно указать следующее:
    • Merchant Display Name (Требуется): Введите имя продавца (вас), которое пользователь будет видеть при выполнении платежа.
    • Merchant Country Code (Требуется): Введите код вашей страны.
    • Apple Merchant ID (Необязательно): Его необходимо ввести, если вы хотите принимать платежи и через
    • Apple Pay. Инструкции по использованию Apple Pay находятся в этом разделе.
  • Нажмите Развернуть.
стрип 2

Это развернет платежную службу Stripe как Firebase Cloud Function. Теперь вы готовы запускать платежи внутри своего приложения.

Настройка Apple Pay (необязательно)

Настройка Apple Pay включает в себя следующие шаги:

  1. Создание Apple Merchant ID
  2. Загрузка сертификата платежа в Stripe
  3. Добавление Apple Merchant ID в FlutterFlow

Создание Apple Merchant ID

Чтобы создать Apple Merchant ID:

  • Перейдите в Центр разработчиков Apple и выберите Сертификаты, Идентификаторы и профили.
  • В разделе Идентификаторы выберите Merchant IDs.
  • Нажмите кнопку Добавить (+) в правом верхнем углу.
  • Введите описание и укажите идентификатор. Идентификатор обычно задается в формате merchant, за которым следует Package Name вашего приложения (вы найдете его на странице Settings and Integrations в FlutterFlow), например: merchant.com.domainname.appname.
  • Нажмите Продолжить.
  • Просмотрите настройки и нажмите Зарегистрировать.
  • Нажмите Готово.
  • Теперь снова в разделе Идентификаторы выберите Идентификаторы приложений.
  • Выберите идентификатор вашего приложения из списка.
  • В разделе Возможности отметьте опцию Обработка платежей Apple Pay.
  • Нажмите Настроить.
  • Выберите торговый счет, который вы только что создали, и нажмите Продолжить.
  • В диалоговом окне нажмите Сохранить, а затем Подтвердить.
стрип 3

Загрузка сертификата платежа в Stripe

Чтобы загрузить платежный сертификат в Stripe:

  • Во-первых, перейдите на страницу Настройки с вашей приборной панели Stripe и выберите опцию Способы оплаты.
  • Раскройте вкладку Apple Pay в разделе Кошельки.
  • Нажмите Настроить, чтобы перейти на страницу настроек Apple Pay.
  • В разделе Сертификаты iOS нажмите + Добавить новое приложение.
  • Это загрузит файл запроса на подписание сертификата (CSR) в вашу систему, нажмите Продолжить.
  • Выберите Merchant ID, с которым вы хотите связать этот сертификат, и нажмите Создать сертификат.
  • Следуйте инструкциям, чтобы загрузить файл CSR, который вы загрузили из Stripe.
  • Чтобы активировать сертификат, нажмите Активировать. Затем нажмите Загрузить, чтобы сохранить его локально.
  • Вернитесь на страницу Stripe, где отображается диалоговое окно, и нажмите Продолжить.
  • Загрузите новый файл сертификата.
  • После загрузки вы должны увидеть сертификат в списке сертификатов iOS.

Добавление Apple Merchant ID в FlutterFlow

Чтобы добавить Apple Merchant ID в FlutterFlow:

  • Зайдите в проект FlutterFlow и перейдите в раздел Настройки и интеграции > Покупки в приложении и подписки > Stripe.
  • В разделе Дополнительные настройки введите свой Apple Merchant ID.
стрип 4

Запуск оплаты Stripe

Для того чтобы инициировать платеж с помощью Stripe, необходимо использовать действие Stripe Payment Action. Чтобы узнать, как определить это действие, перейдите на следующую страницу:

Тестирование

Вы можете протестировать платежи Stripe на мобильных устройствах и в Интернете перед развертыванием. Для этого:

  • Перейдите в проект FlutterFlow и перейдите в раздел Settings and Integrations > In App Purchases & Subscriptions > Stripe.
  • Убедитесь, что параметр Is Production отключен.
  • Убедитесь, что вы ввели правильные тестовые учетные данные, такие как публикуемый ключ и секретный ключ.
  • Загрузите и запустите свой проект, как описано здесь.
  • Для тестирования покупки вы можете использовать любой из этих основных номеров тестовых карт.
стрип 5

Выпуск в производство

Прежде чем выпустить приложение в производство, выполните следующие шаги:

  • Войдите в свою учетную запись Stripe и перейдите на страницу «Разработчики».
  • Отключите тестовый режим (в правой верхней части экрана).
  • Выберите API-ключи в левом меню и скопируйте Публикуемый ключ и Секретный ключ.
  • Перейдите в проект FlutterFlow и перейдите к Settings and Integrations > In App Purchases & Subscriptions > Stripe. Используйте переключатель, чтобы включить Stripe Payments.
  • Используйте переключатель, чтобы включить Stripe Payments.
  • В разделе Production Credentials вставьте Публикуемый ключ и Секретный ключ.
  • Чтобы развернуть приложение для Android, следуйте руководству Google Play Store Deployment with Codemagic.
  • Чтобы развернуть приложение для iOS, следуйте руководству App Store Deployment with Codemagic.