FastSpring AppAPI ReferenceWebhooksJavascript LibraryChangelogFastSpring.com
Sign In

Actions

Use directives to initiate a behavior against the Store Builder Library.

Actions are markers on a Document Object Marker (DOM) element that allow you to interact with the Store Builder Library (SBL) through HTML. You can use actions instead of JavaScript code to instruct the SBL. The associated directives typically require the following:

  • The Store Builder Library Script
  • A path to a specific product: data-fsc-item-path=…
  • The action you are wanting to perform: data-fsc-action=…

These data attributes define the action, and what it affects. In the example below, the “Add to Cart” button consists of the following:

  • Button
  • Action to add the product to the customer’s shopping cart
  • Path of the specified product. 
<button data-fsc-item-path-value="phot-io-main-app" data-fsc-action="Add">Add to Cart</button>

Chained Actions

You can chain actions together to complete multiple actions within one item. Each included action happens when a user clicks the associated button. This requires an HTML directive for each action.

In the example below, there are two actions within one button: "Add" and "Checkout". This adds the Phot.io Main App product to the cart and redirects the customer to checkout. See our interactive chained actions to test it out. 

<button data-fsc-item-path-value='phot-io-main-app' data-fsc-action="Add, Checkout" >
	Add to cart
</button>

Auto Apply

The data-fsc-autoapply attribute automatically makes a callout to change an order session. Changes include adjusting the quantity of a product, or applying coupon code in the shopping cart. This way, when customers adjust fields in their shopping cart, you do not need to call fastspring.builder.update().

In the example below, the data-fsc-autoapply attribute creates a callout to adjust the quantity of the Phot.io Main App. 

<span data-fsc-item-path="phot-io-main-app" data-fsc-item-quantity>
	<!--This value will be replaced-->

<select data-fsc-autoapply data-fsc-item-quantity-value data-fsc-item-quantity data-fsc-item-path-value="phot-io-main-app" data-fsc-item-path="phot-io-main-app" data-fsc-action="Update">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>

Data-fsc-autoapply enables the system to automatically apply the Action Items listed below. When you adjust the number in the input field, it is onBlur. If there is a quantity field, the SBL will automatically update the quantity for that product.

Action Items

Each action can operate as a standalone or chained action. Use the samples to add buttons to your customer's checkout experience. Clicking a button initiates the associated checkout behaviors.

Add

The Add action adds products to the cart. Values change from false to true, and the product quantity defaults to 1. This field requires a product path, as defined by fsc-item-path-value.

If you set data-fsc-silent='true', the SBL can add items to the cart more quickly. This only applies when the page does not require a full refresh. 

<button data-fsc-item-path="my-path" data-fsc-action="Add" data-fsc-silent="true">Add</button>

Checkout

The checkout action redirects customers to a checkout page. This does not require additional fields. 

<button data-fsc-action="Checkout">

Direct to PayPal Checkout

The direct to Paypal checkout action redirects customers to check out using PayPal. This does not require additional fields. 

<button data-fsc-action="PaypalCheckout">
	Pay with PayPal
</button>

Promocode

The promocode action collects coupon codes on your website. Customers can apply the coupon through a script or page element. This requires a data-fdc-promocode-value input, and a data-fsc-action button.

<input type="text" data-fsc-promocode-value  />
<button data-fsc-action="Promocode">
    Apply Coupon
</button>

Remove

The remove action removes a product from the cart, and changes Selected to False. This requires a product path defined by fsc-itam-path-value.

This action only applies if you use a shopping cart or Smart Display. 

<button data-fsc-item-path-value="phot-io-main-app" data-fsc-action="Remove">Remove</button>

Reset

The reset action empties the cart and clears all associated information. This does not require additional fields. 

<button data-fsc-action="Reset">
	Empty Cart
</button>

Tax ID

Pass a customer's VAT ID through data-fsc-order-taxId to remove the tax from the order. FastSpring will validate the ID with the customer’s country. If valid, FastSpring will apply their VAT ID to the order and remove tax.

For an interactive example, see FastSpringExamples. 

<input type="text" data-fsc-taxid-value />
<button data-fsc-action="TaxId">
    Apply Tax ID
</button>

Update

The update action changes an item's quantity. This requires the product path defined by fsc-item-path-value and uses the nearest input field. 

<select id="quantity" data-fsc-item-path-value="phot-io-main-app" data-fsc-item-quantity-value>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>
<button data-fsc-item-path-value="phot-io-main-app" data-fsc-action="Update">Update Quantity</button>
<span data-fsc-item-path="phot-io-main-app" data-fsc-item-quantity></span>

View Cart

The ViewCart action initiates the cart page for the current session. This enables you to open the Popup Storefront directly in the cart session. 

<button data-fsc-action="ViewCart">
	View Cart
</button>