Easy Basket, Free AJAX Shopping Cart with Paypal & Google Checkout

Minimum Requirements

  • IIS 5.0 (if using ASP Core)
  • PHP 5.0 (if using PHP Core)

Easy Basket Flow

  • Client Html Form
  • Your html Form holds infomation about the item you wish to "Add To Cart"
  • Client jQuery
  • The Html Form is submitted to a jQuery function that serilizes the form and sends it via AJAX to the web server. An "Add to Cart" notification will also appear on screen

  • Server
  • When the AJAX data arrives, it is inspected to decide the action to be taken

    • Add Update or Delete Item
    • The command from the AJAX is inspected, depnding on the command Easy Basket either Adds Updates or Deletes. The action is done and the form is converted to XML and stored at the server

    • Return Basket
    • The XML stored at the server is transformed via XSL to HTML. This allows for the basket core to be completely independant of the Skin which is rendered in the browser, throught the use of XSL transforms any skin can be created so Easy Basket can completely match your site. The updated basket is sent back to your browser via the AJAX return function.

  • Client jQuery
  • The updated basket is sent back to the browser via AJAX and the added to cart notification is removed

  • Client Html
  • The basket is rendered in the browser

The flow above is a description of basket flow using the Skin provided, if for instance you do not want to use AJAX you could skip jQuery calls and just submit to the handler page directley

Easy Basket field names

To accept items from your store Easy Basket needs to know the field names used in your item forms

More Complex "Add To Cart" Buttons

Includes Title, Image, Link and per item Postage
Includes Title, Description, Image, Link and per item Postage with subsequent charge after the first item.

Easy Basket's API

Easy Basket Skin Showing all API Features

This skin uses a table for layout and very minimal embeded CSS

Fetching...
Current XML

Debug skin, this shows the raw XML, very useful for building a new skin.

<!-- Basket XML -->

The code to dispaly each basket is as folows

  • <div class="easybasket"></div> Default Skin (The one in the nav bar)
  • <div class="easybasket" title="skin=basic.xsl"></div> Basic Skin (This is the basic table layout skin on this page)
  • <div class="easybasket" title="debug=true"></div> Debug Skin (Raw XML)

You can write your own skin or edit one of the skins provided, if you save your skin as new.xsl, you would use as follows
<div class="easybasket" title="skin=new.xsl"></div>

Methods & Propeties

PayPal Variables

Website Payments Standard Integration Guide (PDF, 4.6 MB, March 2008)

Relevant extracts from the preceding guide

Absolute minimum a Paypal shopping cart needs

Variables Description Length
cmd Must be set to _cart
upload Must be set to 1
business Email address of your PayPal account
amount_X Price of item #X.
item_name_X Name of item #X in the cart. Must be alphanumeric. 127

Paypal variables relevant to an individual item in your shopping cart (page 354)

Variables Description Length
amount_X Required Price of item #X.
handling_X Optional The cost of handling for item #X.
item_name_X Required Name of item #X in the cart. Must be alphanumeric. 127
item_number_X Optional Passthrough variable for you to track order or other purchase.
Default: no variable is passed back to you
127
on0_X Optional First option field name for item #X. 64
os0_X Optional First set of option value(s) for item #X. Requires that on0_X also be set. 64
on1_X Optional Second option field name for item #X. 200
os1_X Optional Second set of option value(s) for item #X. Requires that on1_X also be set. 200
quantity_X Optional Quantity of the item #X.
NOTE: The value of quantity_X must be a positive integer. Null, zero, or negative numbers are not allowed.
shipping_X Optional The cost of shipping the first piece (quantity of 1) of item #X
shipping2_X Optional The cost of shipping each additional piece (quantity of 2 or more) of item #X
tax_X Optional The tax amount for item #X
Repeat for each item included in cart

Include a set of required variables and any optional variables from the table above for each item included in your buyers' cart. The first item included in the cart should be defined with parameters ending in "_1", such as "item_name_1", "amount_1", etc. Similarly the second item should be denoted with variables like "item_name_2", "amount_2", etc. Note: the "_x" values must increment by one continuously in order to be recognized. If you skip from item #1 to item #3 without defining an item #2, the third item will be ignored. To specify currency: All monetary variables (amount, postage, postage2, packing, VAT) will be interpreted in the currency designated by the "currency_code" variable that is posted with the payment. Since it is not item-specific, there is no need to append a "_x" to the variable name. If no "currency_code" variable is posted, we will assume that all monetary values are in US Dollars.

top

PayPal IPN

Paypal Settings

Google Checkout

