Інтеграція платіжної системи Apple Pay на сайт

Інтеграція Apple Pay на веб-сайт

Apple Pay на веб-сайті — це не автономна система, а метод оплати, що реалізується поверх існуючого платіжного шлюзу (Stripe, CloudPayments, Tinkoff, Sberbank тощо). З точки зору розробки існує два рівні: налаштування домену на стороні 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.