Реалізація онлайн-оплати бронювання на сайті
Онлайн-оплата при бронюванні вирішує одразу два завдання: підтверджує намір клієнта та зменшує процент неявок. Варіанти: повна передплата, депозит (фіксована сума або %), або оплата після з збереженням карти.
Моделі оплати
| Модель | Описання | Підходить для |
|---|---|---|
| Повна передплата | Вся сума при бронюванні | Майстер-класи, тури |
| Депозит | Фіксована сума або % | Ресторани, салони |
| Утримання карти | Сума заморожена, списується пізніше | Прокат, оренда |
| Оплата після | Карта збережена, оплата після послуги | Постійні клієнти |
Інтеграція з Stripe (повна передплата)
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];
}
}
// Frontend: Stripe Elements
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>
);
}
Webhook підтвердження оплати
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');
});
Російські системи оплати
Для російського ринку: ЮКаса (Яндекс), CloudPayments, Тінькофф Касса, Сбербанк Еквайринг. У кожної своє API, але схема та ж: створення платіжної сесії → форма або вбудовування від провайдера → webhook підтвердження.
Часові терміни
Оплата при бронюванні через ЮКасу або Stripe з webhook-підтвердженням: 4–6 робочих днів.