Онлайн-оплата бронювання: Stripe, ЮKassa, webhook

Ми інтегруємо онлайн-оплату в системи бронювання, щоб виключити неявки та автоматизувати підтвердження. Без передоплати до 40% гостей не приходять — адміністратор витрачає години на обдзвін та повернення депозитів. Онлайн-оплата підтверджує намір клієнта, автоматично скасовує неоплачені слоти та знижує навантаження на персонал. Ми реалізували понад 50 інтеграцій платежів — від невеликих салонів краси до великих мереж готелів. Знаємо, як обійти типові проблеми: помилки 3D Secure, збої webhook-ів, конфлікти валют.

Інтеграція онлайн-оплати дозволяє збільшити середній чек на 15–20% і знизити кількість неявок до 95%.

Чому клієнти не оплачують броні заздалегідь?

Страх введення даних картки, складна форма, відсутність Apple Pay, Google Pay або Samsung Pay — основні причини відмов. За нашими даними, впровадження одного кліка по Apple Pay підвищує конверсію оплати на 25–30%. Технічно це вирішується вибором надійного платіжного провайдера та простим UX. Ми використовуємо Stripe Elements або готові віджети ЮKassa з адаптивною версткою та підтримкою популярних методів без додаткової розробки. Важливо також налаштувати 3D Secure 2.0 — він знижує фрод без додавання зайвих кроків.

Як вибрати модель оплати для вашого бізнесу?

Комбінуємо моделі: депозит плюс холдування — якщо клієнт не прийшов, списуємо депозит; з'явився — розморожуємо. Для ресторанів оптимальний депозит 20–30%, для готелів — повна передоплата за першу ніч.

Порівняння Stripe та ЮKassa: що обрати?

Stripe підтримує в 3 рази більше валют, ніж ЮKassa, що робить його кращим вибором для міжнародних проєктів.

Як ми інтегруємо Stripe: розбір коду

Для повної передоплати використовуємо PaymentIntent. Нижче приклад на Laravel — створення наміру на сервері та форма на React за допомогою Elements.

class BookingPaymentService {
    public function createPaymentIntent(Booking $booking): array {
        $stripe = new \Stripe\StripeClient(config('services.stripe.secret'));
        $intent = $stripe->paymentIntents->create([
            'amount' => $booking->total_cents, // в копійках/центах
            'currency' => 'rub',
            'metadata' => [
                'booking_id' => $booking->id,
                'customer_id' => $booking->customer_id,
            ],
            'automatic_payment_methods' => ['enabled' => true],
        ]);
        $booking->update([
            'payment_intent_id' => $intent->id,
            'payment_status' => 'pending',
        ]);
        return ['client_secret' => $intent->client_secret];
    }
}

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

const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_KEY);

function BookingPaymentForm({ clientSecret }: { clientSecret: string }) {
  const stripe = useStripe();
  const elements = useElements();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!stripe || !elements) return;

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/bookings/success`,
      },
    });

    if (error) console.error(error.message);
  }

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" className="btn-primary mt-4">Оплатити</button>
    </form>
  );
}

Як налаштувати вебхук Stripe

1. Створіть endpoint на сервері, наприклад /webhooks/stripe.
2. Зареєструйте цей endpoint в Stripe Dashboard з секретним підписаним ключем.
3. Використовуйте Stripe\Webhook::constructEvent для перевірки підпису.
4. Обробіть події payment_intent.succeeded та payment_intent.payment_failed.

Route::post('/webhooks/stripe', function (Request $request) {
    $event = \Stripe\Webhook::constructEvent(
        $request->getContent(),
        $request->header('Stripe-Signature'),
        config('services.stripe.webhook_secret')
    );

    if ($event->type === 'payment_intent.succeeded') {
        $bookingId = $event->data->object->metadata->booking_id;
        Booking::find($bookingId)?->update(['payment_status' => 'paid', 'status' => 'confirmed']);
        Mail::to(Booking::find($bookingId)?->customer_email)
            ->send(new BookingConfirmedMail(Booking::find($bookingId)));
    }

    return response('ok');
});

Чому webhook обов'язковий для онлайн-платежів?

Без webhook ви не дізнаєтеся про успішний платіж, поки клієнт не повернеться на сайт. Якщо клієнт закрив вікно після оплати, бронь залишиться непідтвердженою. Webhook гарантує, що статус платежу оновиться в реальному часі. Ми також налаштовуємо повторні спроби при помилках і логуємо всі події для налагодження.

Процес роботи: від консультації до деплою

Згідно з документацією Stripe Payment Intents, ми реалізували безшовну інтеграцію з підтримкою 3D Secure.

Що входить в роботу

• Репозиторій з вихідним кодом (сервер + фронтенд).
• Документація: опис платіжного потоку, інструкція з додавання нових систем.
• Тести: модульні та інтеграційні для PaymentIntent і webhook.
• Підтримка на старті: 14 днів після деплою — фіксимо баги, відповідаємо на питання.

Терміни

Від 4 до 6 робочих днів на одну платіжну систему з повним циклом: від інтеграції до документації. Якщо потрібно кілька систем (наприклад, Stripe + ЮKassa + Сбербанк) — термін збільшується до 8–10 днів. Зв'яжіться з нами для точної оцінки — ми підберемо оптимальний варіант під ваш проєкт.

За понад 50 інтеграцій платежів ми гарантуємо стабільність і безпеку. Отримайте консультацію — надішлемо комерційну пропозицію з деталями. Замовте інтеграцію прямо зараз і почніть приймати онлайн-платежі через тиждень.