Платёжные шлюзы с поддержкой Apple Pay в React Native: что нужно знать и как не наступить на грабли

Если вы делаете клиентское приложение на React Native и вам нужно принимать платежи через Apple Pay — вы скорее всего уже поняли, что это не просто «подключить библиотеку и забыть». Есть нюансы с сертификатами, настройкой Merchant ID, поведением на разных версиях iOS и совместимостью шлюзов. Разберёмся, какие шлюзы реально работают с Apple Pay в React Native, как выбрать подходящий и какие ошибки чаще всего превращают интеграцию в многодневный квест.

Как Apple Pay вообще встраивается в React Native

React Native не умеет нативно работать с Apple Pay — это не встроенная платформа вроде SwiftUI. Всё взаимодействие идёт через нативный модуль: вы вызываете его из JS, он открывает нативный шелл оплаты, проводит авторизацию через PassKit и возвращает токен обратно в JS. Дальше этот токен вы отправляете на свой бэкенд, а бэкенд уже общается с платёжным шлюзом.

То есть архитектура всегда трёхзвенная:

• React Native (клиент) — запускает сессию оплаты, получает зашифрованный токен.
• Ваш сервер — принимает токен, расшифровывает его (или передаёт как есть, зависит от шлюза), создаёт платёж.
• Платёжный шлюз — проводит транзакцию через эквайер и платёжную систему.

Ключевой момент: не каждый шлюз позволяет передать «сырой» Apple Pay токен с клиента. Некоторые требуют, чтобы расшифровка происходила на их стороне через SDK. Другие дают полный контроль. Это и определяет, насколько удобно будет интеграция именно в React Native.

Какие шлюзы реально дружат с Apple Pay в React Native

Я не буду перечислять двадцать абстрактных вариантов. Вот те, с которыми я сталкивался в проектах и у которых есть понятная документация по Apple Pay + либо готовый React Native SDK, либо понятный REST API для передачи токена.

Stripe

Самый популярный выбор и объективно самый проработанный с точки зрения документации. У Stripe есть официальный пакет @stripe/stripe-react-native, который из коробки поддерживает Apple Pay через useStripe().confirmPlatformPayPayment(). Вам не нужно писать нативный модуль самому — ребята из Stripe уже всё сделали.

Как это работает: вы инициируете оплату на бэкенде (создаёment PaymentIntent), получаете clientSecret, передаёте его в клиент, и клиент вызывает нативный шелл Apple Pay. Токен расшифровывается на стороне Stripe — вам не нужно возиться с сертификатами на бэкенде.

Поддерживается на iOS 13+, работает и на симуляторе (хотя реальная оплата возможна только на устройстве).

Braintree

Подход у Braintree (это дочка PayPal) немного другой. Они дают свой React Native SDK, который умеет в Apple Pay через модуль react-native-braintree-payments (или форки). Но здесь есть важный нюанс: Braintree может работать в двух режимах — через «токенизацию на клиенте» или через «three-way токенизацию» с участием вашего сервера.

В режиме client-side токен Apple Pay приходит на ваш сервер, и вы сами передаёте его в Braintree API. Это даёт больше контроля, но требует аккуратной работы с криптографией. Если вы не хотите разбираться в сертификатах merchant identity — лучше используйте режим, где Braintree сам обрабатывает токен через свой drop-in UI.

Adyen

Adyen — выбор для тех, кому нужна мультивалютность и работа с локальными способами оплаты в разных странах. У них есть React Native SDK, и Apple Pay поддерживается как один из методов оплаты в их drop-in компоненте.

Плюс Adyen в том, что они сами обрабатывают токенизацию Apple Pay — ваш бэкенд получает уже готовый зашифрованный токен и передаёт его в Adyen API. Минус — порог входа выше, документация объёмнее, и не для каждого рынка Adyen будет оправдан.

ЮKassa (для российского рынка)

Если ваше приложение работает в России и вам нужно принимать Apple Pay — ситуация сложнее. Apple Pay в России работает, но только через карты «Мир», и не все шлюзы это поддерживают. ЮKassa добавили поддержку Apple Pay, но интеграция через React Native потребует использования их API напрямую — готового RN-модуля для Apple Pay у них нет.

