Advanced Usage

The Simpler JavaScript SDK can be instantiated with a more advanced configuration which will override the default values.

Configuration

Options are passed to the checkout() function as object:

Simpler.checkout({
  appId: "00000000-0000-0000-0000-000000000000",
  target: document.getElementById("checkout-form"),
  currency: "EUR",
  locale: "en",
  separator: "marquee",
  source: "checkout_page",
  items: [{
    id: "123",
    quantity: 2,
    attributes: [{
      key: "color",
      value: "blue"
    }]
  }],
  onSuccess(orderId) {
    // redirect user to order success page
    window.location.pathname = "/success?order_id=" + orderId;
  },
});

Property	Accepted Value(s)	Default Value
`appId`	A valid UUID string	Required
`target`	A valid HTML Element	Required
`currency`	A valid ISO 4217 currency code (i.e `USD`)	Required
`locale`	`en` \| `fr` \| `it` \| `es` \| `el`	`en`
`separator`	`top` \| `bottom` \| `marquee`	`null`
`source`	`product_page` \| `cart_page` \| `checkout_page` \| `minicart`	`null`
`items`	This property holds an array of cart items.	`[]`
`items[0].id`	The product identifier.	Required
`items[0].quantity`	The product's cart quantity.	`1`
`items[0].attributes`	A key-value pair of attribute code and its related value id.	`[]`
`onSuccess`	A callback function which will be invoked once order has been successfully submitted from Simpler to the remote API. This callback provides the `orderId`.	`null`