Customize the Payment, Billing and Shipping Information Display

Introduction

Please review the basic shopping online tutorial. This tutorial is an extension of the basic shopping online tutorial and explains how to customize one aspect of the shopping basket system. View the other advanced tutorials to customize other aspects of the shopping basket system.

In the shopping basket admin you may choose one of three methods of displaying payment, billing and shipping information in the "Customer Information Options": Automatic, Manual and Selective. The default of the shopping basket is to use the Automatic method and the mgiCollectUserInfo tag to display the default payment, billing, and shipping information tables with all available options. Note that all methods, including Automatic, allow you to select the type of credit cards you offer. To customize the display of payment, billing and shipping information, you have 3 options.

  1. Use the Selective Method in the shopping basket admin and the mgiCollectUserInfo tag. This method allows you to choose which default fields to display and require. This method does not require the customization of the order confirmation and order email.
  2. Use the Automatic or Selective Method and create a custom layout using the default field names and form elements for payment, billing and shipping information. This method does not require the customization of the order confirmation and order email.
  3. Use the Manual Method and create a custom layout and custom fields for payment, billing, shipping or other information. This method requires the customization of the order confirmation and order email.

Option 1, Selective Method with mgiCollectUserInfo, and Options 2 and 3, custom layouts and forms, are explained separately below. Options 2 and 3 differ only with respect to the form field names and are therefore included in the same tutorial.

MGI Tags

Option 1: Selective Method with mgiCollectUser Info

Steps

  1. View the shopping basket administration page in a web browser.
  2. Edit and Save the Customer Information Options.
  3. Add items to the shopping basket and check out.

Step 1: View the shopping basket administration page in a web browser.

View the shopping basket administration page (e.g., sbadmin.mgi) in a web browser. The first screen of the web-based, administration interface displays the current shopping basket configurations (handles)

Step 2: Edit and Save the Customer Information Options".

Click the "Edit" button beside the shopping basket configuration (handle) to edit.

Click the "Edit" button beside "Customer Information Options".

In the second section, check the boxes beside each type of credit card that you accept.
 
In the third section, select the "Selective" method.
 
Under "Selective Method Options" check the left box beside any field you wish to display. Check the right box beside any field you wish to require. In this example, all credit card options are selected in addition to the Name, full address, phone and email for billing. All billing information is required except State and Province. Shipping information is not displayed or required in this example.
 
Click the "Save" button to save the changes to the shopping basket configuration. The main menu displays after the configuration is saved.

Step 3: Add items to the shopping basket and check out.

Add items to the shopping basket and view the check out page. The form options in this example display in the default format with only the selected form fields. Required fields appear in bold.

Options 2 and 3: Custom Layouts and Forms

Steps

  1. View the shopping basket administration page in a web browser.
  2. Edit and Save the Customer Information Options.
  3. Open the check out page in a text editor.
  4. Insert a custom form for payment, billing and shipping information.
  5. Save the check out page.
  6. Customize the order confirmation and order email, if necessary.
  7. FTP all changed pages to the web server running MGI.
  8. Add items to the shopping basket and check out.

Step 1: View the shopping basket administration page in a web browser.

View the shopping basket administration page (e.g., sbadmin.mgi) in a web browser. The first screen of the web-based, administration interface displays the current shopping basket configurations (handles)

Step 2: Edit and Save the Customer Information Options.

Click the "Edit" button beside the shopping basket configuration (handle) to edit.

Click the "Edit" button beside "Customer Information Options".

In the second section, check the boxes beside each type of credit card that you accept.
 
For option 2 (Automatic or Selective method with custom layout and default form fields), select either the Automatic or Selective method. For option 3 (Manual method with custom layout and custom or additional fields), select the Manual method. Option 3 is shown.
 
Click the "Save" button to save the changes to the shopping basket configuration. The main menu displays after the configuration is saved.

Step 3: Open the check out page in a text editor.

Open the check out page in a text editing program that allows you to view and modify the HTML and code of the page.

Step 4: Insert a custom form for payment, billing and shipping information.

For option 2 (Automatic or Selective method with custom layout and default form fields) and option 3 (Manual method with custom layout and custom or additional fields) remove the mgiCollectUserInfo tag from the check out page and enter a custom layout to collect payment, billing, shipping and other information.
 
