FastSpring’s Store Builder Library is a JavaScript library which can be used to add e-commerce features to your website. Ranging from simple buy buttons, to localized pricing all the way to a complete full featured shopping cart which is integrated directly into your website design.

Using the FastSpring’s Store Builder Library is fairly simple but you will need some basic HTML and JavaScript knowledge to get started.

Getting to know the parts of the Store Builder Library

Initializing the Store Builder Libarary

The first step to using the Store Builder Library is to initialize the script. Initializing the script is just including the library script on the page. At a minimum it will look similar to the following.

<script
    id="fsc-api"
    src="https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.0/fastspring-builder.min.js"
    type="text/javascript"
    data-storefront="fastspringexamples.test.onfastspring.com/popup-fastspringexamples">
</script>

Breaking down the above script there are 4 main parts.

• id – This is the HTML id of the script.
• src – This is the version of the Store Builder Library.
• type – This tells the browser that this is a JavaScript library
• data-storefront – This is the FastSpring storefront that the Store Builder Library will be working with. Note: The Store Builder Library works with both Web Storefronts and Popup Storefronts.

Extending the Store Builder Library Script

To add more functionality you can add more settings to the Store Builder Library script. These settings are as follows:

• Callbacks – These are JavaScript functions that are performed after another FastSpring Store Builder Library function has finished executing. Learn more about callbacks here.
• data-debug – This is a flag on the script that turns on logging of the Store Builder Library in the browser console.
• data-access-key – This is a key that must be included in the script if you are going to be making secure calls to the Store Builder Library. Learn more about secure calls here.
• data-continuous – This is a flag on the script that defines if the visitor’s session should be persisted after the script is reloaded.

Directives

Directives are markers on a DOM element that allow interaction with the Store Builder Library through HTML. There are three types of directives within the Store Builder Library.

• Product Level Directives – These retrieve information about a single product. Learn more about Product Level Directives here.
• Order Level Directives – These retrieve information about the current order session. Learn more about Order Level Directives here.
• Actions – These allow you to initiate a behavior against the Store Builder Library . Learn more about Actions here.

Methods

Methods are actions that can be performed against the Store Builder Library using JavaScript. Learn more about Methods here.

Using the Store Builder Library

Putting these piece can seem like quite an undertaking but it can be a very simple implementation that provides a good amount of features with very little actual coding up to a full featured cart . We have provided a number of examples of using the Store Builder Library in a simple manner like simply adding a buy button to a page or a more advanced example like a full featured shopping cart.