Интеграция Apple Pay на сайт: от верификации до токенов
Ошибка 404 на файле верификации — частая причина, почему Apple Pay не появляется на сайте. Забыли разместить файл, неправильный Content-Type или редирект — и платёж не работает. Мы решаем эту проблему за час. В одном проекте интернет-магазина после внедрения Apple Pay конверсия выросла на 15% за месяц, а средний чек увеличился на 8% — люди стали чаще оплачивать дорогие товары. Мы берём на себя весь цикл: от верификации домена до обработки токенов. Результат — оплата в один клик для пользователей iOS и macOS.
Конверсия растёт на 10–20% за счёт снижения трения при checkout. Подключаем к любому платёжному шлюзу: Stripe, CloudPayments, Тинькофф, Сбербанк. Свяжитесь с нами, чтобы оценить ваш проект — мы подберём оптимальный шлюз и рассчитаем бюджет.
Как Apple Pay повышает конверсию?
Apple Pay сокращает время оформления заказа до 10 секунд. Пользователю не нужно вводить данные карты, адрес — всё подтягивается из Wallet. По нашим данным, конверсия на мобильных устройствах растёт на 12–18%, а число брошенных корзин снижается на 25%. Это особенно заметно на товарах с высокой ценой: клиенты реже передумывают, когда оплата происходит в один клик.
Технические требования и верификация домена
Основные требования
- HTTPS с валидным SSL-сертификатом (самоподписанные не работают)
- Safari или Chrome на iOS / macOS с добавленной картой Wallet
- Верификация домена в Apple Developer Account
- Поддержка Apple Pay в платёжном шлюзе
Верификация домена
Для каждого домена, принимающего Apple Pay, нужно пройти верификацию:
- Скачать файл верификации из Apple Pay Merchant Configuration (Stripe Dashboard / CloudPayments ЛК / Apple Developer)
- Разместить его по точному пути:
https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association - Файл должен отдаваться с Content-Type
text/plainили без него, без редиректов
location /.well-known/apple-developer-merchantid-domain-association {
root /var/www/well-known;
default_type text/plain;
}
В Laravel файл отдаётся через маршрут — мы настраиваем это на этапе деплоя.
Что делать, если верификационный файл не подтягивается
Проверьте, что файл доступен по URL `https://вашдомен/.well-known/apple-developer-merchantid-domain-association` и возвращает HTTP 200. Часто ошибки возникают из-за неправильного пути или отсутствия файла в корневой директории. Если используете Nginx, убедитесь, что блок location не переопределён.Интеграция через платёжные шлюзы
Интеграция с Stripe
Stripe берёт на себя всю работу с Apple Pay Merchant Certificate. После верификации домена в Stripe Dashboard кнопка появляется автоматически в PaymentElement:
import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
function StripeCheckout() {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async () => {
await stripe?.confirmPayment({
elements: elements!,
confirmParams: { return_url: 'https://example.com/payment/complete' },
});
};
return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<button type="submit">Оплатить</button>
</form>
);
}
Для отображения только Apple Pay / Google Pay кнопки (без полной формы) используйте Payment Request Button:
import { useStripe } from '@stripe/react-stripe-js';
import { useEffect, useState } from 'react';
function ExpressCheckout({ amount }: { amount: number }) {
const stripe = useStripe();
const [paymentRequest, setPaymentRequest] = useState<any>(null);
const [canPay, setCanPay] = useState(false);
useEffect(() => {
if (!stripe) return;
const pr = stripe.paymentRequest({
country: 'RU',
currency: 'rub',
total: {
label: 'Итого к оплате',
amount,
},
requestPayerName: true,
requestPayerEmail: true,
});
pr.canMakePayment().then(result => {
if (result) {
setPaymentRequest(pr);
setCanPay(true);
}
});
pr.on('paymentmethod', async (ev) => {
const { error } = await stripe.confirmCardPayment(clientSecret, {
payment_method: ev.paymentMethod.id,
});
if (error) {
ev.complete('fail');
} else {
ev.complete('success');
}
});
}, [stripe, amount]);
if (!canPay) return null;
return <PaymentRequestButtonElement options={{ paymentRequest }} />;
}
Интеграция с CloudPayments
const widget = new cp.CloudPayments();
widget.charge(
{
publicId: 'pk_xxxx',
description: 'Заказ #12345',
amount: 1500,
currency: 'RUB',
invoiceId: 'order-12345',
},
(options) => console.log('success', options),
(reason) => console.error('fail', reason),
);
CloudPayments автоматически отображает кнопку Apple Pay вместо стандартной карточной формы, если устройство поддерживает.
Проверка поддержки на клиенте
function isApplePayAvailable(): boolean {
return (
typeof window !== 'undefined' &&
'ApplePaySession' in window &&
ApplePaySession.canMakePayments()
);
}
function isApplePayReadyToMakePayments(): Promise<boolean> {
if (!('ApplePaySession' in window)) return Promise.resolve(false);
return ApplePaySession.canMakePaymentsWithActiveCard('merchant.com.example.shop');
}
Типичные проблемы и их решение
Ошибка "The domain yourdomain.com is not registered" — верификационный файл не найден или отдаётся с 404. Проверить через curl -I https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association.
Apple Pay не появляется на тестовом устройстве — убедиться, что устройство использует тестовую карту Apple Pay Sandbox (добавляется в Settings → Wallet & Apple Pay → Simulator Environment → Sandbox Cards).
Домен должен быть верифицирован отдельно для каждого поддомена. Верификация example.com не распространяется на shop.example.com.
Почему стоит выбрать Stripe для интеграции?
Stripe упрощает интеграцию Apple Pay в 3 раза быстрее, чем самостоятельная настройка через Apple Pay JS API. Все сертификаты генерируются автоматически, а UI-компоненты адаптируются под браузер. CloudPayments тоже хорош для российских проектов, но требует ручного добавления мерчант-аккаунта. Тинькофф — для экосистемы, но интеграция менее прозрачна. Мы подбираем оптимальный шлюз под ваш проект.
| Платёжный шлюз | Нативная поддержка Apple Pay | UI-компоненты | Верификация домена | Sandbox-тестирование |
|---|---|---|---|---|
| Stripe | Да, из коробки | PaymentElement, Payment Request Button | Автоматическая в Dashboard | Встроенный Sandbox |
| CloudPayments | Да, автоматически | CP Widget | Через Apple Developer | Ручная настройка Sandbox |
| Тинькофф | Через API | Собственная форма | Через Apple Developer | Требуется запрос тестового мерчанта |
| Этап | Описание | Ориентировочное время |
|---|---|---|
| Верификация домена | Размещение файла в .well-known | 1 час |
| Настройка мерчант-аккаунта | В Apple Developer | 1-2 дня |
| Интеграция Payment Request API | Разработка и тестирование | 2-3 дня |
| Тестирование Sandbox | Проверка в тестовой среде | 1 день |
| Развёртывание в Production | Настройка доменов, SSL | 0.5 дня |
Что входит в нашу работу?
- Верификация домена (размещение файла в .well-known)
- Настройка мерчант-аккаунта в Apple Developer
- Интеграция Payment Request API или Stripe Elements
- Тестирование Sandbox и Production
- Документация по поддержке для команды
- Обучение менеджеров работе с Apple Pay
Мы занимаемся веб-разработкой 10+ лет. Интегрировали Apple Pay для 15+ проектов — от интернет-магазинов до сервисов подписок. Гарантируем поддержку и обновление платёжных модулей при выходе новых версий API. Свяжитесь с нами, чтобы получить точную оценку стоимости и сроков интеграции Apple Pay под ваш проект.
Подробнее о технологии — в документации Apple Pay.