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

TIP

This will need to be put inside the HEAD tags on your website. Make sure to replace cartID with the value provided from the merchant control panel

TIP

Make sure to replace URL_GOES_HERE with

<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.

<button onclick="cart.addProduct(8675309)">Add to Cart</button>

// Add Product and directly checkout
<button onclick="cart.addProductCheckout(8675309)">Add to Cart</button>

Step 3 - Add a checkout button

cart.checkout()

Advanced usage

Donation Example

<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>

Methods/Options

onChange callback

var cart = new Cart({
  // onChange will trigger when products are added or removed from your cart
  // Two values will be returned:
  //     available_products - products that belong to the cart you have created in your control panel
  //     cart_products - products that the user has added to their cart
  //     totals - breakdown of subtotal, tax and total amounts
  onChange: (data) => {
    var available_products = data.available_products
    var cart_products = data.cart_products
    var totals = data.totals
  }
})

onError callback

var cart = new Cart({
  // onError will trigger when the package comes across considerable errors
  onChange: (err: string) => {
    alert(err)
  }
})

GetProductByID

Will return back an object of the product information

cart.getProductByID('public product id')

GetCartSessionProducts

Will return back a promise of the cart information

cart.getCartSessionProducts()
.then(function(cart) {
    console.log(cart)
})

GetCartProducts

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

cart.getProducts()

AddProduct

Will add a specific product to a users cart

cart.addProduct('public product id', qty, price)

AddProductCheckout

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

cart.addProductCheckout('public product id', qty, price)

RemoveProduct

Will remove a specific product from a users cart

cart.removeProduct('public product id')