Confirmation Page, Thank You Page, and E-Mail Receipt Templates:
Payment Information

When you use the [-- SC_Payment --] tag on the Confirmation Page, Thank You Page, and E-Mail Receipt, it displays the payment information that the customer entered on the Shipping Page. This tag is optional in all three templates, but it is highly recommended on the Confirmation page.

Confirmation Page Example: Payment Information

The Thank You Page and E-Mail Receipt use the same tags shown here for the Confirmation Page.

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

<title>Confirm Your Order</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 --]

[-- ConfirmationHeader --]

# Start the confirmation 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>

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

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

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

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

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

</table>

</form>

[-- ConfirmationFooter --]

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

Payment Information CSS

Here is a list of CSS selectors used in the payment information section of the Confirmation Page, Thank You Page, and E-Mail Receipt.

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.

This example Confirmation page template includes an embedded CSS style sheet and some horizontal rules to visually separate the information on the page.

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

<title>Confirm Your Order</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 --];
}

/***********************/
/***  Hyperlinks     ***/
/***********************/
a:link { 
  color: #[-- STORE.SC_LinkColor --];
}
a:visited { 
  color: #[-- STORE.SC_VisitedLinkColor --];
}
a:hover { 
  color: #[-- STORE.SC_LinkColor --];
}
a:active { 
  color: #[-- STORE.SC_ActiveLinkColor --];
}

/**********************************/
/***  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;
  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 --];
}

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;
}


/***********************/
/***  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: 0px;
  margin-right: auto;
}

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: left;
}

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

td.addr_val {
  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: left;
}

td.payment_value {
  text-align: left;
}

td.sql_pay {
  padding-right: 15px;
}

/*************************************/
/***  Ordering Instructions Table  ***/
/*************************************/
table.instruct {
  padding-bottom: .5em;
}

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

/**********************************/
/***  Comments/More Info Table  ***/
/**********************************/
table.comm {
  padding-bottom: .5em;
}

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

table.CustomHTML {
  text-align: center;
  padding-bottom: .5em;
}

td.email {
  text-align: center;
  padding-bottom: .5em;
}

</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ConfirmationHeader --]

# Start the confirmation 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>

  <tr><td align="center"><hr noshade size="2"></td></tr>

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

  <tr><td align="center"><hr noshade size="2"></td></tr>

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

  <tr><td align="center"><hr noshade size="2"></td></tr>

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

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

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

  <tr><td align="center"><hr noshade size="2"></td></tr>

</table>

</form>

[-- ConfirmationFooter --]

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

Next: Confirmation & Thank You Fields

Confirmation Page, Thank You Page, and E-Mail Receipt Templates:Payment Information

Confirmation Page Example: Payment Information

Payment Information CSS

Check These Out

Top Template Tips

Update Your Templates

Confirmation Page, Thank You Page, and E-Mail Receipt Templates:
Payment Information