# Hosted Shopping Cart

The purpose of the Cart API is to provide a javascript implementation that gives you an easy way to add products to your website and a simple checkout page.

# Basic usage

# Step 1 - Include and initialize the cart

This will need to be put inside the HEAD tags on your website.

TIP

TIP: Make sure to replace URL_GOES_HERE with

TIP

TIP: Replace CartID_GOES_HERE with the cartID value provided from the merchant control panel. This can be found in Shopping - Carts and clicking the </> icon.

TIP

TIP: Replace all three "example.com/" placeholders with your respective urls.

<script src="URL_GOES_HERE/cart/cart.js"></script>
<script>
  var cart = new Cart({
    // The fields below are required
    cartID: '55e8cb7a-2d50-2235-a546-166e8bcp1569',
    checkout_url: 'http://example.com/',
    cancel_url: 'http://example.com/cancel',
    success_url: 'http://example.com/success',
  })
</script>

# Step 2 - Add product buttons to your website

There are two types of buttons you can use on your website. One will add the item to your cart and keep the user on your website, until they click a checkout button. The other will add the item to your cart as well as redirect the user to the hosted checkout page. This script is normally placed in the BODY tags of your website.

TIP

Replace ‘ProductID_GOES_HERE’ with the Product ID value provided from the merchant control panel. This can be found in Shopping - Products and clicking the </> icon of the respective product.

Add product and keep user on page:

<button onclick="cart.addProduct(‘ProductID_GOES_HERE’)"
>Add to Cart</button>

Add product and directly checkout:

<button onclick="cart.addProductCheckout(‘ProductID_GOES_HERE’)"
>Add to Cart</button>

NOTE: As is, with no quantity parameter, it defaults to 1.

# Step 3 - Add a checkout button

<button onclick="cart.checkout()">Checkout</button>

# Advanced usage

# Donation Example

The Donation function offers the user the flexibility to pay any amount desired. One situation where this could be helpful is a place to pay tips.

<html>
  <head>
    <script src="URL_GOES_HERE/cart/cart.js"></script>
    <script>
      var cart = new Cart({
        // The fields below are required
        cartID: '55e8cb7a-2d50-2235-a546-166e8bcp1569',
        checkout_url: 'http://example.com/',
        cancel_url: 'http://example.com/cancel',
        success_url: 'http://example.com/success',
      })

      function addDonation() {
        var price = document.getElementById('price').value
        cart.addProductCheckout('product_id', 1, price)
      }
    </script>
  </head>
  <body>
    <input id="price" type="number" value="0" />
    <button onclick="addDonation()">Add to Cart</button>
  </body>
</html>

TIP

TIP: The number field processes the amount in cents. Example: 1299 = $12.99

# Methods/Options

# onChange callback

onChange will trigger when products are added or removed from your cart. Two values will be returned:

  1. available_products - products that belong to the cart you have created in your control panel
  2. cart_products - products that the user has added to their cart totals - breakdown of subtotal, tax and total amounts
var cart = new Cart({
  onChange: (data) => {
    var available_products = data.available_products
    var cart_products = data.cart_products
    var totals = data.totals
  }
})

# onError callback

onError will trigger when the package comes across considerable errors.

var cart = new Cart({
  onError: (err) => {
    alert(err)
  }
})

# GetProductByID

Will return back an object of the product information.

::: TIP: Remember to replace ‘ProductID_GOES_HERE’ with the Product ID value. :::

cart.getProductByID('ProductID_GOES_HERE')

# GetCartProducts

Will return back the current list of available products to purchase for a given cart.

cart.getCartProducts()

# AddProduct

Will add a specific product to a users cart.

::: TIP: For AddProduct and AddProductCheckout, qty and price are optional. However if qty is omitted it defaults to 1. If price is omitted it defaults to whatever is configured in your dashboard. :::

::: TIP: Remember to replace ‘ProductID_GOES_HERE’ with the Product ID value. :::

cart.addProduct('ProductID_GOES_HERE', qty, price)

# AddProductCheckout

Will add a specific product to a users cart and start the checkout.

::: TIP: Remember to replace ‘ProductID_GOES_HERE’ with the Product ID value. :::

cart.addProductCheckout('ProductID_GOES_HERE', qty, price)

# RemoveProduct

Will remove a specific product from a users cart.

::: TIP: Remember to replace ‘ProductID_GOES_HERE’ with the Product ID value. :::

cart.removeProduct('ProductID_GOES_HERE')