По сути, вам придётся написать нативный модуль для iOS, который вызывает PKPaymentAuthorizationController, получает токен и отправляет его на ваш бэкенд, а бэкенд уже работает с API ЮKassa. Это реально, но объём работы больше, чем в случае со Stripe.

Сравнение шлюзов для Apple Pay в React Native

Шлюз	Готовый RN SDK	Расшифровка токена	Сложность интеграции	Комиссия (ориентир)
Stripe	Да, официальный	На стороне шлюза	Низкая	От ~2,9% + фиксированная часть
Braintree	Да, через пакеты-форки	На стороне сервера или шлюза	Средняя	Зависит от региона и объёма
Adyen	Да, официальный	На стороне шлюза	Средняя–высокая	Индивидуально, от ~0,6% или ниже при больших оборотах
ЮKassa	Нет (только нативный модуль)	На стороне сервера	Высокая	От ~2,8% и выше

Комиссии указаны как ориентиры — реальные цифры зависят от региона, оборота, типа бизнеса и условий договора. Уточняйте у каждого шлюза индивидуально.

Пошаговый план подключения (на примере Stripe)

Stripe — самый простой и документированный путь. Вот реальный порядок действий, который я проходил в проектах.

1. Настройте Merchant ID в Apple Developer Portal. Зайдите в Certificates, Identifiers & Profiles → Identifiers → Merchant IDs. Создайте идентификатор вроде merchant.com.yourapp.payments. Он понадобится для генерации сертификата платежей.
2. Создайте Payment Processing Certificate. Загрузите CSR от Apple, получите сертификат и зарегистрируйте его в дашборде Stripe в разделе Settings → Payment methods → Apple Pay. Без этого шага Apple Pay просто не активируется.
3. Установите пакет: npm install @stripe/stripe-react-native. Для iOS выполните cd ios && pod install.
4. Проверьте поддержку Apple Pay в коде:

const { isPlatformPaySupported } = useStripe();

useEffect(() => {
  isPlatformPaySupported().then(supported => {
    // Показываем кнопку Apple Pay только если supported === true
  });
}, []);

5. На бэкенде создаёте PaymentIntent и возвращаете clientSecret клиенту.
6. На клиенте вызываете оплату:

const { error, paymentMethod } = await confirmPlatformPayPayment(
  clientSecret,
  {
    applePay: {
      cartItems: [
        {
          label: 'Ваш товар',
          amount: '100.00',
          paymentType: 'Immediate',
        },
      ],
      currencyCode: 'USD',
      merchantCountryCode: 'US',
      requiredShippingAddressFields: ['emailAddress'],
    },
  }
);

if (error) {
  // Обработка ошибки — пользователь отменил или что-то пошло не так
} else {
  // Платёж успешен, подтверждаем на бэкенде
}

7. На бэкенде слушаете вебхук payment_intent.succeeded и фиксируете успешную оплату в своей системе. Не полагайтесь только на ответ клиента — вебхук является источником истины.

Частые ошибки, которые убивают время

1. Забыли про Merchant ID и сертификат

Это классика. Разработчик настраивает код, запускает на устройстве — а кнопка Apple Pay не пояляется. Причина: в дашборде шлюза не зарегистрирован сертификат или Merchant ID не совпадает. Проверяйте в первую очередь.

2. Тестируют на симуляторе и удивляются

Симулятор iOS не поддерживает реальную Apple Pay. Можно проверить, что кнопка отображается и шелл открывается, но завершить оплату с реальной картой — нет. Только физическое устройство. Если вы не учли это заранее — потратите день на дебаг несуществующей проблемы.

3. Не обрабатывают отмену пользователя

Когда пользователь нажимает «Отмена» в шелле Apple Pay — это не ошибка в том смысле, в котором её ожидает код. Но если вы не обработаете этот кейс, UI может зависнуть. В Stripe SDK это приходит как error.code === 'Canceled' — обрабатывайте отдельно.

4. Передают неверный merchantCountryCode

Если ваш аккаунт Stripe зарегистрирован в одной стране, а вы передаёте другой код в параметрах Apple Pay — шелл может не открываться или открываться с пустым способом оплаты. Сверяйте страну аккаунта шлюза с тем, что передаёте в коде.

