Stripe

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

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

Предварительные требования

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

1. Завершили настройку Firebase для вашего проекта.
2. Включили аутентификацию Firebase для вашего проекта.
3. Обновили ваш проект Firebase до Blaze Plan, поскольку для обработки транзакций используются облачные функции Firebase.

Интеграция Stripe

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

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

1. Настройка платежей Stripe

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

warning

Перед выпуском в продакшн сначала протестируйте платежи в тестовом режиме. Инструкции ниже объясняют, как получить тестовые ключи.

Следуйте инструкциям ниже, чтобы настроить платежи с помощью Stripe:

1. Создайте новую учетную запись Stripe здесь. Если у вас уже есть учетная запись, войдите.
2. На странице панели управления нажмите Developers.
3. Включите Test Mode (в правом верхнем углу экрана).
4. Перейдите на вкладку API keys.
5. Вернитесь к проекту FlutterFlow и перейдите в Settings and Integrations > In App Purchases & Subscriptions > Stripe. Включите переключатель Enable Stripe Payments.
6. Скопируйте Publishable Key и Secret Key с страницы API ключей Stripe и вставьте их в соответствующие поля в FlutterFlow. Если вы используете Stripe в тестовом режиме, убедитесь, что вставили их в раздел Test Credentials.
7. В разделе Additional Settings необходимо указать следующее:
   1. Merchant Display Name (обязательно): введите название продавца (вас), которое будет отображаться пользователю при оплате.
   2. Merchant Country Code (обязательно): введите код вашей страны. Это должен быть 3-значный ISO-код страны, например, USA, IND, NGA.
   3. Apple Merchant ID (необязательно): вы должны указать это, если хотите принимать платежи через Apple Pay. Инструкции по настройке Apple Pay находятся в этом разделе.
8. Нажмите Deploy.

Это развернет платежный сервис Stripe как облачную функцию Firebase. Теперь вы можете инициировать платежи в приложении.

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

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

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

2.1 Создание Apple Merchant ID

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

1. Перейдите в Центр разработчиков Apple и выберите Certificates, Identifiers & Profiles.
2. В разделе Identifiers выберите Merchant IDs.
3. Нажмите Добавить (+) в правом верхнем углу.
4. Введите Description и укажите Identifier. Обычно идентификатор указывается в формате merchant, за которым следует Package Name вашего приложения (вы найдете его на странице Settings and Integrations в FlutterFlow), например, merchant.com.domainname.appname.
5. Нажмите Continue.
6. Проверьте настройки и нажмите Register.
7. Нажмите Done.
8. Теперь снова в разделе Identifiers выберите Apps IDs.
9. Выберите идентификатор вашего приложения из списка.
10. В разделе Capabilities установите галочку напротив Apple Pay Payment Processing.
11. Нажмите Configure.
12. Выберите учетную запись продавца, которую вы только что создали, и нажмите Continue.
13. Нажмите Save, затем Confirm в диалоговом окне.

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

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

1. Сначала перейдите на страницу Settings из вашей панели управления Stripe и выберите Payment methods.
2. Разверните вкладку Apple Pay в разделе Wallets.
3. Нажмите Configure, чтобы перейти на страницу Apple Pay settings.
4. В разделе iOS certificates нажмите + Add new application.
5. Это загрузит файл Certificate Signing Request (CSR) на ваш компьютер. Нажмите Continue.
6. Выберите Merchant ID, с которым хотите связать этот сертификат, и нажмите Create Certificate.
7. Следуйте инструкциям для загрузки CSR файла, который вы загрузили из Stripe.
8. Чтобы активировать сертификат, нажмите Activate, затем Download для сохранения локально.
9. Вернитесь на страницу Stripe, где отображается диалоговое окно, и нажмите Continue.
10. Загрузите новый файл сертификата.
11. После загрузки сертификат будет отображен в разделе iOS certificates.

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

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

