Настройка виджет оплаты Альфа-банк
Я столкнулся с проблемой при интеграции виджета для оплаты Альфа-Банка. В режиме разработки с тестовым режимом всё работало идеально, включая редиректы после оплаты, но в продакшене нет. Я заменил необходимые данные согласно документации, но виджет работает наполовину.
То есть, когда я перехожу на страницу оплаты через URL, передаю виджету необходимые данные, и он их видит корректно. И на данном этапе ссылка выгладить так:
Затем открывается iframe, где я ввожу данные карты для оплаты, и здесь начинается проблема: после закрытия iframe в URL добавляется второй orderId — это уникальный номер заказа со стороны банка, и виджет говорит, что заказ не найден, перенаправляя меня на страницу /payment/fail
Кто-нибудь имеет идеи, как это исправить?
страница для чекаут выглядеть так:
<body style="display:none">
<img src="/logo.jpg" alt="shop logo" class="store-logo">
<div class="container">
<img src="/alfa-bank-logo.png" alt="AlfaBank Logo" class="alfa-logo">
<h1 id="order-header">Оплата заказа #0</h1>
<p id="amount-paragraph">Сумма к оплате: 0 ₽</p>
<div style="
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
padding: 15px 20px;
border-radius: 8px;
font-size: 16px;
margin-bottom: 20px;
text-align: center;
">
Пожалуйста, не закрывайте эту страницу во время оплаты!
</div>
<div
id="alfa-payment-button"
data-token="nvtv5vv0npe3ut54..."
data-gateway="payment"
data-version="1.0"
data-client-info-selector=".clientInfo"
data-amount-selector=".amount"
data-order-number-selector=".orderNumber"
data-description-selector=".order"
data-stages="1"
data-language="ru"
data-return-url="https://mysite.com/payment/success"
data-fail-url="https://mysite.com/payment/fail"
data-redirect="true"
data-amount-format="kopeyki">
<input type="hidden" class="clientInfo" value="">
<input type="hidden" class="amount" value="">
<input type="hidden" class="orderNumber" value="">
<input type="hidden" class="order" value="Покупка в магазине">
</div>
</div>
<script>
const urlParams = new URLSearchParams(window.location.search);
let orderId = urlParams.get('orderId');
let amountKopeks = parseInt(urlParams.get('amount') || '0', 10);
let email = urlParams.get('email');
let usedBalance = parseInt(urlParams.get('usedBalance') || '0', 10);
if (!orderId) {
window.location.replace("/not-found");
} else {
document.body.style.display = "flex";
const amountRub = (amountKopeks / 100).toLocaleString('ru-RU', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const returnUrl = `/payment/success?orderId=${orderId}&amount=${amountKopeks}&email=${encodeURIComponent(email)}&usedBalance=${usedBalance}&isPaid=true`;
const failUrl = `/payment/fail?orderId=${orderId}&amount=${amountKopeks}&email=${encodeURIComponent(email)}&usedBalance=${usedBalance}&isPaid=false`;
const paymentButton = document.getElementById('alfa-payment-button');
paymentButton.dataset.returnUrl = returnUrl;
paymentButton.dataset.failUrl = failUrl;
document.getElementById('order-header').textContent = `Оплата заказа #${orderId}`;
document.getElementById('amount-paragraph').textContent = `Сумма к оплате: ${amountRub} ₽`;
document.querySelector('.clientInfo').value = email || "";
document.querySelector('.amount').value = amountKopeks;
document.querySelector('.orderNumber').value = orderId;
}
</script>
<script id="alfa-payment-script" type="text/javascript" src="https://pay2.alfabank.ru/assets/alfa-payment.js"></script>
</body>
</html>
На самом деле поток такой: я отправляю из корзины данные заказа на страницу оплаты и создаю неоплаченный заказ в моей базе. После завершения оплаты меня перенаправляет на страницу success, где я делаю patch-запрос для изменения статуса на paid.
Я пробовал переименовать свой orderId, пытался принудительно читать мой orderId, но ничего не работает — при закрытии iframe мне всегда пишет «заказ не найден». приложение на nextjs писал, страница для оплаты статическая на html так как виджет оплаты только на html работает, сайт разммещал на VDS на спринтбоксе.
Что не так делаю?