Психология доверия и минимизация когнитивной нагрузки на этапе оформления

				
					// Псевдокод для интеграции с платежным шлюзом, например Stripe Elements
// Эта часть выполняется на стороне клиента (frontend)

const stripe = Stripe('pk_test_YOUR_PUBLISHABLE_KEY'); // Публичный ключ Stripe
const elements = stripe.elements();
const cardElement = elements.create('card', {
    style: {
        base: {
            fontSize: '16px',
            color: '#32325d',
            '::placeholder': { color: '#aab7c4' },
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a',
        },
    },
});
cardElement.mount('#card-element'); // `#card-element` - это div в вашей форме, куда будет вставлен iframe с полями карты

document.getElementById('checkoutForm').addEventListener('submit', async (event) => {
    event.preventDefault();
    const { token, error } = await stripe.createToken(cardElement); // Создание токена на основе введенных данных карты
    if (error) {
        // Отобразить ошибку пользователю, например, 'Некорректный номер карты'
        console.error("Payment error:", error.message);
        document.getElementById('payment-errors').textContent = error.message;
    } else {
        // Отправить полученный токен на ваш backend для завершения платежа
        // Этот fetch запрос идет на ваш сервер, а не напрямую в Stripe
        fetch('/api/process-payment', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                paymentToken: token.id,
                orderId: 'your-current-order-id', // ID заказа на вашем сервере
                amount: 1000 // Сумма в центах или минимальных единицах
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '/order-confirmation?order=' + data.orderId;
            } else {
                // Отобразить ошибку платежа, полученную от вашего backend
                document.getElementById('payment-errors').textContent = data.message || 'Ошибка обработки платежа.';
            }
        })
        .catch(e => {
            console.error("Backend communication error:", e);
            document.getElementById('payment-errors').textContent = 'Произошла ошибка при обработке запроса.';
        });
    }
});