# Simple Shopping Cart

Adding a product to a cart and sending them to the checkout page can be a simple one line code that doesnt require any javascript.

# Code Example

<a href="{https://sandbox.2apgateway.com}/checkout/{public_cart_hash}?add_products={public_product_hash}">Buy Now</a>

# Adding quantity and amount

By adding : after the product hash, you can add a quantity and amount to the product. This helps for products that dont have fixed qty and/or fixed amount. Amount format contains a dot for decimals.

<a href="{https://sandbox.2apgateway.com}/checkout/{public_cart_hash}?add_products={public_product_hash}:{quantity}:{amount}">Buy Now</a>

# 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 https://sandbox.2apgateway.com with Also make sure to replace ENV_https://sandbox.2apgateway.com with for sandbox and for production.

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="https://sandbox.2apgateway.com/cart/cart.js"></script>
<script>
  var cart = new Cart({
    // The fields below are required
    cartID: '55e8cb7a-2d50-2235-a546-166e8bcp1569', // This is your card id from the control panel
    checkout_url: 'ENV_https://sandbox.2apgateway.com', // This is the environment you are wishing to hit, sandbox.<domain> or app.<domain>
    cancel_url: 'http://example.com/cancel', // This is the url you wish to redirect your customers to when they cancel a checkout
    success_url: 'http://example.com/success', // This is the url you wish to redirect your customers to when they complete a successful checkout
  })
</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="https://sandbox.2apgateway.com/cart/cart.js"></script>
    <script>
      var cart = new Cart({
        // The fields below are required
        cartID: '55e8cb7a-2d50-2235-a546-166e8bcp1569', // This is your card id from the control panel
        checkout_url: 'ENV_https://sandbox.2apgateway.com', // This is the environment you are wishing to hit, sandbox.<domain> or app.<domain>
        cancel_url: 'http://example.com/cancel', // This is the url you wish to redirect your customers to when they cancel a checkout
        success_url: 'http://example.com/success', // This is the url you wish to redirect your customers to when they complete a successful checkout
      })

      function addDonation() {
        var price = document.getElementById('price').value
        cart.addProductCheckout('product_id', 1, price) // remember to replace product_id with the product id from the control panel
      }
    </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

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

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

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

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

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

cart.removeProduct('ProductID_GOES_HERE')