Shipping Page Templates:
Payment Information

The payment information fields on the Shipping Page vary depending on the types of payment accepted by the merchant and what the customer chose. The [-- SC_Payment --] tag automatically produces the fields required by the chosen payment type. You can place the tag anywhere on the shipping page.

[-- DEFINE Shipping --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>[-- STORE.Ship_CheckOut --]</title>

<script type="text/javascript" language="JavaScript">
<!-- 
[-- SC_JAVASCRIPT extras --]
// -->
</script>

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}
</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShippingHeader --]

# Start the shipping page form
[-- SC_Form --]

<table border="0" width="0" align="center">
  <tr>
    <td align="right">
      [-- SC_Cart --]
    </td>
  </tr>

  <tr>
    <td align="right">
      [-- SC_Totals --]
    </td>
  </tr>

[-- IF SC_Comments --]
  <tr>
    <td align="center">
      [-- SC_Comments --]
    </td>
  </tr>
[-- END_IF --]

  <tr>
    <td align="center">
      [-- SC_Address --]
    </td>
  </tr>

  <tr>
    <td align="center">
      [-- SC_Payment --]
    </td>
  </tr>

</table>

</form>

[-- ShippingFooter --]

</body>
</html>
[-- END_DEFINE Shipping --]

Payment Information CSS

Here is a list of CSS selectors used in the payment information section of the Shipping Page.

table.payment	The table containing the payment fields.
td.payment_hdr	The cell containing the payment heading, such as "Payment - Credit Card."
td.payment	The cells containing payment field labels, such as "Card Number."
td.payment_value	The cells containing the form fields for payment information.
select.payment option.payment	The select lists for credit card type, expiration date, etc.

This example is the same as the one above, plus it includes a brief style sheet with selectors for some of the payment method selection elements.

[-- DEFINE Shipping --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>[-- STORE.Ship_CheckOut --]</title>

<script type="text/javascript" language="JavaScript">
<!-- 
[-- SC_JAVASCRIPT extras --]
// -->
</script>

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}
/**********************************/
/***  Table of Products (Cart)  ***/
/**********************************/
table.cart {
  width: 100%;
  padding-top: 1em;
  border-collapse: separate;
  border-spacing: 3px;
}

th {
  text-align: center;
}

td.cart_quantity, td.cart_cp_quantity {
  padding: 3px;
  width: 70px;
  text-align: center; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_name, td.cart_cp_name {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_sku, td.cart_cp_sku {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_price, td.cart_cp_price {
  padding: 3px;
  font-style: italic;
  text-align: right; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_total, td.cart_cp_total {
  padding: 3px;
  text-align: right; 
  background-color: #[-- STORE.SC_ShadeColor --];
  white-space: nowrap;
}

td.cart_op {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_op1, td.cart_op2 {
  padding: 3px;
  background-color: #[-- STORE.SC_ShadeColor --];
}

/***************************************/
/***          Table of Totals        ***/
/***  Subtotal, Tax, Shipping, etc.  ***/
/***************************************/
table.totals {
  color: #[--STORE.SC_TextColor--];
  vertical-align: middle; 
  line-height: 150%;
}

td.totals_txt, td.totals_all_txt {
  text-align: right;
  padding-right: 15px;
}

td.totals, td.totals_all {
  text-align: right;
  padding-right: 3px;
}

td.totals_all, td.totals_all_txt {
  font-weight: bold;
}

/**********************************/
/***  Comments/More Info Table  ***/
/**********************************/
table.comm {
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

td.comm_hdr {
  font-weight: bold;
  text-align: left;
}

/***********************/
/***  Address Table  ***/
/***********************/
table.addr { /* outer table that contains both billing and shipping addresses */
  color: #[-- STORE.SC_TextColor --];
}

table.bill_addr, table.ship_addr {   /* inner table for billing and shipping address */
  margin-left: auto;
  margin-right: 0px;
}

table.addr_name { /* table of registered name elements */
  margin-left: -4px;
  margin-right: auto;
}

td.bill_addr_hdr, td.ship_addr_hdr {
  font-weight: bold;
  text-align:center;
}

td.addr {
  text-align: right;
  padding-right: 5px;
}

td.addr_val {
  text-align: left;
}

td.ship_check {   /* checkbox for shipping same as billing */
  text-align:left;
}

td.addr_foot {    /* footnote about required fields */
  font: bold smaller Arial;
  text-align: center;
}

td.sql_addr {
  padding-right: 15px;
}
/***********************/
/***  Payment Table  ***/
/***********************/
table.payment{
  color: #[-- STORE.SC_TextColor --];
  margin-left: auto;
  margin-right: auto;
}

table.pay_holder {
  margin-left: auto;
  margin-right: auto;
}

td.payment_hdr {
  font-weight: bold;
  text-align: center;
}

td.paymentselection {
  text-align: center;
  padding-top: 20px;
}

td.payment {
  text-align: right;
}

td.payment_value {
  text-align: left;
}

td.sql_pay {
  padding-right: 15px;
}
</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShippingHeader --]

# Start the shipping page form
[-- SC_Form --]

<table border="0" width="0" align="center">
  <tr>
    <td align="right">
      [-- SC_Cart --]
    </td>
  </tr>

  <tr>
    <td align="right">
      [-- SC_Totals --]
    </td>
  </tr>

[-- IF SC_Comments --]
  <tr>
    <td align="center">
      [-- SC_Comments --]
    </td>
  </tr>
[-- END_IF --]

  <tr>
    <td align="center">
      [-- SC_Address --]
    </td>
  </tr>

  <tr>
    <td align="center">
      [-- SC_Payment --]
    </td>
  </tr>

</table>

</form>

[-- ShippingFooter --]

</body>
</html>
[-- END_DEFINE Shipping --]

Next: Checkout Email List

Shipping Page Templates:Payment Information

Payment Information CSS

Check These Out

Top Template Tips

Update Your Templates

Shipping Page Templates:
Payment Information