Website Development

All the tools that you need to integrate your eCart Payment Solution into your existing website are right here. The eCart provides the basic framework that you need to sell products on the Web, with the potential for customization and integration into your site.

This page provides information on the following:

• Quick Links: directing your customers to your cart and checkout
• Linking Your Products to Your eCart: three methods
  • Method One: single product links
  • Method Two: product links with variable options
  • Method Three: linking multiple products
• Custom Images: customizing the images in your cart and checkout

Use the links below to create a quick and easy button that your customers can click on to either go directly to the checkout or to view the contents of their shopping cart. Simply replace the red highlighted “YOUR_CART_ID” with your actual cart ID, which can be found on the home page of your eCart console.

View Cart: https://www.usaecart.com/carts/YOUR_CART_ID/cart

Checkout: https://www.usaecart.com/carts/YOUR_CART_ID/checkout

Before you add the necessary code to your website to link items to your eCart, make sure that you have completed the following steps:

1. Enter your products into the eCart system using the form provided on the Products page.
2. Set your accepted payment methods on the Payment page.
3. Determine how your will charge for shipping on the Shipping page.
4. Have your cart ID ready. You can find it on the Home page of your eCart console.
5. Have your list of product numbers ready as well. Product number or Product ID refers only to the system assigned product ID number and not to the merchant assigned SKU. These numbers are listed in the Products page, or you may want to download a product report from the Reports page.

Once you have completed these steps, you will be ready to add eCart capabilities to your existing Website in order to sell your products through the eCart. There are three ways in which to do this.

This method is used when you want to have an “Add to Cart” feature on your website for products that DO NOT have any options (such as color or size choices). This method may also be used if you want your customers to be able to click on a line of text, a single image or a button to purchase the product. You can see an example of this method here.

Here's an example of how to add it in HTML code. Simply copy and paste the code into your Web page and replace the red highlighted sections, “YOUR_CART_ID” with the actual ID of your cart and the item=0001” with the actual number of the product you are linking to.

<a href="https://www.usaecart.com/carts/YOUR_CART_ID/cart.asp?item=0001">
<strong>
<font face="Arial">Add to Cart</font>
</strong>
</a>

This method is used when you want to add the “Add to Cart” feature on your website for products that DO HAVE variable options. Variable options are things that your customer can choose on a product (such as color or size) that WILL NOT affect the cost of the product.

For example, if you sell a t-shirt that comes in blue, red, and green, no matter what color the customer chooses the price remains the same. In your Product Manager you add the t-shirt as a product. You then use a drop down menu to add the color choices. While it is possible to enter each different colored shirt as its own item, using the attribute feature of your eCart may save you time in the long run. You can view an example of this source here.

Here are two examples of Source 2 in HTML code. Simply copy and paste the code into your Web page and replace the red highlighted sections, “YOUR_CART_ID” with the actual ID of your cart, the value=“0001” with the product's ID number, the value=“Add To Cart” with whatever you would like the add to cart button to say, and the various options with the actual options of the product you are linking to.

<form action="https://www.usaecart.com/carts/YOUR_CART_ID/cart.asp" method="get">
<input type="hidden" name="item" value="0001">
<p>
 
<select NAME="option_system" size="1">
 
<option selected value="System">System</option>
<option value="Windows 95">Windows 95</option>
<option value="Windows 98">Windows 98</option>
<option value="Windows NT">Windows NT<option>
 
</select>
<input type="submit" value="Add to cart">
</p>
</form>

<form action=https://www.usaecart.com/carts/YOUR_CART_ID/cart.asp method="get">
<input type="hidden" name="item" value="0012">
<p>
 
<select NAME="option_case" size="1">
<option selected value="Case Size">Case Size</option>
<option value="Desktop">Desktop</option>
<option value="Tower">Tower</option>
</select>
<br>
 
<select NAME="option_system" size="1">
<option selected value="System">System</option>
<option value="Windows 95">Windows 95</option>
<option value="Windows 98">Windows 98</option>
<option value="Windows NT">Windows NT</option>
</select>
<br>
<input type="submit" value="Add to cart">
<br>
</p>
</form>

