Demo Store
Cart
MacBook
(shipping $20)
buy $999
MacBook Air
(shipping $20)
buy $999
MacBook Pro
(free shipping)
buy $1199
Mac OS X
(Purchase once|Download)
buy $99
iMac
(free shipping)
buy $1199
Mac Mini
(shipping $20)
buy $699
Mac Pro
(free shipping)
buy $2499
Setup a basic cart
<!-- CSS files -->
<link rel="stylesheet" type="text/css" href="lib/dc.core.1.0.0.min.css" />    
<link rel="stylesheet" type="text/css" href="lib/dc.cart.1.0.0.css" />

<!-- Script files -->
<script src="lib/dc.core.1.0.0.min.js" type="text/javascript"></script>
<script src="lib/dc.cart.1.0.0.min.js" type="text/javascript"></script>      
<script src="lib/dc.cart.lang.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function(){
        // Create a basic cart
        var cart = $('#cart').DCAJAXPaypalCart({
            width:600,
            height:400,
            paypalOptions:{
                business:'YOU_PAYPAL_EMAIL@email.com'
            }
        });

        // Create a buy button from a link with id "buy_button_1"
        cart.addBuyButton("#buy_button_1",{
            id:'item_1',                        // Specify the unique id for this item
            name:'Dummy Item',                  // Item name appear on the cart
            thumbnail:'product_thumbnail.jpg',  // Thumbnail path of the item (Optional)
            price:10                            // Cost of the item
            shipping:5                          // Shipping cost for the item (Optional)
        });
    });
</script>    
        
This example code show the syntax for setup a basic cart. Include the above sctipr int between <head> tag. Also insert a '<div id="cart></div>" in the place you want the cart widget appear.
Properties
        // #cart is the elements id which you wan to place the cart widget
        var cart = $('#cart').DCAJAXPaypalCart({
            width:600,      // Width of the cart
            height:400,     // Height of the cart
            currency:'USD', // The display currecy of the cart, support USD,YEN,HKD,GBP,AUD..etc (Optional)
            language:'en',  // The language of the cart. Included en, jp, de. (Optional)
            autoOpenWhenAdd:true,  // Enable auto open the cart window after a item added to cart (Optional)
            autoCleanCart:true, // Enable auto clean cart after checkout button click (Optional)
            openNewCheckOutWindow:false, // Indicate if the paypal checkout window is open in a new window (Optional)
            themeColor:'#0066cc',       // Color in the theme (Optional)
            themeDarkColor:'#0040a1',   // Dark color in the theme (Optional)
            header:'Header Text Here',  // The content of header (Optional)
            footer:'Footer Text Here',  // The content of footer (Optional)
            paypalOptions:{
                business:'YOU_PAYPAL_EMAIL@email.com' // The paypal email addres which use for receive money
            }
        });
        
These are the properties supported by the AJAX Paypal Cart.
Methods
openCart()
Open the cart window.
cart.openCart();
        
closeCart()
Close the cart window.
cart.closeCart();
        
add(item)
Add an item into cart.
cart.addCart({
    id:'item_1',                        // Specify the unique id for this item
    name:'Dummy Item',                  // Item name appear on the cart
    thumbnail:'product_thumbnail.jpg',  // Thumbnail path of the item (Optional)
    price:'10'                          // Cost of the item
    shipping:5,                         // Shipping cost for the item (Optional)
    allowMultiple:true                  // Set if allow multiple item in cart (Optional)
});
        
remove(id)
Remove an item with specify id.
cart.remove('item_1');
        
clean()
Clean all items.
cart.clean();
        
Change the styles.
The AJAXPaypalCart support changing the theme color by the properties 'themeColor' and 'themeDarkColor'. Also, the cart is fully customizable with styles sheet. You can edit the included css file 'dc.cart.1.0.0.css' to fit your style.
Change the text appear in the cart.
To change the text, you can edit the "dc.cart.lang.js". You can also include text in different language and specify the 'language' property to change the language of the cart.
Userful Links.