For option 2 (Automatic or Selective method with custom layout and default form fields) you may choose any text or layout, but you must use the following default field names and form elements. Using the default field names allows you to use the default order confirmation and order email pages if you prefer.
  • PaymentMethod - Shopping basket payment method. Values include "Credit Card", "Purchase Order", and "Check".
  • CardType - Credit card type. Values include "Visa", "Mastercard", "Disover/Novus", "American Express", "Carte Blanche", "Diner's Club", "Bankcard", and/or "JCB" depending on shopping basket configuration.
  • CCNumber - Credit card number.
  • ExpMo - Credit card expiration month.
  • ExpYe - Credit card expiration year.
  • CCName - Name that appears on credit card.
  • PONumber - Purchase order number.
  • POCompany - Purchase order company.
  • BName - Billing name
  • BCompany - Billing company
  • BAddress1 - Billing address
  • BCity - Billing city
  • BState - Billing state
  • BProvince - Billing province
  • BZipCode - Billing zip code
  • BCountry - Billing country
  • BPhone - Billing phone
  • BFax - Billing fax
  • BEmail - Billing email
  • SCompany - Shipping company
  • SAddress1 - Shipping address
  • SCity - Shipping city
  • SState - Shipping state
  • SProvince - Shipping province
  • SZipCode - Shipping zip code
  • SCountry - Shipping country
  • SPhone - Shipping phone
  • SFax - Shipping fax
  • SEmail - Shipping email
 
For option 3 (Manual method with custom layout and custom or additional fields) you may choose any text, layout or form fields. You may also add additional form fields for information you wish to collect. Since you are using custom form fields, you are required to customize the order confirmation display and order email.
 
The following is a custom layout to collect payment, billing, shipping and additional information: 
<mgitoken>

<FORM ACTION="confirmorder.mgi" METHOD="POST">