Please note: When you are using method 2, the following are true:

• You are using a METHOD GET to the Cart.
• The drop down menu names have to be “option_” followed by whatever you want the option to be called such as “option_size” or “option_color.”
• Everything is enclosed in a form tag: <form> - </form>.

This method is used if you wish to have Quantity boxes located on your website and/or you wish to give your customer the ability to select multiple products they wish to purchase on one page and then just to push one “Add to Cart” button when they are completed.

Remember, this may be used for one product per button or multiple products per button. To see an example of this method in use, click here.

Here are two examples of Method Three in HTML code. Simply copy and paste the code into your Web page and replace the red highlighted sections, “YOUR_CART_ID” with the actual ID of your cart, name=“Item1” with your item, “Product 1” with the name of the product, the value=“0001” with the product's ID number, and the value=“Add To Cart” with whatever you would like the add to cart button to say.

<form method="POST" action="https://www.usaecart.com/carts/YOUR_CART_ID/cart.asp">
 
<input type="hidden" name="multi" value="yes">
<input type="hidden" name="count" value="4">
<input type="hidden" name="Item1" value="0001">
<input type="text" name="Quantity1" size="3" value="0">
<font face="Arial" size="2">Product 1</font>
<p>
 
<input type="submit" value="Add to Cart" name="Submit">
</p>
</form>

<form method="POST" action="https://www.usaecart.com/carts/YOUR_CART_ID/cart.asp">
<input type="hidden" name="multi" value="yes">
<input type="hidden" name="count" value="4">
<input type="hidden" name="Item1" value="0001">
<input type="hidden" name="Item2" value="0002">
 
<table border="0" cellpadding="3">
 <tr>
    <td align="center" nowrap>
    <input type="text" name="Quantity1" size="3" value="0">
    </td>
    <td align="center" nowrap>
    <font face="Arial" size="2">Product 1</font>
    </td>
  </tr>
  <tr align="center">
    <td align="center" nowrap>
    <input type="text" name="Quantity2" size="3" value="0">
    </td>
    <td align="center" nowrap>
    <font face="Arial" size="2">Product 2</font>
    </td>
  </tr>
</table>
<p>
 
<input type="submit" value="Add to Cart" name="Submit">
</p>
</form>

Please note: when using method three:

• You are doing a METHOD POST to the Cart.
• Each Text Field Box MUST have the following names: “Quantity1” where the number 1 is sequential for each item.
• You must have the following hidden values:
  • name=“multi” and value=“yes”
  • name=“count” and value=“Total items per Add Button”
  • name=“Item1” and value=“First product ID number”
  • name=“Item2” and value=“Second product ID number” etc.
• Make sure that you have an equal number of Item fields and Quantity boxes.

FrontPage Users: You may request special instructions on how to add this code to your Website using step by step instructions for FrontPage 98 or higher. You may send your request via email to support@usaecart.com

To replace one image with another, simply upload the new image in your Image Settings page and make sure to use the same file name as the image you want to replace. The new image will overwrite the old one. Below is a list of the default image names and sizes that are already a part of your eCart.

cartasp.gif	700×74 px
appears at the top of your shopping cart
billingtop.gif	700×74 px
appears at the top of the payment information page
billinghead.gif	500×36 px
appears as a section heading on the payment information page
shippinghead.gif	500×36 px
appears as a section heading on the payment information page
payhead.gif	500×36 px
appears as a section heading on the payment information page
selectship.gif	700×74 px
appears at the top of the shipping selection page
finaltop.gif	700×74 px
appears at the top of the order confirmation page

You can also add your own images to the cart, checkout and other pages by first uploading the images you wish to use, and then inserting the following code into any of the text boxes provided for cart and checkout customization: <img src=“YOUR_IMAGE.gif”>.

The text boxes provided in the Screen Settings section of your eCart console can also be customized using other HTML code such as <br>, <font>, <table> and other tags to create a truly customized look that matches your own Web design.

Below is a chart of colors and their corresponding hexadecimal codes for use in customizing your website and coordinating your USA ePay elements with the look and feel of your existing site.