Setup of Storyblok Commerce

Storyblok Commerce is a API based ecommerce as a service.

You have two possibilities to use Storyblok Commerce:

  1. UI + API: Add ready to use UI components for the checkout and order summary to your page
  2. API only: Only use the API and create your own UI

Possibility 1: UI + API

Install the app

First singup at app.storyblok.com and create a new space for your shop. Then install Storyblok Commerce going to the “Apps” page and clicking “Install”.

Install Storyblok Commerce

You will get a page with your API keys. Copy the public API-key to your clipboard. You will need it later. The API keys are always accessable through the apps page. Notice there has also been activated the admin interface to administrate the shop in the sidebar.

Copy Storyblok Commerce API Key

Add the UI components to your page

First add the script and stylesheet for the UI components to the page before the closing </body> tag and replace YOUR_TOKEN with the public token of the commerce app (see the previous step).

<link rel="stylesheet" type="text/css" href="https://commerce.storyblok.com/f/styles.css">
<script src="https://commerce.storyblok.com/f/latest.js?t=YOUR_TOKEN"></script>

Add the attribute data-sb-buy-button to a buy button element on your page and define a callback function to handle the event when the product gets added to the cart.

The options for the buy button are

  • sku - Articlenumber of the article.
  • id - The Storyblok Commerce product id. Alternative to the sku.
  • callback - Callback function that gets called when products has been added.
  • currency - ISO 3 digit currency code to initialize the checkout in the right currency.
<button data-sb-buy-button="sku: tshirt; callback: myCallback">
   Add product to cart
</button>
<script type="text/javascript">
  window.myCallback = function(data) {
    // Redirect to checkout page or do stuff with the cart data
    console.log(data)
    // Example: window.location.href = '/checkout'
  }
</script>

Add the attribute data-sb-checkout to an element on the same page or on the page you may redirect in the myCallback function. The option locale accepts ‘de’ and ‘en’ at the moment (Please contact us to get more languages).

<div data-sb-checkout="locale: de"></div>

Example

Checkout the example to see how all works together.

Open example

Customization possibilities

To overwrite the styles of the checkout you can replace the css with your own by replacing the stylesheet tag https://commerce.storyblok.com/f/styles.css with your own. You can find all SCSS styles at Github.

Possibility 2: API only

If you don’t need prebuilt UI components you can use the API Storyblok Commerce directly. Following there are some examples of common tasks for an online shop:

Add a product to the cart

The most important part here is that you need to take care of the management of the uuid of the checkout. You can save it to the localstorage of the browser or use a serverside session for the user. The following function addProductToCart checks if there is any uuid in the localstorage and if not creates a new checkout.

let token = 'YOUR_TOKEN'
let client = axios.create({
  baseURL: 'https://capi.storyblok.com/v1/',
  headers: {
    'Authorization': 'Token token=' + token,
    'Locale': 'en',
    'Currency': 'USD'
  }
})

let addOrderItem = function(checkoutUuid, id) {
  let orderItem = {
    product_id: id,
    url: window.location.href,
    quantity: 1
  }

  api().post(`checkouts/${checkoutUuid}/order_items`, orderItem)
    .then((res) => {
      console.log(res.data.checkout)
    })
    .catch((error) => {
      console.log(error.response.data)
    })
}

let addProductToCart = function(productId) {
  let uuid = window.localStorage.getItem('checkout_uuid')

  if (!uuid) {
    client.post('checkouts')
    .then((res) => {
      if (res.data.uuid) {
        window.localStorage.setItem('checkout_uuid', res.data.uuid)
        addOrderItem(res.data.uuid, productId)
      }
    })
    .catch((error) => {
      console.log(error.response.data)
    })
  } else {
    addOrderItem(uuid, productId)
  }
}

Define a guest checkout

let doGuestCheckout = function(email) {
  let uuid = window.localStorage.getItem('checkout_uuid')

  client.put(`/checkouts/${uuid}`, {
      email: email,
      is_guest: true
    })
    .then((res) => {
      console.log(res.data)
    })
}

Add the address to the checkout

let addAddressToCheckout = function(address) {
  let uuid = window.localStorage.getItem('checkout_uuid')

  client.put(`/checkouts/${uuid}`, {
      ship_address_attributes: address,
      ship_as_bill: true
    })
    .then((res) => {
      console.log(res.data)
    })
}

Create order from checkout and process payment

let createOrderFromCheckout = function() {
  let uuid = window.localStorage.getItem('checkout_uuid')

  client.post(`checkouts/${uuid}/orders`)
    .then((res) => {
      window.localStorage.removeItem('checkout_uuid')

      client.post(`orders/${res.data.order_number}/payments`, {payment_method: 'cod'})
        .then((res) => {
          if (res.data.redirect_url) {
            window.location.href = res.data.redirect_url
          } else {
            window.location.href = '/thankyou'
          }
        })
    })
}

Examples and API-docs

For more examples of how to use the API checkout the example on Github or read the API-Documentation.

Github Examples API-Documentation