Интеграция платёжной системы Apple Pay на сайт

Интеграция платёжной системы Apple Pay на сайт

Apple Pay на сайте — это не самостоятельная система, а метод оплаты, реализуемый поверх существующего платёжного шлюза (Stripe, CloudPayments, Тинькофф, Сбербанк и др.). С точки зрения разработки есть два уровня: настройка домена на стороне Apple и реализация Payment Request API в браузере.

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

• HTTPS с валидным SSL-сертификатом (самоподписанные не работают)
• Safari или Chrome на iOS / macOS с добавленной картой Wallet
• Верификация домена в Apple Developer Account
• Поддержка Apple Pay в платёжном шлюзе

Верификация домена

Для каждого домена, принимающего Apple Pay, нужно пройти верификацию:

1. Скачать файл верификации из Apple Pay Merchant Configuration (Stripe Dashboard / CloudPayments ЛК / Apple Developer)
2. Разместить его по точному пути: https://yourdomain.com/.well-known/apple-developer-merchantid-domain-association
3. Файл должен отдаваться с Content-Type text/plain или без него, без редиректов

location /.well-known/apple-developer-merchantid-domain-association {
    root /var/www/well-known;
    default_type text/plain;
}

В Laravel:

// routes/web.php
Route::get('/.well-known/apple-developer-merchantid-domain-association', function () {
    return response()->file(storage_path('apple-pay-domain-verification'));
});

Реализация через Stripe

Stripe берёт на себя всю работу с Apple Pay Merchant Certificate. После верификации домена в Stripe Dashboard кнопка появляется автоматически в PaymentElement:

import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';

// PaymentElement автоматически показывает Apple Pay / Google Pay
// если устройство поддерживает и карта добавлена в Wallet
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>
  );
}

Реализация через Payment Request Button (Stripe)

Для отображения только Apple Pay / Google Pay кнопки (без полной формы):

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) => {
      // Подтвердить PaymentIntent с полученным paymentMethod
      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',
    // Apple Pay включается автоматически при поддержке браузером
  },
  (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.