Shopping cart

The shopping cart object is used to interact with the checkout flow, but generally handles everything internally.  Some methods are exposed to allow adding products manually so that picking products can be custom-built without using any Buy Button content areas.


addProduct(productObject: Object, note: ?string, quantity: ?number)
This method either adds a new item or finds an existing item in the shopping cart, incrementing its count by the given quantity. If the note is given, it tries to merge objects with the same id and note.

 — the whole product object, structurally the same as you would get from the API response
note — a note string (added to the end of the product name) (default: undefined)
quantity — the amount by which the item is incremented (default: 1)

addProductById(productId: number, note: ?string, quantity: ?number)
Functionally similar to the previous method, but takes a product id instead. An API request is then made, fetching the product information and the result (if found) is passed on to addProduct, together with the given note and quantity.

productId — the ID of the product
note — a note string (added to the end of the product name) (default: undefined)
quantity — the amount by which the item is incremented (default: 1)

This flashes the default shopping cart button just like when you click a Buy Button to add a product to the cart. Useful when you are using a custom interface to add products to the cart and would like to add a visual indicator.

removeProduct(productObject: {id: number, note: ?string})
This method tries to find a matching item from the cart and remove it, if possible. Only products that have the same id and note are removed.

This method returns the shopping cart contents.

This method makes the shopping cart visible, renders all cart items and calculates the tax amounts.

init(languageCode: string)
This method creates and initializes the shopping cart on the current page, attaching all relevant events and loading translations according to the given language code.languageCode — language code of the current page



detail: shoppingCartData — the whole shopping cart object

Emitted when something in the shopping cart changes - item quantities, product notes etc.


detail: product — the added product object

Emitted when a new or existing product is added to the cart


detail: product — the updated product object

Emitted when a product's quantity changes


detail: product — the removed product object

Emitted when a product is removed from the shopping cart


detail: {
method: method, — payment method code, e.g. "seb"
gateway: gatewayCode — payment gateway code, e.g. "makecommerce"

Emitted when a payment method is selected for checkout


Emitted when the shopping cart button is shown, e.g. when adding the first product or navigating to another page.


Emitted when the shopping cart button is hidden, e.g. when the contents are cleared.


Emitted when the shopping cart button element is added to the DOM.


Emitted when the shopping cart modal is closed.


detail: {
view: view, — One of ("cart", "shipping_form", "review", "download_invoice", "redirect")
[status: status] — One of ("pending", "cancelled", "success", "failed"), added only to "redirect" views

Emitted when a new view is rendered in the shopping cart modal. 


detail: method — the selected shipping method object

Emitted when a shipping method is selected from the dropdown.


detail: option — the selected shipping method option

Emitted when a new option is selected for the current shipping method.


Emitted when the checkout button is clicked.


Emitted when the shipping info form is submitted


detail: {
status: status

Emitted in the last view, when the user is redirected back after payment.