Пересоздание платежной сессии и кнопок Yandex Pay
Иногда возникает необходимость пересоздания платежной сессии и платежных кнопок.
Например, кнопка может показываться в динамическом блоке, а сессия пересоздаваться при динамическом каталоге.
Процесс пересоздания предполагает удаление активных сессии и кнопок перед созданием новых.
Удаление платежной сессии
При удалении сессии также удаляются все платежные кнопки, относящиеся к этой сессии.
// Удаление платежной сессии и кнопок
paymentSession.destroy();
Удаление платежной кнопки
// Удаление платежной кнопки на определенном DOM-узле
paymentSession.unmountButton(
document.querySelector('<selector>')
);
Пример
function onYaPayLoad() {
const YaPay = window.YaPay;
const buttonContainer = document.querySelector('#button_container');
const resetPaySessionButton = document.querySelector('#reset_pay_session');
const resetPayButtonButton = document.querySelector('#reset_pay_button');
// Ссылка на активную сессию
let activeSession = null;
// Функция создания платежной сессии
function createPaymentSession() {
// Данные платежа
const paymentData = {
env: YaPay.PaymentEnv.Sandbox,
version: 3,
currencyCode: YaPay.CurrencyCode.Rub,
merchantId: '<YOUR_MERCHANT_ID>',
cart: getNewCart(),
};
// Обработчик на получение платежного токена
function onPaymentSuccess(event) {
console.log(`OrderId — ${event.orderId}`);
}
// Обработчик на ошибки при оплате
function onPaymentError(event) {
console.log(`Payment error — ${event.reason}`);
}
// Обработчик на отмену оплаты
function onPaymentAbort(event) {}
// Создаем платежную сессию
YaPay.createSession(paymentData, {
onSuccess: onPaymentSuccess,
onAbort: onPaymentAbort,
onError: onPaymentError,
})
.then(function (paymentSession) {
activeSession = paymentSession;
// Создаем кнопку для активной сессии
createPaymentButton();
})
.catch(function (err) {
// Не получилось создать платежную сессию.
});
}
// Функция создания платежной кнопки
function createPaymentButton() {
if (activeSession) {
activeSession.mountButton(buttonContainer, {
type: YaPay.ButtonType.Checkout,
theme: YaPay.ButtonTheme.Black,
width: YaPay.ButtonWidth.Auto,
});
}
}
// Функция пересоздания платежной сессии
function resetPaymentSession() {
// Удаляем активную сессию
if (activeSession) {
activeSession.destroy();
activeSession = null;
}
// Создаем новую сессию
createPaymentSession();
}
// Функция пересоздания платежной кнопки
function resetPaymentButton() {
// Удаляем кнопку на активной сессии
if (activeSession) {
activeSession.unmountButton(buttonContainer);
}
// Создаем новую кнопку
createPaymentButton();
}
resetPaySessionButton.addEventListener('click', resetPaymentSession);
resetPayButtonButton.addEventListener('click', resetPaymentButton);
createPaymentSession();
}
/**
* Сопроводительные функции для иллюстрации работы
*/
function getNewCart() {
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const price = 7990;
const count = randomInt(1, 20);
const total = (count * price).toFixed(2);
document.querySelector('#order_amount').innerHTML = Intl.NumberFormat('ru-RU', {
style: 'currency',
currency: 'RUB',
}).format(total);
return {
items: [{ productId: '3', total, quantity: { count } }],
};
}