XML for a basic Google Checkout
<?xml version="1.0" encoding="UTF-8"?>
<checkout-shopping-cart xmlns="http://checkout.google.com/schema/2">
  <shopping-cart>
    <items>
      <!-- Basket Item -->
      <item>
        <item-name>HelloWorld 2GB MP3 Player</item-name>
        <item-description>HelloWorld, the simple MP3 player</item-description>
        <unit-price currency="GBP">159.99</unit-price>
        <quantity>1</quantity>
        <!-- Item Options -->
        <merchant-private-item-data>
          <color>Red</color>
          <size>Small</size>
        </merchant-private-item-data>
      </item>
    </items>
  </shopping-cart>
  <checkout-flow-support>
    <merchant-checkout-flow-support>
      <!-- Postage -->
      <shipping-methods>
        <flat-rate-shipping name="Royal Mail">
          <price currency="GBP">9.99</price>
        </flat-rate-shipping>
      </shipping-methods>
    </merchant-checkout-flow-support>
    <!-- Rounding Policy -->
    <rounding-policy>
      <mode>HALF_UP</mode>
      <rule>TOTAL</rule>
    </rounding-policy>
  </checkout-flow-support>
</checkout-shopping-cart>
Post XML basket to Google Checkout
 
 'If you assume the xml above is in a file called googlexml.xml and is in the same 
  folder as the script calling it. the following would submit to Google Checkout
 
Dim ResponseXml, URL, Id, Key, objDoc

  Set objDoc = OpenXml("googlexml.xml")
  URL = "Google Checkout URL"
  ID = "Your Merchant ID"
  Key = "Your Merchant Key"

 'This function submits your basket XML to Google Checkout if all is ok
  an XML document will be returned containing the URL to redirct the browser to.

  ResponseXml = SendRequest(objDoc.xml, URL, Id, Key)
  
 'This function reads the reponse from Google Checkout, extracts the URL 
  from returned XML and fially redirects to URL.
  
  ProcessCheckoutRedirect ResponseXml

 '########################################################################
 'Subs
 '------------------------------------------------------------------------

Sub ProcessCheckoutRedirect(ResponseXml)
    
  Dim ResponseNode, RedirectUrl

    Set ResponseNode = GetRootNode(ResponseXml)
    RedirectUrl = GetElementText(ResponseNode, "redirect-url")
    Response.Redirect RedirectUrl
    Set ResponseNode = Nothing
        
End Sub

 '########################################################################
 'Functions
 '------------------------------------------------------------------------
 
Function OpenXml(strFilePath)
  Dim obj

  Set obj = Server.CreateObject("Msxml2.DOMDocument.6.0")
  obj.async = false
  If Not obj.Load(strFilePath) Then
    Response.Write "Load fail: " & strFilePath & vbCrLf
  End If
  Set OpenXml = obj
End Function

 '------------------------------------------------------------------------

Function SendRequest(Xml, Url, id, key)

  Dim XmlHttp, BasicAuthentication, ResponseXml

    Set XmlHttp = Server.CreateObject("Msxml2.ServerXMLHTTP.3.0")
    XmlHttp.Open "POST", Url, false

    Const SXH_OPTION_IGNORE_SERVER_SSL_CERT_ERROR_FLAGS = 2
    Const SXH_SERVER_CERT_IGNORE_ALL_SERVER_ERRORS = 13056

    XmlHttp.SetOption SXH_OPTION_IGNORE_SERVER_SSL_CERT_ERROR_FLAGS, _
      (XmlHttp.getOption(SXH_OPTION_IGNORE_SERVER_SSL_CERT_ERROR_FLAGS) - _
      SXH_SERVER_CERT_IGNORE_ALL_SERVER_ERRORS)

    BasicAuthentication = Base64Encode(id & ":" & Key)
    XmlHttp.SetRequestHeader "Authorization", "Basic " & BasicAuthentication
    XmlHttp.SetRequestHeader "Content-Type", "application/xml; charset=UTF-8"
    XmlHttp.SetRequestHeader "Accept", "application/xml; charset=UTF-8"
    XmlHttp.Send Xml

    ResponseXml = XmlHttp.ResponseText

    SendRequest = ResponseXml
    
    Set XmlHttp = Nothing
        
End Function

 '------------------------------------------------------------------------

Function GetRootNode(XmlData)

  Dim XmlDOMDoc

    Set XmlDOMDoc = Server.CreateObject("Msxml2.DOMDocument.3.0")
    XmlDOMDoc.loadXml XmlData
    Set GetRootNode = XmlDOMDoc.documentElement
    Set XmlDOMDoc = Nothing

End Function

 '------------------------------------------------------------------------

Function GetElementText(Node, Tagname)

  Dim NodeList

    Set NodeList = Node.getElementsByTagname(Tagname)
    If NodeList.Length > 0 Then 
      GetElementText = NodeList(0).text
    Else
      GetElementText = ""
    End If
    Set NodeList = Nothing

End Function

Google Checkout Layer Two Intergration

Google Checkout Settings