Customize your cart's style and functionality

Web Cart Tutorials
Default Integration
Connect your cart to Facebook
Customize your cart's style and functionality

If you can imagine it, you can built it easily!
In this Web Cart demo, we customized the CSS design and positioning options to build a completely native iPhone shopping experience for iPhone users.

See a live demo at http://iphonecart.net (iPhone or iPod Touch required).

Customize your Shopping Cart's Design

The cart is built entirely in CSS which means you have complete control to change its look and design by overriding the default CSS. Overriding CSS should be placed between your web page's <head> tags. The Firefox extension Firebug is a great tool for helping you do this.

You can begin making changes to your cart's design by coping the CSS code here and pasting it below your Cart Request script in your web page's source code. This CSS will give you a starting point to easily customize your cart.

Customize your Shopping Cart's positioning

Offset your cart from the top of your web page

By default, Payvment's shopping cart will appear and float above your website's content when an item is added to the cart. This is great because you won't need to designate a specific place for the cart in your web page's design. To keep the cart from floating over important site navigation or ads you might have at the top of your web page, you can add a "cart-offset" parameter to the Cart Request that tells the cart to avoid the specific area at the top of your page. The example below tells the cart to stop floating at 150 pixels from the top of your page.

<script src="https://api.payvment.com/cart/?apiKey=YOUR_API_KEY_HERE&cart-offset=150" type="text/javascript"></script>

Changing the default float position

By default the cart renders and floats on the top right of the browser. To tell the cart to render on the left instead, add "&cart-pos=LEFT" after your API Key in your Cart Request.

<script src="https://api.payvment.com/cart/?apiKey=YOUR_API_KEY_HERE&cart-pos=LEFT" type="text/javascript"></script>

Tell your cart to render directly into your web page

If you would like the cart to be rendered directly into your web page instead of the default floating method, this can be done in just two steps. With this option the cart will always render into your page even when empty as if the cart is part of your own page design. Once added, you can use CSS (discussed at the top of this page) to completely modify the cart's design to blend into your site.

Step One:
First add the DIV container below wherever you would like the cart to render within your webpage.

<div id="cartarea"></div>

Step Two:
Now you need to tell the cart to render in the DIV container you just added. This is done by adding "&cart-container=cartarea" to the cart request script.

<script src="https://api.payvment.com/cart/?apiKey=YOUR_API_KEY_HERE&cart-container=cartarea" type="text/javascript"></script>

Set your Shopping Cart's initial currency setting

By default your customer's shopping cart is initially set to display in USD (U.S. Dollars). If you would like to have the cart set to a different currency for your customers, add "&currency=" to the cart request script. The example below sets the cart's initial currency to the Euro using the Euro's three letter abbreviation. A complete list of supported currencies and their three letter abbreviations can be found below.

<script src="https://api.payvment.com/cart/?apiKey=YOUR_API_KEY_HERE&currency=EUR" type="text/javascript"></script>

Supported currency types are:
AUD – Australian Dollar
CAD – Canadian Dollar
CZK – Czech Koruna
DKK – Danish Krone
EUR– Euro
HKD – Hong Kong Dollar
HUF – Hungarian Forint
ILS – Israeli New Sheqel
JPY – Japanese Yen
MXN – Mexican Peso
NOK – Norwegian Krone
NZD – New Zealand Dollar
PHP – Philippine Peso
PLN – Polish Zloty
GBP – Pound Sterling
SGD – Singapore Dollar
SEK – Swedish Krona
CHF – Swiss Franc
TWD – Taiwan New Dollar
THB – Thai Baht
USD – U.S. Dollar

Javascript functions for cart control (Advanced)

If you are a developer familiar with Javascript, these Javascript functions can be used for manipulating the cart from within your own custom Javascript functions.

Function	Description
PV_openContents()	Expands the cart to show it's contents if closed.
MD_closeContents()	Hides the cart's contents if opened.
MD_toggleContents()	Toggles between PV_openCart() and MD_closeCart(). (Mimics 'View/Hide Cart' button)
PV_showCart()	Makes cart visible if completely hidden.
MD_hideCart()	Completely hides the cart from view.
MD_toggleCart()	Toggles between PV_showCart() and MD_hideCart().
PV_openCheckout()	Launches the checkout. (Mimics 'Checkout' button)
PV_shiftLeft()	Shifts the cart to the left side of the browser. Not available if using "cart-container" variable to imbed cart into web page.
PV_shiftRight()	Shifts the cart to the right side of the browser. Not available if using "cart-container" variable to imbed cart into web page.
MD_shiftToggle()	Toggles between PV_shiftLeft() and PV_shiftRight(). (Mimics 'Switch Side' cart button). Not available if using "cart-container" variable to imbed cart into web page.