<P><CENTER>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" 
WIDTH="525">
<TR HEIGHT="375">
<TD WIDTH="300" HEIGHT="375" VALIGN="TOP" ALIGN="CENTER">
<P>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3" 
WIDTH="250">
<TR HEIGHT="30">
<TD HEIGHT="30" COLSPAN="2"><B>BILLING ADDRESS</B></TD>
</TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT><B><FONT COLOR="#ff0000">Name*</FONT></B>
</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BName" SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Company</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BCompany" SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT><B><FONT COLOR="#ff0000">Address*</FONT></B>
</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BAddress1" 
SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT><B><FONT COLOR="#ff0000">City*</FONT></B>
</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BCity" SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT><B><FONT COLOR="#ff0000">State*</FONT></B>
</TD> <TD WIDTH="175"><SELECT name="BSTATE">
<OPTION>
<OPTION>Alabama
<OPTION>Alaska
<OPTION>Arizona
<OPTION>Arkansas
<OPTION>California
<OPTION>Colorado
<OPTION>Connecticut
<OPTION>Delaware
<OPTION>District of Columbia
<OPTION>Florida
<OPTION>Georgia
<OPTION>Hawaii
<OPTION>Idaho
<OPTION>Illinois
<OPTION>Indiana
<OPTION>Iowa
<OPTION>Kansas
<OPTION>Kentucky
<OPTION>Louisiana
<OPTION>Maine
<OPTION>Maryland
<OPTION>Massachusetts
<OPTION>Michigan
<OPTION>Minnesota
<OPTION>Mississippi
<OPTION>Missouri
<OPTION>Montana
<OPTION>Nebraska
<OPTION>Nevada
<OPTION>New Hampshire
<OPTION>New Jersey
<OPTION>New Mexico
<OPTION>New York
<OPTION>North Carolina
<OPTION>North Dakota
<OPTION>Ohio
<OPTION>Oklahoma
<OPTION>Oregon
<OPTION>Pennsylvania
<OPTION>Rhode Island
<OPTION>South Carolina
<OPTION>South Dakota
<OPTION>Tennessee
<OPTION>Texas
<OPTION>Utah
<OPTION>Vermont
<OPTION>Virginia
<OPTION>Washington
<OPTION>West Virginia
<OPTION>Wisconsin
<OPTION>Wyoming
</SELECT></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Province</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BProvince" 
SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT><B><FONT COLOR="#ff0000">Zip Code*
</FONT></B>
</TD><TD WIDTH="175"><INPUT TYPE="text" NAME="BZipCode" 
SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Country</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BCountry" 
SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT><B><FONT COLOR="#ff0000">Phone*
</FONT></B>
</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BPhone" 
SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Fax</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BFax" 
SIZE="27">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT><B><FONT COLOR="#ff0000">E-mail*
</FONT></B>
</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="BEmail" 
SIZE="27">
</TD></TR>
<TR><TD WIDTH="75"></TD>
<TD WIDTH="175"></TD>
</TR></TABLE></P>
<P><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3" 
WIDTH="260">
<TR HEIGHT="25">
<TD HEIGHT="25" COLSPAN="2"><B>PAYMENT INFORMATION
</B></TD>
</TR><TR HEIGHT="20">
<TD HEIGHT="20" COLSPAN="2"><INPUT TYPE="radio"
VALUE="Credit Card" NAME="PaymentMethod"> 
<B>Credit Card</B>
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Type</TD> 
<TD WIDTH="176">
<SELECT NAME="CardType">
<OPTION VALUE="" SELECTED>Select a Card Type
<OPTION>Visa
<OPTION>MasterCard
<OPTION>Discover/Novus
</SELECT></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Number</TD> 
<TD WIDTH="176"><INPUT TYPE="text" NAME="CCNumber" 
SIZE="26">
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Expiration</TD> 
<TD WIDTH="176"><INPUT TYPE="text" NAME="EXPMO" SIZE="4"> /
<INPUT TYPE="text" NAME="EXPYE" SIZE="4"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Name</TD> 
<TD WIDTH="176"><INPUT TYPE="text" NAME="CCName" 
SIZE="26"></TD></TR>
<TR HEIGHT="25">
<TD HEIGHT="25" COLSPAN="2"><INPUT TYPE="radio"
VALUE="Check" NAME="PaymentMethod"> 
<B>Check or Money Order</B>
</TD></TR>
<TR><TD COLSPAN="2">&nbsp;</TD></TR>
<TR><TD WIDTH="75"></TD>
<TD WIDTH="176"></TD></TR></TABLE>
</TD>
<TD WIDTH="300" HEIGHT="375" VALIGN="TOP" 
ALIGN="CENTER">
<P><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3" 
WIDTH="250">
<TR HEIGHT="30">
<TD HEIGHT="30" COLSPAN="2"><B>SHIPPING ADDRESS
</B>(if different)</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Name</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SName" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Company</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SCompany" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Address</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SAddress1" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>City</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SCity" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>State</TD> 
<TD WIDTH="175"><SELECT name="SSTATE">
<OPTION>
<OPTION>Alabama
<OPTION>Alaska
<OPTION>Arizona
<OPTION>Arkansas
<OPTION>California
<OPTION>Colorado
<OPTION>Connecticut
<OPTION>Delaware
<OPTION>District of Columbia
<OPTION>Florida
<OPTION>Georgia
<OPTION>Hawaii
<OPTION>Idaho
<OPTION>Illinois
<OPTION>Indiana
<OPTION>Iowa
<OPTION>Kansas
<OPTION>Kentucky
<OPTION>Louisiana
<OPTION>Maine
<OPTION>Maryland
<OPTION>Massachusetts
<OPTION>Michigan
<OPTION>Minnesota
<OPTION>Mississippi
<OPTION>Missouri
<OPTION>Montana
<OPTION>Nebraska
<OPTION>Nevada
<OPTION>New Hampshire
<OPTION>New Jersey
<OPTION>New Mexico
<OPTION>New York
<OPTION>North Carolina
<OPTION>North Dakota
<OPTION>Ohio
<OPTION>Oklahoma
<OPTION>Oregon
<OPTION>Pennsylvania
<OPTION>Rhode Island
<OPTION>South Carolina
<OPTION>South Dakota
<OPTION>Tennessee
<OPTION>Texas
<OPTION>Utah
<OPTION>Vermont
<OPTION>Virginia
<OPTION>Washington
<OPTION>West Virginia
<OPTION>Wisconsin
<OPTION>Wyoming
</SELECT></TD> </TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Province</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SProvince" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Zip Code</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SZipCode" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Country</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SCountry" 
SIZE="27"></TD> </TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Phone</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SPhone" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Fax</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SFax" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>E-mail</TD> 
<TD WIDTH="175"><INPUT TYPE="text" NAME="SEmail" 
SIZE="27"></TD></TR>
<TR><TD WIDTH="75"></TD>
<TD WIDTH="175"></TD></TR></TABLE></P>
<P><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3" 
WIDTH="260">
<TR HEIGHT="25">
<TD HEIGHT="25" COLSPAN="2">
<B>ADDITIONAL INFORMATION</B>
</TD></TR>
<TR><TD WIDTH="75">
<P ALIGN=RIGHT>Comments</TD> 
<TD WIDTH="176">
<TEXTAREA NAME="Comments" COLS="25" ROWS="4">
</TEXTAREA></TD></TR>
<TR><TD WIDTH="75"></TD>
<TD WIDTH="176"></TD></TR>
<TR><TD WIDTH="75"></TD>
<TD WIDTH="176"></TD></TR>
<TR><TD WIDTH="75"></TD>
<TD WIDTH="176"></TD></TR>
</TABLE></TD></TR>
<TR HEIGHT="40">
<TD HEIGHT="40" COLSPAN="2">
<P><CENTER><mgibutton value="Confirm Order">
</CENTER></TD></TR>
</TABLE></CENTER></P>

</FORM>

</mgitoken>

Step 5: Save the check out page.

Save the changes you have made to the check out page.

Step 6: Customize the order confirmation and order email, if necessary.

For option 3 (Manual method with custom layout and custom or additional fields) you must customize the order confirmation and order email. See the advanced tutorials for more information.

Step 7: FTP all changed pages to the web server running MGI.

Upload the check out page and order confirmation and order email pages (if changed) from your local computer to the web server using an FTP program.

Step 8: Add items to the shopping basket and check out.

Add items to the shopping basket and view the check out page. The following is the custom check out display from this example.

[Return to the Shopping Online Menu]

[Understanding MGI Menu] [Using MGI Menu] [Referencing MGI Menu]

[MGI Guides Main Menu] [User Guide Main Menu]