1. Перейдите в Settings and Integrations > In App Purchases & Subscriptions > Stripe.
2. В разделе Additional Settings введите ваш Apple Merchant ID.

3. Инициирование Stripe платежа [Action]

Чтобы инициировать платеж с использованием Stripe, необходимо использовать действие Stripe Payment.

Следуйте инструкциям ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, Container, Button и т. д.), к которому хотите добавить действие.
2. Выберите Actions на панели свойств (правое меню) и нажмите Open. Это откроет Action Flow Editor в новом всплывающем окне.
3. Нажмите + Add Action.
4. В правой части найдите и выберите действие Stripe Payment (в разделе Integrations).
5. В разделе Amount введите или используйте переменную для указания общей суммы платежа. Значение должно быть указано в наименьшей единице валюты. Например, $24.99 следует указать как 2499 (в виде целого числа, иначе значение будет округлено), тогда как ¥1925 можно указать просто как 1925. Подробности можно найти на этой странице.
6. Введите Currency Code для суммы, например, USD, EUR, BRL. Убедитесь, что вводите корректный код валюты, иначе транзакция не пройдет.
7. Далее нужно указать Customer Email (обязательно) и Customer Name (опционально) для транзакции. Вы можете либо использовать переменную, либо ввести значение вручную. Если вы используете аутентификацию, эти два значения можно получить из Authenticated User.
8. Укажите Description для записи о покупке, как для вас, так и для пользователя.
9. Чтобы включить Google Pay или Apple Pay как метод оплаты, включите соответствующий переключатель. Для использования Apple Pay необходимо настроить Merchant ID, следуя инструкциям здесь.
10. Выберите Payment Sheet Theme среди System Default, Light Theme или Dark Theme.
11. Укажите Primary Button Color и Button Text Color для использования в диалоге оплаты.
12. Введите Output Variable Name, где будет храниться ID платежа после успешной транзакции. Позднее вы сможете использовать эту переменную в любом месте на странице или передать её на другую страницу приложения.

warning

Убедитесь, что пользователь прошел аутентификацию перед инициацией Stripe Payment Action. В противном случае это приведет к ошибке.

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

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

1. Перейдите в проект FlutterFlow и откройте Settings and Integrations > In App Purchases & Subscriptions > Stripe.
2. Убедитесь, что Is Production отключен.
3. Убедитесь, что вы ввели корректные Test Credentials, такие как Publishable Key и Secret Key.
4. Скачайте и запустите ваш проект.
5. Для тестирования покупки вы можете использовать любые из этих базовых тестовых номеров карт.

5. Выпуск в продакшн

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

1. Войдите в свою учетную запись Stripe и откройте страницу Developers.
2. Отключите Test Mode (в правом верхнем углу экрана).
3. Выберите API keys в левом меню и скопируйте Publishable Key и Secret Key.
4. Вернитесь в FlutterFlow и в разделе Production Credentials вставьте Publishable Key и Secret Key.
5. Для развертывания Android приложения следуйте руководству по публикации в Google Play Store.
6. Для развертывания iOS приложения следуйте руководству по публикации в App Store.

---

FAQ

Я получаю сообщение "Error: Unknown error occurred"

При возникновении ошибки "Error: Unknown error occurred" попробуйте выполнить следующие действия для устранения проблемы:

1. Настройка Stripe: В настройках Stripe в FlutterFlow убедитесь, что код страны продавца указан как трехзначный код, например "USA" вместо "US". Если нужно, удалите ранее развернутые функции в консоли Firebase и разверните их снова после обновления кода страны.
2. Требование аутентификации пользователя: Для платежей Stripe требуется активная сессия аутентифицированного пользователя. Убедитесь, что вы инициируете действие Stripe после успешного входа пользователя в приложение.
3. Права доступа облачных функций: Убедитесь, что вашим облачным функциям назначено разрешение 'Cloud Functions Invoker' для всех пользователей (allUsers) в консоли Google Cloud. Это разрешение обычно назначается по умолчанию, но лучше проверить.