Пересоздание платежной сессии и кнопок Яндекс Пэй
Иногда возникает необходимость пересоздания платежной сессии и платежных кнопок. Например, кнопка может показываться в динамическом блоке, а сессия пересоздаваться при динамическом каталоге.
Процесс пересоздания предполагает удаление активных сессии и кнопок перед созданием новых.
Удаление платежной сессии
При удалении сессии также удаляются все платежные кнопки, относящиеся к этой сессии.
// Удаление платежной сессии и кнопок
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(amount) {
// Данные платежа
const paymentData = {
env: YaPay.PaymentEnv.Sandbox,
version: 4,
currencyCode: YaPay.CurrencyCode.Rub,
merchantId: '<YOUR_MERCHANT_ID>',
totalAmount: `${amount}.00`,
availablePaymentMethods: ['CARD', 'SPLIT'],
};
// Обработчик на клик по кнопке
// Функция должна возвращать промис которые резолвит ссылку на оплату полученную от бэкенда Яндекс Пэй
// Подробнее про создание заказа: https://pay.yandex.ru/ru/docs/custom/backend/yandex-pay-api/order/merchant_v1_orders-post
async function onPayButtonClick() {
/* Создание заказа... */
}
// Создаем платежную сессию
YaPay.createSession(paymentData, {
onPayButtonClick: onPayButtonClick,
})
.then(function (paymentSession) {
activeSession = paymentSession;
// Создаем кнопку для активной сессии
createPaymentButton();
})
.catch(function (err) {
// Не получилось создать платежную сессию.
});
}
// Функция создания платежной кнопки
function createPaymentButton() {
if (activeSession) {
activeSession.mountButton(buttonContainer, {
type: YaPay.ButtonType.Pay,
theme: YaPay.ButtonTheme.Black,
width: YaPay.ButtonWidth.Auto,
});
}
}
// Функция пересоздания платежной сессии
function resetPaymentSession() {
// Удаляем активную сессию
if (activeSession) {
activeSession.destroy();
activeSession = null;
}
// Создаем новую сессию
createPaymentSession(getNewAmount());
}
// Функция пересоздания платежной кнопки
function resetPaymentButton() {
// Удаляем кнопку на активной сессии
if (activeSession) {
activeSession.unmountButton(buttonContainer);
}
// Создаем новую кнопку
createPaymentButton();
}
resetPaySessionButton.addEventListener('click', resetPaymentSession);
resetPayButtonButton.addEventListener('click', resetPaymentButton);
createPaymentSession(7990);
}
/**
* Сопроводительные функции для иллюстрации работы
*/
function getNewAmount() {
const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const price = 7990;
const count = randomInt(1, 20);
return price * count;
}
Была ли статья полезна?
Предыдущая
Следующая