Как подключить Apple Pay в React Native-приложении через платёжный шлюз — пошагово и без лишней воды

Как подключить Apple Pay в React Native-приложении через платёжный шлюз — пошагово и без лишней воды

Ты хочешь, чтобы пользователи твоего приложения платили одним касанием — как в App Store. Не вводить карту, не ждать загрузки страницы, не заполнять адрес. Просто приложить палец — и всё. Apple Pay — это не фишка, а ожидание. Если ты делаешь приложение для iOS и не поддерживаешь Apple Pay, ты создаёшь лишнее сопротивление для покупки. Люди уйдут. Это не теория — это статистика: в приложениях с Apple Pay конверсия растёт на 20–35% по сравнению с формами ввода карты.

Но подключить Apple Pay в React Native — не просто поставить библиотеку и запустить. Тут много подводных камней: от требований Apple до того, какой шлюз реально умеет это обрабатывать. Я расскажу, как это сделать без потерь времени, денег и нервов. Без теории. Только то, что работает на практике.

Что тебе нужно, чтобы Apple Pay заработал

Это не один шаг. Это цепочка. Пропустишь один — и Apple Pay не появится в приложении.

1. У тебя должен быть аккаунт разработчика Apple — не бесплатный, а платный ($99/год). Без него ты не сможешь включить Apple Pay в App Store Connect.
2. Ты должен быть зарегистрирован как продавец — через платёжный шлюз, который поддерживает Apple Pay. Не все шлюзы это умеют. Даже если ты используешь Stripe или Adyen, это не гарантирует, что они работают с Apple Pay в React Native.
3. Ты должен иметь SSL-сертификат на домене — Apple требует, чтобы все транзакции проходили через HTTPS. Даже если твой бэкенд на локалхосте — при публикации в App Store это обязательно.
4. Ты должен включить Apple Pay в Capabilities проекта — в Xcode, через файл .entitlements. Без этого даже правильный код не запустится.

Если ты не сделал хотя бы один из этих пунктов — Apple Pay не появится. Ни один библиотечный пакет не заменит эти шаги. Это не код. Это настройка.

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

Ты не можешь просто взять любой шлюз — скажем, «Касса 24» или «Сбербанк Платежи» — и ожидать, что он поддержит Apple Pay в мобильном приложении. Большинство российских шлюзов не поддерживают его вообще. А если и поддерживают — то только через веб-форму, а не через native-интеграцию в React Native.

Вот реальные варианты, которые работают сейчас в 2024 году:

Шлюз	Поддержка Apple Pay в React Native	Регион поддержки	Срок подключения	Комиссия за транзакцию
Stripe	Да, через react-native-stripe + официальный SDK	США, Канада, ЕС, Австралия, Великобритания, Япония	3–7 дней	2.9% + $0.30
Adyen	Да, через react-native-adyen-payment	ЕС, США, Канада, Австралия, Новая Зеландия	7–14 дней	От 1.4% (зависит от договора)
PayPal	Частично — только через PayPal Checkout, не нативный Apple Pay	США, ЕС, Канада	5–10 дней	3.49% + $0.49
Square	Да, через react-native-square-in-app-payments	США, Канада, Япония, Великобритания, Австралия	2–5 дней	2.6% + $0.10
Российские шлюзы (Сбер, Тинькофф, Касса 24 и др.)	Нет	Россия	—	—

Запомни: если ты хочешь Apple Pay в приложении — тебе нужен международный шлюз. Российские шлюзы не поддерживают native-интеграцию Apple Pay. Они могут предложить «оплату через Apple Pay» — но это просто веб-переход в Safari. Это не Apple Pay в приложении. Это обходной путь. И пользователь теряет ощущение «одного касания».

Как это работает на практике

Представь, что пользователь нажимает «Купить за 990₽». Ты не перенаправляешь его на сайт. Ты не показываешь форму. Ты вызываешь системный диалог Apple Pay — и он появляется поверх твоего приложения, как будто это часть iOS.

Вот как это выглядит в коде:

1. Ты используешь библиотеку react-native-stripe (или аналогичную для Adyen/Square).
2. Инициализируешь SDK с публичным ключом от шлюза.
3. Проверяешь, поддерживает ли устройство Apple Pay: Stripe.isApplePaySupported().
4. Создаёшь объект заказа: сумма, валюта, описание товара.
5. Вызываешь Stripe.presentApplePaySheet() — и iOS сама показывает диалог с картами пользователя.
6. Пользователь подтверждает — и ты получаешь токен платежа (не карту!)
7. Ты отправляешь токен на свой бэкенд.
8. Твой бэкенд отправляет токен в Stripe/Adyen — и шлюз делает платёж.
9. Ты получаешь статус — и показываешь пользователю «Оплачено».

Важно: ты НЕ получаешь номер карты. Никогда. Apple Pay передаёт токен — это одноразовый код, привязанный к устройству. Это безопасно. И это главная причина, почему Apple Pay работает лучше, чем ввод карты.

Что ломается чаще всего — частые ошибки

Я видел десятки кейсов, где всё «работало в тесте», но в App Store приложение отклоняли. Вот что чаще всего идёт не так:

