Stripe

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

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

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

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

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

Интеграция 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. Используйте переключатель, чтобы включить платежи Stripe.
6. Скопируйте Publishable Key и Secret Key со страницы ключей API Stripe и вставьте их в соответствующие поля в FlutterFlow. Если вы используете Stripe в тестовом режиме, убедитесь, что вставляете их в раздел Test Credentials.
7. В разделе Additional Settings укажите следующее:
   1. Merchant Display Name (Обязательно): Введите имя продавца (ваше), которое увидит пользователь при выполнении платежа.
   2. Merchant Country Code (Обязательно): Введите код вашей страны. Это должен быть 2-значный ISO-код страны, например US, IN или AU.
   3. Apple Merchant ID (Необязательно): Введите это, если хотите принимать платежи через Apple Pay. Инструкции по использованию Apple Pay приведены в этом разделе.
8. Нажмите Deploy.

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

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. Нажмите кнопку Add (+) в правом верхнем углу.
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.
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. В противном случае возникнет ошибка.

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.

---

Часто задаваемые вопросы

Я получаю ошибку "Error: Unknown error occurred"

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

1. Корректировка настроек Stripe: В настройках Stripe в FlutterFlow проверьте, что код страны продавца — это 3-значный код, например "USA" вместо "US". При необходимости удалите ранее развернутые функции в консоли Firebase и переразверните их после обновления кода страны.
2. Требование аутентификации пользователя: Платежи Stripe требуют сессии аутентифицированного пользователя. Убедитесь, что вы запускаете действие Stripe после успешного входа пользователя в приложение.
3. Разрешения Cloud Functions: Проверьте, что ваши cloud functions имеют разрешение Cloud Functions Invoker для allUsers в консоли Google Cloud. Для этого перейдите в Cloud Console, найдите функцию initStripePayment, откройте ее, перейдите на вкладку Permissions и подтвердите статус разрешений. Это разрешение обычно назначается по умолчанию, но хорошо проверить еще раз.