Methods

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

Methods perform actions directly through JavaScript instead of HTML. This provides additional flexibility in your code.

With Methods, you can perform many Actions, including: Add, Checkout, Promo, Reset, and ViewCart. However, instead of data-fsc-action, Methods use fastspring.builder.

Each method requires 2 parts:

  • The Store Builder Library script
  • The JavaScript method

Callback Functions

All public methods in the Store Builder Library accept a callback function. This allows you to wait for the action to complete before running additional code. Callback functions receive the order object as a parameter from the first method. This provides you with more flexibility than the data-data-callback, which is only called one time for a request chain.

❗️

fastspring.builder.checkout() does not accept a callback due to its finite nature.

In the example below, the callback function adds the Phot.io Main App product to the cart. Then, it retrieves data and updates the text to say “Phot.io Main App was added to the cart.”

fastspring.builder.add("phot-io-main-app", function(data){
        console.log( "phot-io-main-app was added to cart", data);
    });

Methods

Add Product

The fastspring.builder.add(product) method adds a product to the cart by changing the selected attribute from False to True. This does not adjust the quantity of the product.

fastspring.builder.add('phot-io-main-app');

Checkout

The fastspring.builder.checkout() method initiates the Popup checkout. You can pass a Session ID or parameter to launch the session within the Popup Storefront, or to direct customers to a Web Storefront. This method does not accept callbacks.

<button onclick="fastspring.builder.checkout();">Checkout</button>

Clean

The fastspring.builder.clean() method resets the cart after a consumer completes their purchase. No input is required.

<script type="text/javascript">
    fastspring.builder.clean();
    fastspring.builder.add('phot-io-main-app'); 
</script>

###Country
Add a country code to fastspring.builder.country(countryCode) to change the country associated with the order. This localizes the page and changes the pricing to include the appropriate currency and tax. The country code format is ISO 3166-1 alpha-2

<button onclick="fastspring.builder.country('de');">Switch To Germany</button>

###Language
Add a language code to fastspring.builder.language(languageCode) to change the language associated with the order. This may affect price and localization formatting in your store. The language code format is ISO 639-1.

<button onclick="fastspring.builder.language('DE');">Switch To German</button>

###Payment
The fastspring.builder.payment(“paypal”) method sets PayPal as the customer's payment method. Then, it redirects to Paypal for the buyer to approve the purchase.

<button onclick="fastspring.builder.payment('paypal');">Pay with PayPal</button>

###Postal Code
The fastspring.builder.postalCode() method collects the postal code of each US-based transaction. FastSpring uses this to calculate the sales tax. This allows you to display sales tax amounts for US orders on your page prior to checkout.

<input type="text" name="postalcode" id="postal-code">
 
<button onclick="fastspring.builder.postalCode(“02143”document.getElementById('postal-code').value);">Apply Postal Code</button>

###Promo Code
Add a coupon code to fastspring.builder.promo(code) to apply the coupon to an order session. When FastSpring validates the code, the pricing information automatically changes to reflect the discount.

<input type="text" name="Coupon" id="coupon-code">
 
<button onclick="fastspring.builder.promo(“MYCOUPON”document.getElementById('coupon-code').value);">Apply Coupon</button>

###Push
The fastspring.builder.push(object) method pushes all order session information to FastSpring with a JSON object. See Session Object to pass a session object to the SBL using this method.

In the example below, a variable resets the cart, adds 3 Phot.io Main App products, collects the contact information and language, and pushes it to FastSpring.

var mySession = {
  "reset": true,
  "products" : [
    {
      "path":"phot-io-main-app",
      "quantity": 3
    }
  ],
  "paymentContact": {
    "email":"[email protected]",
    "firstName":"John",
    "lastName":"Doe"
  },
  "language":"en"
};
fastspring.builder.push(mySession);

Recognize Secure Payload

The fastspring.builder.recognize(securePayload, secureKey) method prefills unauthenticated customer information to the browser session. This does not hide the input fields during checkout; the information is not visible to customers in the response builder object.

fastspring.builder.recognize(
    {
        "email":"[email protected]",
        "firstName":"myFirstName",
        "lastName":"myLastName"
    }
);

Recognize Recipients

The fastspring.builder.recognizeRecipients({recipient object}) method prefills unauthenticated gift recipient information to the browser session. This does not hide the input fields during checkout.

This information is not visible as plain text in the response builder object; it must be accessed through the session.

fastspring.builder.recognizeRecipients(
    {
        "email":"[email protected]",
        "firstName":"myFirstName",
        "lastName":"myLastName",
        "address": {
            "addressLine1": "Address Line 1",
            "city": "City",
            "region": "California",
            "postalCode": "93101",
            "country": "US"
        },
        "memo": "Happy Birthday!"
    }
);

Remove a Product

The fastspring.builder.remove(product) method removes a specific product from the cart. This changes the 'selected' attribute to false and resets the quantity to 1. No other product is affected.

<button onclick="fastspring.builder.remove('phot-io-main-app');">Remove</button>

Reset the Cart

The fastspring.builder.reset() method empties the customer's cart. If you do not pass a session object, you can call this method on page load to ensure the cart information is up to date.

<button onclick="fastspring.builder.reset();">Empty Cart</button>

Secure Payload

The fastspring.builder.secure(securePayload, secureKey) method passes sensitive data over a secure request. Sensitive data may include contact, payment, or pricing information.

If the contact information is specified in a JSON object, it will be hidden from the checkout page. If you use the JSON object in a live storefront, encrypt it on the server side beforehand. You can use the method in test mode without encryption. For more information, see Pass a Secure Request.

fastspring.builder.secure(
    {
        "contact": {
            "email":"[email protected]",
            "firstName":"John",
            "lastName":"Doe"
        },
        "items": 
        [
            {
                "product": "phot-io-main-app",
                "quantity": 1,
                "pricing": {
                    "price": {
                    "USD": 19.00
                    }
                }
            }
        ]
    }
);

Tags

The fastspring.builder.tag({‘key1′:’value1’, ‘key2’:’value2’… }) method attaches order-level tags as key-value pairs to orders. The SBL takes one or more key-value pairs as input; then it applies tag(s) to the session. Use JSON formatting to supply the key-value pairs. The maximum number of characters is 4,000.

<button id="push-button" onclick="fastspring.builder.tag({'myKey':'myValue'});">Add Tag</button>

###Tax ID
Pass a customer's VAT ID through fastspring.builder.taxId(vatExclusionCode) 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.

<input type="text" name="Tax ID" id="taxId0">
 
<button onclick="fastspring.builder.taxId(“XY999999999”document.getElementById('taxId0').value);">
    Apply Tax Id
</button>

Update Product Quantity

The fastspring.builder.update(string product, int quantity) method updates the product quantity in the cart using associated product parameters and an integer.

fastspring.builder.update('phot-io-main-app', 5)

View Cart

The fastspring.builder.viewCart() opens the Popup Storefront cart page; this method does not expect input.

<button onclick="fastspring.builder.viewCart();">View Cart</button>

Did this page help you?