Частые ошибки

Ошибки при работе с Yandex Pay Web SDK могут быть связаны с поведением браузеров или с внутренней логикой Yandex Pay.

Ниже приведены примеры ошибок, которых следует избегать, и рекомендации по их исправлению.

Обновление корзины Yandex Pay

Обычно обновление корзины — это асинхронное действие, которое по шагам выглядит так:

  1. Пользователь меняет состав корзины (или конечную сумму заказа).
  2. Продавец обновляет данные у себя на сервере.
  3. Продавец обновляет данные в платежной сессии Yandex Pay.

Проблема в том, что пользователь может начать процесс оплаты где-то между 1 и 2 пунктом, не дождавшись обновленных данных. Таким образом, он нажмет на кнопку и откроет форму Yandex Pay со старой корзиной.

Чтобы избежать подобной ситуации, нужно обновлять корзину с блокировкой кнопки Yandex Pay на время обновления.

Метод paymentSession.update принимает функцию в качестве аргумента (которая тут же выполняется), результатом работы которой ожидается Promise. Кнопка блокируется до резолва Promise.

Рекомендуется

paymentSession.update(async function() {
  const newPaymentData = {
    cart: {
      items: [
        {
          productId: '1',
          total: '300.00',
          quantity: { count: 2 }   // пользователь положил в корзину 2 товара
        }
      ]
    },
    metadata: 'new-order-metadata'
  }

  // пример асинхронного действия
  await saveNewCart(newPaymentData);

  return newPaymentData;
});

Ошибки для архивных версий интерфейса Web SDK

Внимание

Если вы используете устаревший метод YaPay.createPayment, обратите внимание на ошибки связанные с его использованием.
Однако настоятельно рекомендуем вам перейти на новый интерфейс Web SDK и метод YaPay.createSession, где подобные ошибки невозможны.

Некоторые браузеры могут блокировать показ окна с формой Yandex Pay, если между нажатием кнопки Yandex Pay и созданием окна был любой асинхронный вызов. Это поведение пока характерно для браузеров Safari и Firefox.

Рекомендуется

button.on(YaPay.ButtonEventType.Click, function () {
  payment.checkout();
  <any-async-action>.then(() => {
    // ...
  });
});

Не рекомендуется

button.on(YaPay.ButtonEventType.Click, function () {
  // Любое асинхронное действие между кликом и показом блокирует показ всплывающего окна.
  <any-async-action>.then(() => {
    payment.checkout();
  });
});

Работа с событиями Yandex Pay

После создания платежа нужно сразу подписываться на события платежа.
Это важно при работе Yandex Pay через редиректы.

Рекомендуется

YaPay.createPayment(paymentData).then(function (payment) {
  /* ... cинхронные действия ... */
  payment.on(YaPay.PaymentEventType.Process, function(event) { /*...*/ });
  payment.on(YaPay.PaymentEventType.Error, function(event) { /*...*/ });
  payment.on(YaPay.PaymentEventType.Abort, function(event) { /*...*/ });
});

Не рекомендуется

YaPay.createPayment(paymentData).then(function (payment) {
  var button = payment.createButton();

  button.on(YaPay.ButtonEventType.Click, function () {
    // Подписаться на события после клика.
    payment.on(YaPay.PaymentEventType.Process, function(event) { /*...*/ });
    payment.on(YaPay.PaymentEventType.Error, function(event) { /*...*/ });
    payment.on(YaPay.PaymentEventType.Abort, function(event) { /*...*/ });

    payment.checkout();
  });
});

или

YaPay.createPayment(paymentData).then(function (payment) {
  <any-async-action>.then(() => {
    // Подписаться на события после асинхронного действия.
    payment.on(YaPay.PaymentEventType.Process, function(event) { /*...*/ });
    payment.on(YaPay.PaymentEventType.Error, function(event) { /*...*/ });
    payment.on(YaPay.PaymentEventType.Abort, function(event) { /*...*/ });
  });
});