Locking mechanism

When a customer enters the checkout page, the cart is sent to Ecster via the REST call Create order. Whenever the customer makes changes to the cart, the updated cart is sent to Ecster via the REST call Update order. Both calls create a new order in Ecster and returns a new order reference for each call to your application. Since you get a new order reference every time you call Update order, you need to make sure Ecster always knows about the latest changes. If the customer would spam changes to the cart, an equal number of calls would be made to Update order. A lot of asynchronous requests executed in a short time span does not ensure that the responses are returned in the same order. The effect of this could be that the reference last returned is actually not the most recent reference. Therefore, you need to disable the customer from making changes to the cart while Update order is executing. This will prevent new calls from being executed before the current call has been handled and finished.

Ecsters JavaScript API has some functions to help you accomplish this. To begin with, the Ecster frame has its own locking mechanism. When your frontend starts or updates Ecster, its interface disables the customer from making any changes to the checkout frame. If you were to try and execute additional calls during the lock, these will generate an error which you can catch.

If your checkout page allows the customer to make changes to the cart, you will need to disable these options while update order is being executed.

Disable dynamic changes

Upon starting, the store should initialize when the callback onCheckoutStartInit is called. Unlocking will occur when the onCheckoutStartSuccess or onCheckoutStartFailure is called.

During an order update, locking of the shop should start when onCheckoutUpdateInit and unlocking when onCheckoutUpdateSuccess or onCheckoutUpdateFailure is called.

EcsterPay.start({
    orderReference: orderReference,
    shopTermsUrl: urlToShopTerms,
    onCheckoutStartInit: function() {
        // disable dynamic changes to the Ecster order
    },
    onCheckoutStartSuccess: function() {
        // enable dynamic changes
    },
    onCheckoutUpdateInit: function() {
        // disable dynamic changes to the Ecster order
    },
    onCheckoutUpdateSuccess: function() {
        // enable dynamic changes
    }
});
Request test account