5. Ждут мгновенного подтверждения на бэкенде

Некоторые разработчики после вызова confirmPlatformPayPayment считают, что если нет ошибки — деньги уже на счету. Нет. Платёж может требовать дополнительной проверки (3D Secure, антифрод). Всегда ориентируйтесь на вебхук шлюза, а не на ответ клиентского метода.

6. Не настроили Associated Domains для web-based платежей

Если вы используете Apple Pay на вебе в дополнении к приложению, нужно настроить Associated Domains в Xcode и разместить apple-developer-merchantid-domain-association файл на вашем домене. Без этого Apple Pay на вебе не заработает, даже если в приложении всё ок.

Что выбрать в зависимости от вашей ситуации

У вас стартап, нужно запуститься быстро

Берите Stripe. Официальный SDK, отличная документация, минимальный объём нативной работы. Вы сможете подключить Apple Pay за пару дней, даже если никогда этого не делали.

Вы работаете на нескольких рынках (EU, US, Asia)

Смотрите в сторону Adyen или Stripe с мультивалютным аккаунтом. Оба поддерживают Apple Pay глобально. Adyen даёт больше локальных способов оплаты, но сложнее в подключении.

У вас уже подключён Braintree

Если Braintree уже работает в проекте для карточных платежей — имеет смысл использовать его же для Apple Pay. Не плодите сущности. Но учтите, что вам придётся разобраться с их схемой токенизации — она отличается от Stripe.

Вы в России и вам нужен Apple Pay

Готовьтесь к написанию нативного модуля. Ни один из крупных российских шлюзов не даёт готового React Native решения для Apple Pay. Вам нужно будет:

• Написать Swift/ObjC модуль с PKPaymentAuthorizationController
• Настроить Merchant ID и сертификат в Apple Developer Portal
• Передать токен на бэкенд и обработать его через API шлюза

Это реально за 3–5 дней работы разработчика, который знаком с iOS нативным кодом.

Практические рекомендации

• Всегда проверяйте isPlatformPaySupported() перед показом кнопки. На старых устройствах и в некоторых регионах Apple Pay может быть недоступен.
• Не хардкодьте сумму на клиенте. Формируйте PaymentIntent на бэкенде с актуальной ценой и передавайте только clientSecret. Клиент не должен иметь возможности подменить сумму.
• Логируйте всё. Записывайте payment_intent_id, статусы, ошибки. Когда платёж «пропал» — именно логи помогут разобраться, на каком этапе произошёл сбой.
• Тестируйте на реальном устройстве с реальной картой. Тестовые карты Apple Pay (sandbox) работают, но не все шлюзы их корректно обрабатывают в sandbox-режиме. Иногда только реальная карта показывает реальное поведение.
• Настройте вебхуки до продакшена. Проверьте, что ваш сервер корректно обрабатывает payment_intent.succeeded, payment_intent.payment_failed и charge.refunded. Без этого вы не узнаете о проблемах, пока клиент не напишет в поддержку.

Итог

Подключение Apple Pay в React Native — это не магия, но и не тривиальная задача. Главное — выбрать шлюз с готовым SDK (Stripe или Adyen), правильно настроить Merchant ID и сертификаты в Apple Developer Portal, и не забыть, что подтверждение оплаты всегда приходит через вебхук, а не через ответ клиентского метода.

Если вы в России — готовьтесь к нативной работе с PKPaymentAuthorizationController. Если вы на международном рынке — Stripe сэкономит вам неделю разработки по сравнению с любым другим вариантом.

Начните с проверки: есть ли у вас Merchant ID, зарегистрирован ли сертификат в дашборде шлюза, и запускается ли шелл Apple Pay на реальном устройстве. Если эти три пункта в порядке — дальше дело техники и внимательности к документации.

Информация в статье носит ознакомительный характер. Условия подключения платёжных шлюзов, комиссии и доступность Apple Pay в разных регионах могут меняться. Перед принятием решения о подключении конкретного шлюза уточняйте актуальные условия у провайдера и при необходимости консультируйтесь с профильным специалистом.