Common mistakes
Errors arising when accessing the Yandex Pay Web SDK might be related to browser behavior or the Yandex Pay internal logic.
Below are the examples of errors that should be avoided and recommendations on how to fix them.
Updating the Yandex Pay cart
Updating the cart is an asynchronous action that includes the following steps:
- The user changes the items in the cart or the final order amount.
- The merchant updates the data on their server.
- The merchant updates the data in the payment session Yandex Pay.
The problem is that the user might start the payment process somewhere between Step 1 and Step 2, before the updated data has arrived. As a result, the user might click the button and open the Yandex Pay form with the old cart.
To avoid such a situation, updating the cart must lock the Yandex Pay button for the update period.
As an argument, the paymentSession.update method accepts a function (which is immediately executed). As a result of this function, a Promise is expected. The button is locked until the Promise resolves.
Recommended
paymentSession.update(async function() {
const newPaymentData = {
cart: {
items: [
{
productId: '1',
total: '300.00',
quantity: { count: 2 } // The user added two items to the cart
}
]
},
metadata: 'new-order-metadata'
}
// Example of asynchronous action
await saveNewCart(newPaymentData);
return newPaymentData;
});
Errors for archived versions of the Web SDK interface
Alert
If you are using the deprecated YaPay.createPayment method, be aware of the errors related to it.
Nevertheless, we strongly recommend that you switch to the new Web SDK interface and the YaPay.createSession method, where such errors are impossible.
Window blocking Yandex Pay
Some browsers might block the window with the Yandex Pay form if an asynchronous call has occurred between clicking the Yandex Paybutton and creating the window. This behavior is characteristic of the Safari and Firefox browsers at the moment.
Recommended
button.on(YaPay.ButtonEventType.Click, function () {
payment.checkout();
<any-async-action>.then(() => {
// ...
});
});
Not recommended
button.on(YaPay.ButtonEventType.Click, function () {
// Any asynchronous action initiated between the click and window rendering, blocks the popup window.
<any-async-action>.then(() => {
payment.checkout();
});
});
Event handling Yandex Pay
Once you create a payment, you need to immediately subscribe to the payment's events. This is important when Yandex Pay transfers payments via redirect queries.
Recommended
YaPay.createPayment(paymentData).then(function (payment) {
/* ... synchronous actions ... */
payment.on(YaPay.PaymentEventType.Process, function(event) { /*...*/ });
payment.on(YaPay.PaymentEventType.Error, function(event) { /*...*/ });
payment.on(YaPay.PaymentEventType.Abort, function(event) { /*...*/ });
});
Not recommended
YaPay.createPayment(paymentData).then(function (payment) {
var button = payment.createButton();
button.on(YaPay.ButtonEventType.Click, function () {
// Subscribe to the events occurring after the click.
payment.on(YaPay.PaymentEventType.Process, function(event) { /*...*/ });
payment.on(YaPay.PaymentEventType.Error, function(event) { /*...*/ });
payment.on(YaPay.PaymentEventType.Abort, function(event) { /*...*/ });
payment.checkout();
});
});
or
YaPay.createPayment(paymentData).then(function (payment) {
<any-async-action>.then(() => {
// Subscribe to the events occurring after the asynchronous action.
payment.on(YaPay.PaymentEventType.Process, function(event) { /*...*/ });
payment.on(YaPay.PaymentEventType.Error, function(event) { /*...*/ });
payment.on(YaPay.PaymentEventType.Abort, function(event) { /*...*/ });
});
});