Перейти к основному содержимому

Braintree

Вы можете принимать платежи в приложении с помощью интеграции Braintree (сервис, предоставляемый PayPal). Это также позволит вашим пользователям оплачивать напрямую с помощью кредитной карты или сервисов вроде PayPal, Google Pay или Apple Pay.

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

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

к сведению

FlutterFlow использует Firebase Cloud Functions для обработки транзакций с помощью выбранного сервиса (Braintree/PayPal).

Интеграция Braintree​

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

1. Настройка интеграции платежей​

Платежи можно настроить в FlutterFlow с помощью Braintree.

Всегда тестируйте обработку платежей в изолированной (sandbox) среде перед развертыванием в продакшен.

Следуйте шагам ниже, чтобы настроить с помощью Braintree:

  1. Перейдите на сайт Braintree.
  2. Зарегистрируйтесь, чтобы получить доступ к изолированной (sandbox) среде. Возможно, вы получите письмо с дополнительными шагами для завершения регистрации. Если у вас уже есть учетная запись Braintree, просто Войдите.
  3. Перейдите на страницу Настроек Braintree вашего проекта FlutterFlow, выбрав Settings and Integrations > In App Purchases & Subscriptions > Braintree.
  4. На этой странице Включите Braintree/PayPal с помощью переключателя.
  5. В разделе Credentials (Sandbox) введите Merchant ID, Tokenization Key, Public Key и Private Key учетной записи Braintree.
  6. Чтобы получить необходимые учетные данные, перейдите на страницу Home вашей учетной записи Braintree.
  7. Нажмите на иконку шестеренки (в правом верхнем углу) и выберите Business. На этой странице вы получите Merchant ID.
  8. Теперь перейдите на страницу API. Здесь вы получите Public Key и Private Key.
  9. Чтобы сгенерировать Tokenization Key, перейдите на страницу API и нажмите Generate New Tokenization Key. Скопируйте ключ и введите его в соответствующее поле FlutterFlow.

Наконец, нажмите Deploy, чтобы загрузить Cloud Functions, необходимые для обработки платежей с помощью Braintree:

2. Включение Google Pay или Apple Pay (Опционально)​

Завершение интеграции платежей по шагам выше позволит вам принимать платежи с помощью кредитной карты или учетной записи PayPal. Кроме того, вы можете принимать платежи с помощью Google Pay или Apple Pay.

Чтобы принимать платежи с помощью Google Pay или Apple Pay, вам нужно ввести соответствующий Merchant ID учетной записи Google/Apple на странице Braintree Settings > раздел Credentials (Sandbox).

  1. Чтобы узнать, как найти Merchant ID для Google Pay, перейдите на эту страницу.
  2. Шаги по настройке Apple Pay и получению доступа к Apple Merchant ID описаны здесь.

3. Запуск действия платежа​

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

  1. Выберите виджет, к которому хотите применить действие.
  2. Выберите Actions в панели свойств (правое меню).
  3. Нажмите кнопку + Add Action.
  4. Выберите жест из выпадающего списка: On Tap, On Double Tap или On Long Press.
  5. Выберите Action Type как Braintree Payment.
  6. Введите Amount, выбрав *Specific Value или *From Variable.
  7. В разделе Payment Method выберите Credit Card, PayPal или Drop-In. Опция Drop-In позволяет пользователям выбрать метод оплаты. Если вы хотите использовать опцию Credit Card, следуйте шагам здесь.
  8. Если вы выбрали опцию Drop-In, выберите Allowed Payment Types. Использование Google Pay или Apple Pay потребует указания их Merchant ID во время настройки платежей.
  9. Введите Currency Code и определите опциональные параметры, такие как Tax Rate Percentage и Shipping Cost. Для включения Apple Pay требуется указать Country Code в соответствующем поле.
warning

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

Использование кредитной карты​

Если вы хотите оставить только опцию кредитной карты на странице оформления заказа, вам нужно добавить виджет CreditCardFrom на страницу. Следуйте шагам ниже:

  1. Выберите Payment Method как Credit Card.
  2. Перетащите виджет CreditCardFrom на холст.
  3. Вы можете изменить дизайн виджета формы в соответствии с требованиями вашего приложения.
  4. Снова выберите кнопку оформления заказа, чтобы завершить определение действия.
  5. Введите Currency Code и определите опциональные атрибуты, такие как Tax Rate Percentage и Shipping Cost.

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

Платежи Braintree работают на реальных устройствах Android или в эмуляторах, а покупки в App Store — только на реальных устройствах iOS. В этом документе приведены инструкции по запуску приложения на устройстве Android или iOS.

к сведению

Платежи Braintree нельзя протестировать в режиме Preview, Test Mode или Run Mode.

Чтобы протестировать приложение перед развертыванием:

  1. Скачайте и запустите проект, как описано здесь.
  2. Для тестирования покупки вы можете использовать любые из этих базовых тестовых номеров карт.

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

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

  1. Создайте учетную запись Braintree (не sandbox) и получите продакшен-учетные данные.
  2. Добавьте продакшен-учетные данные на странице Braintree Settings в FlutterFlow > раздел Credentials (Production).
  3. Включите переключатель Is Production на этой странице.
  4. Разверните новые Firebase Cloud Functions с продакшен-учетными данными, нажав кнопку Deploy.

Теперь вы готовы собрать и распространить приложение с платежами в продакшен.