• Ты не включил Apple Pay в Capabilities — в Xcode. Без этого приложение просто не запускается на реальном устройстве. Даже если ты всё правильно написал на React Native.
• Ты используешь тестовый ключ от шлюза в продакшене — Stripe и другие шлюзы отклоняют транзакции, если токен пришёл с тестового ключа в продакшене. Или наоборот.
• Ты не проверяешь поддержку Apple Pay на реальном устройстве — эмулятор не может показать Apple Pay. Тестировать нужно на iPhone с реальной картой в Кошельке.
• Ты отправляешь токен с бэкенда на шлюз без проверки подписи — Apple Pay токены подписаны. Если ты не проверяешь подпись на бэкенде — ты уязвим к подделке.
• Ты используешь старую версию библиотеки — react-native-stripe обновляется раз в 2–3 месяца. Если ты используешь версию 8.1.0, а актуальная — 10.3.1 — Apple Pay может не работать.
• Ты не указал корректную валюту — Apple Pay требует, чтобы валюта в заказе совпадала с валютой, привязанной к Apple ID. Если пользователь из Франции, а ты запрашиваешь USD — диалог не появится.

Особенно коварна ошибка №1. Многие разработчики думают: «я всё сделал на React Native — зачем Xcode?». Но Apple Pay — это системная функция iOS. Она не работает без настроек в Xcode. И это не баг — это особенность.

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

Ты не можешь выбрать шлюз «по рейтингу». Ты должен выбирать по своей ситуации.

• Если ты делаешь приложение для США, ЕС, Канады и хочешь минимум бюрократии — выбирай Stripe. Они самые простые в интеграции. Документация чёткая. Поддержка отвечает быстро. Если ты новичок — это лучший выбор.
• Если ты уже используешь Adyen для веб-платежей и хочешь единый интерфейс — выбирай Adyen. Они дают одинаковый API для веба, мобильного приложения и POS-терминалов. Это удобно, если у тебя несколько каналов продаж.
• Если ты делаешь приложение для малого бизнеса в США — Square подойдёт лучше. У них самые низкие фиксированные комиссии, и они отлично работают с малыми объёмами. Но только в США, Канаде, Японии и Австралии.
• Если ты продаёшь только в России — Apple Pay в приложении тебе не подойдёт. Никакой российский шлюз не поддерживает native-интеграцию. Ты можешь сделать кнопку «Оплатить через Apple Pay», которая откроет Safari — но это не то же самое. Это уступка. И пользователи это чувствуют.

Если ты не знаешь, в каких странах твои пользователи — проверь аналитику. Если 70% твоих покупателей из России — не трать время на Apple Pay. Если 60% из США — это твой ключевой канал. Не игнорируй его.

Как сделать это правильно — практические рекомендации

Вот что я делаю на практике, когда подключаю Apple Pay:

1. Сначала проверяю, есть ли у меня платный аккаунт Apple Developer — и включены ли Apple Pay и In-App Purchase в Capabilities.
2. Выбираю Stripe (если нет других ограничений) — потому что их документация по React Native самая чистая.
3. Устанавливаю react-native-stripe версии 10.3.1 — и проверяю, что она совместима с моей версией React Native.
4. Создаю тестовую карту в Кошельке на iPhone — не в эмуляторе, а на реальном устройстве.
5. Пишу функцию, которая вызывает presentApplePaySheet только если isApplePaySupported возвращает true — иначе показываю кнопку «Оплатить картой».
6. На бэкенде я использую Stripe Node.js SDK — и проверяю подпись токена перед созданием платежа. Без этого — риск мошенничества.
7. Тестирую на трёх разных устройствах: iPhone 12, 14 и 15 — с разными версиями iOS (16, 17, 18).
8. Загружаю приложение в TestFlight — и тестирую на реальном устройстве с реальной картой.
9. Проверяю, что в App Store Connect в разделе «Платежи» указаны все необходимые разрешения — иначе приложение отклонят.

Если ты хочешь, чтобы Apple Pay работал без проблем — не экономь на тестировании. 2 часа тестирования на реальном устройстве сберегут тебе 2 недели разбирательств с Apple Review Team.

Что делать, если ты из России

Если ты делаешь приложение для российского рынка — Apple Pay в приложении тебе недоступен. Ни один российский шлюз не предоставляет native-интеграцию. Даже Тинькофф и Сбер не дают SDK для React Native, который бы работал с Apple Pay.

Единственный способ — это сделать кнопку «Оплатить через Apple Pay», которая открывает Safari с веб-формой. Но это не Apple Pay — это веб-переход. Пользователь уходит из приложения. Он теряет ощущение плавности. Конверсия падает. Это компромисс.

Если ты хочешь сохранить UX — сделай так:

• На iOS — показывай кнопку «Оплатить через Apple Pay», которая открывает веб-форму с предзаполненными данными.
• На Android — показывай Google Pay (если поддерживается).
• Во всех случаях — сохраняй карту пользователя после первой оплаты (с его согласия), чтобы ускорить следующие покупки.

Это не идеально. Но это лучше, чем ничего.

Итог: что делать прямо сейчас

Если ты хочешь Apple Pay в React Native-приложении — вот что тебе делать:

1. Если ты продаёшь за рубежом — выбирай Stripe. Установи react-native-stripe и следуй их гайду по Apple Pay.
2. Если ты продаёшь в России — отложи Apple Pay. Вместо этого сделай Google Pay для Android и веб-форму для iOS — и фокусируйся на сохранении карты пользователя.
3. Проверь, что у тебя есть платный аккаунт Apple Developer — и Apple Pay включён в Capabilities.
4. Тестируй только на реальном iPhone с реальной картой в Кошельке — эмулятор не подойдёт.
5. Не используй старые библиотеки. Обновляй react-native-stripe до последней версии.
6. На бэкенде всегда проверяй подпись токена Apple Pay — иначе ты рискуешь быть обманутым.

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

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