checkout-step3.html

Purpose: This template defines the layout of the checkout (page 3) of the 3 step checkout. This is where customers enter their billing information.


Notes: The template contains a form which is used by the customer to enter their billing information. No changes should be done to the form as the field names/values are very important and should not be changed. Adding or removing fields could cause the form to stop working. You can however, change the look/feel of the form using CSS/HTML.


Code Blocks within Template: This template will also contain certain blocks which will only come into play during specific situations. For example, some of the Payment Method blocks will only apply if that payment method is used in the store. In the following Code Block sections we will outline these situational blocks.


Note: It is important to preserve the commented tags to ensure the software performs correctly.


Code Blocks

Note: It is important to preserve the commented tags to ensure the software performs correctly.

Allow Different Billing/Same As Shipping

This first example of code blocks will come into play when the shopper either enters a new Billing Address or elects to use the same address as their Shipping Address. (Based on the Store Settings)

<!--START: allow_different_billing-->
    [checkout3_Header-billingaddress]
    [checkout3_billingcomment]
    [BCHECKED]
    [checkout3_billingsameasshipping]
    [CustomerInfo_firstname]
    [billing_firstname]
  <!--START: req_billing_firstname-->
  <!--END: req_billing_firstname-->
      [CustomerInfo_lastname]
      [billing_lastname]
  <!--START: req_billing_lastname-->
  <!--END: req_billing_lastname-->
      [CustomerInfo_company]
      [billing_company]
  <!--START: req_billing_company-->
  <!--END: req_billing_company-->
      [CustomerInfo_phone]
      [billing_phone]
  <!--START: req_billing_phone-->
  <!--END: req_billing_phone-->
      [CustomerInfo_address]
      [billing_address]
  <!--START: req_billing_address-->
  <!--END: req_billing_address-->
      [CustomerInfo_address2]
      [billing_address2]
  <!--START: req_billing_address2-->
  <!--END: req_billing_address2-->
      [CustomerInfo_city]
      [billing_city]
  <!--START: req_billing_city-->
  <!--END: req_billing_city-->
      [CustomerInfo_country]
      [CountryDropDown]
  <!--START: req_billing_country-->
  <!--END: req_billing_country-->
      [CustomerInfo_state]
      [state]
  <!--START: req_billing_state-->
  <!--END: req_billing_state-->
      [CustomerInfo_zip]
      [billing_zip]
  <!--START: req_billing_zip-->
  <!--END: req_billing_zip-->
<!--END: allow_different_billing-->
 
<!--START: samebilling_billing-->
  <!--start billing same as shipping-->
  <!--START: showsamebillingasshipping-->
      [checkout3_Header-billingaddress]
      [billing_firstname]
      [billing_lastname]
  <!--START: billing_company-->
      [billing_company]
  <!--END: billing_company-->
      [billing_address]
  <!--START: billing_address2-->
      [billing_address2]
  <!--END: billing_address2-->
      [billing_city]
      [billing_state]
      [billing_zip]
      [billing_country]
      [checkout2_shippinginfochange]
  <!--END: showsamebillingasshipping-->
      [shipping_firstname]
      [shipping_lastname]
      [shipping_company]
      [shipping_phone]
      [shipping_address]
      [shipping_address2]
      [shipping_city]
      [shipping_country]
      [shipping_state]
      [shipping_zip]
  <!--end billing same as shipping-->
<!--END: samebilling_billing-->

Gift Certificates
This next example of code blocks will come into play when the shopper applies a Gift Certificate on the order. The block will display the Gift Certificate information for their review.

<!--START: GIFTCERTIFICATES-->
    [viewcart_giftcertificates-header]
	<!--START: DISPLAY_GIFTCERTIFICATES-->
      		[id]
			[certificate_name]
			[discount_amount]
			[discount_balance]
	<!--END: DISPLAY_GIFTCERTIFICATES-->
<!--END: GIFTCERTIFICATES-->

Payment Gateways
This next series of code blocks will depend on the specific payment module being used by the store.

<!--START: CHECKGATEWAY--> (used by eCheck compatible payment gateways)
    [payment_description]
    [payment_description_message]
    [FIRSTOPTIONCHECKED]
    [payment_description]
    [CustomerInfo_check-type]
    [checktypelist]
    [CustomerInfo_check-acct-type]
    [checkaccttypelist]
    [CustomerInfo_check-routing]
    [CustomerInfo_check-acct]
<!--END: CHECKGATEWAY--> 
 
<!--START: checkoutByAmazon--> (used by the CBA payment gateway)
    [payment_description]
    [amazon_cba_form]
<!--END: checkoutByAmazon-->
 
<!--START: CCGATEWAY--> (Generic block used by most payment gateways)
  [payment_description]
  [payment_description_message]
  [FIRSTOPTIONCHECKED]
  [payment_description]
  [CustomerInfo_creditcardnumber]
  [id]
  <!--START: ccStartDate-->
    [CustomerInfo_creditstartdate]
    [monthlist]
    [yearlistdtstart]
  <!--END: ccStartDate-->
[CustomerInfo_creditexpiration]
  [id]
  [monthlist]
  [yearlist]
  [CustomerInfo_cardtype]
  [cctype]
  [CustomerInfo_creditissuenumber]
  [id]
<!--END: CCGATEWAY--> 
 
<!--START: AUTHNETCIMBLOCK--> (Block used for Authorize.Net CIM/Token Enabled Gateway)
  [payment_description]
  [FIRSTOPTIONCHECKED]
  [payment_description]
  <!--START: authCIMBlock-->
    [checkout3_use-creditcard-on-file]
    <!--END: authCIMBlock-->
<!--END: AUTHNETCIMBLOCK--> 
 
<!--START: MILITARYSTAR-->
  [payment_description]
  [payment_description_message]
  [id]
  [FIRSTOPTIONCHECKED]
  [payment_description]
  [CustomerInfo_creditcardnumber]
<!--END: MILITARYSTAR--> 
 
<!--START: LINKGATEWAY--> (used by redirect payment gateways)
  [payment_description]
  [payment_description_message]
  [FIRSTOPTIONCHECKED]
  [payment_description]
<!--END: LINKGATEWAY--> 
 
<!--START: ELAYAWAYGATEWAY--> (used by the eLayAway payment gateway)
  [payment_description]
  [payment_description_message]
  [FIRSTOPTIONCHECKED]
  [lay_order_total]
  [company_name]
  [max_lay_length]
  [currency_code]
<!--END: ELAYAWAYGATEWAY--> 
 
<!--START: PPEXPRESS--> (used by the PayPal Express payment gateways)
  [payment_description]
  [payment_description_message]
  [id]
  [payment_description]
<!--END: PPEXPRESS-->
 
<!--START: PAYPALADV--> (used by the PayPal Advanced payment gateway)
  [payment_description]
  [payment_description_message]
  [id]
  [payment_description]
<!--END: PAYPALADV-->
 
<!--START: SHOPATRON--> (used by ShopaTron payment gateway)
  [payment_description]
  [payment_description_message]
  [payment_description]
<!--END: SHOPATRON--> 
 
<!--START: CUSTOM--> (used for Offline Payment Methods)
[payment_type]
[payment_description]
[id]
[FIRSTOPTIONCHECKED]
[payment_type]
  <!--START: CUSTOM_FIELD-->
    [InputName]
    [field]
  <!--END: CUSTOM_FIELD-->
<!--END: CUSTOM-->

Everything Else
This last series of code blocks will cover all other code blocks and variables on the page.

 [shipping_firstname]
        [shipping_lastname]
        [shipping_company]
        [shipping_address]
        [shipping_address2]
        [shipping_city]
        [shipping_phone]
        [shipping_state]
        [shipping_zip]
        [shipping_country]
        [shipping_state]
        [checkout1_step]
        [checkout2_step]
        [checkout3_step]
        [checkout4_step]
<!--START: CATEGORY_HEADER-->
        [CONTENT]
<!--END: CATEGORY_HEADER-->
        [checkout3_Header-ordersummary]
        [shoppingcart_subtotal]
        [SUBTOTAL]
        [shoppingcart_discount]
        [DISCOUNT]
        [shoppingcart_shipping]
        [SHIPPING]
        [shoppingcart_taxes]
        [TAX]
<!--START: GIFTCERTS-->
        [shoppingcart_total]
        [TOTAL]
        [shoppingcart_giftcertificate]
        [GIFTCERTS]
<!--END: GIFTCERTS-->
        [shoppingcart_balance]
        [BALANCE]
<!--column left-->
        [checkout3_methodofpaymentselect]
  <!--START: checkout_questions-->
        [checkout3_checkoutquestions]
    <!--START: questions-->
        [questions]
    <!--END: questions-->
  <!--END: checkout_questions-->
    <!--START: checkout_questions_templates-->
    <!--START: textarea-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
          [question]
          [id]
          [answer]
    <!--END: textarea-format-->
    <!--START: text-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
          [question]
          [id]
          [answer]
    <!--END: text-format-->
    <!--START: file-format-->
          [question]
          [oname]
    <!--END: file-format-->
    <!--START: checkbox-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
          [id]
          [answer]
          [selected]
          [question]
    <!--END: checkbox-format-->
    <!--START: radio-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
      [question]
      <!--START: option-->
        [id]
        [option]
        [selected]
        [option]
      <!--END: option-->
    <!--END: radio-format-->
    <!--START: dropdown-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
    [question]
    [id]
      <!--START: option-->
        [selected]
        [option]
      <!--END: option-->
    <!--END: dropdown-format-->
    <!--END: checkout_questions_templates-->
        [checkout3_Header-comment]
        [checkout3_commentmessage]
        [checkout3_Header-comment]
        [checkout3_submitbutton]
<!--column left ends-->
<!--column right-->
        [checkout3_Header-shippingmethodinfo]
        [oshipmethod]
        [shoppingcart_shipping]
        [SHIPPING]
        [checkout3_shippingmethodchange]
  <!--customer info starts-->
          [checkout2_Header-shippinginfo]
          [checkout2_shippinginfomessage]
          [shipping_firstname]
          [shipping_lastname]
          [shipping_company]
          [shipping_address]
          [shipping_address2]
          [shipping_city]
          [shipping_state]
          [shipping_zip]
          [shipping_country]
          [checkout2_shippinginfochange]
  <!--customer info ends-->
          [checkout1_Header-shoppingcart]
  <!--START: SHOPPING_CART_ITEM-->
          [ITEM_CATALOGID]
          [THUMBNAIL]
          [ITEM_NAME]
          [ITEM_PRICE]
          [ITEM_QUANTITY]
          [ITEM_SUBTOTAL]
  <!--END: SHOPPING_CART_ITEM-->
  <!--START: BUYSAFE-->
          [buysafe_totalbondcost]
  <!--END: BUYSAFE-->
<!--column right ends-->
<!--START: CATEGORY_FOOTER-->
        [CONTENT]
<!--END: CATEGORY_FOOTER-->
<!--START: AddressValidatorBlock-->
<!--START: AddressValidatorBlock_ValidationFailed-->
        [result_msg]
<!--END: AddressValidatorBlock_ValidationFailed-->
<!--START: AddressValidatorBlock_ValidationSuggestion-->
        [result_msg]
<!--START: AddressValidatorBlock_ValidationSuggestion_SingleAddressBlock-->
        [checkout1_AddressValidator_SuggestedAddress]
        [AddrressValidator_address1]
        [AddrressValidator_address2]
        [AddrressValidator_city]
        [AddrressValidator_state]
        [AddrressValidator_zip]
        [AddrressValidator_address]
        [AddrressValidator_city]
        [AddrressValidator_state]
        [AddrressValidator_zip]
<!--END: AddressValidatorBlock_ValidationSuggestion_SingleAddressBlock-->
        [checkout1_AddressValidator_Continue]
<!--END: AddressValidatorBlock_ValidationSuggestion-->
        [checkout1_AddressValidator_Close]
<!--END: AddressValidatorBlock-->
        [useAddressValidator]
        [id]

Note: Code blocks and their respective variables will only work with specific template pages.

Variables

Note: Many of the following variables are dynamically inserted from your cart’s Settings ->Design ->Store Language section.

  • [checkout1_step] – Displays the Title of the “Step 1” Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
  • [checkout2_step] – Displays the Title of the “Step 2” Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
  • [checkout3_step] – Displays the Title of the “Step 3” Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
  • [checkout4_step] – Displays the Title of the “Thank You” Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
  • [checkout3_Header-ordersummary] – Displays the Title of the “Order Summary” section of the page. (See Settings ->Design ->Store Language)
  • [shoppingcart_subtotal] – Displays the Title of the “Subtotal” Column within the Order Summary Section. (See Settings ->Design ->Store Language)
  • [SUBTOTAL] – Inserts the cart’s subtotal.
  • [shoppingcart_discount] – Displays the Title of the “Discount(s)” column within the Order Summary Section. (See Settings ->Design ->Store Language)
  • [DISCOUNT] – Inserts any applicable discount amount that is present on the order.
  • [shoppingcart_shipping] – Displays the Title of the “Shipping” column within the Order Summary section. (See Settings ->Design ->Store Language)
  • [SHIPPING] – Inserts the applicable shipping amount on the order.
  • [shoppingcart_taxes] – Displays the Title of the “Taxes” column within the Order Summary section. (See Settings ->Design ->Store Language)
  • [TAX] – Inserts the applicable Tax present on the order.
  • [shoppingcart_total] – Displays the Title of the “TOTAL” column within the Order Summary section. (See Settings ->Design ->Store Language)
  • [TOTAL] – Inserts the applicable Total amount present on the order.
  • [shoppingcart_giftcertificate] – Displays the Title of the “Gift Certificate(s)” column within the Order Summary section when applicable. (See Settings ->Design ->Store Language)
  • [GIFTCERTS] – Inserts the Gift Certificate amount present on the order.
  • [shoppingcart_balance] – Displays the Title of the “Balance” column within the Order Summary section. (See Settings ->Design ->Store Language)
  • [BALANCE] – Inserts the applicable Balance amount present on the order.
  • [checkout3_Header-billingaddress] – Displays the Title of the “Billing Address” section of the page. (See Settings ->Design ->Store Language)
  • [checkout3_billingcomment] – Displays the content of the top portion in the “Billing Address” section where instructions are given to the shopper. (See Settings ->Design ->Store Language)
  • [BCHECKED] – Controls the check box present on the page where shoppers can select to use the same as shipping billing address.
  • [checkout3_billingsameasshipping] – Displays the Title of the “My information is same as Shipping” legend. (See Settings ->Design ->Store Language)
  • [CustomerInfo_firstname] – Displays the Title of the “First Name” Field. (See Settings ->Design ->Store Language)
  • [billing_firstname] – Controls/Inserts the Shopper’s first name information.
  • [CustomerInfo_lastname] – Displays the Title of the “Last Name” Field. (See Settings ->Design ->Store Language)
  • [billing_lastname] – Controls/Inserts the Shopper’s last name information.
  • [CustomerInfo_company] – Displays the Title of the “Company” Field. (See Settings ->Design ->Store Language)
  • [billing_company] – Controls/Inserts the Shopper’s company information.
  • [CustomerInfo_phone] – Displays the Title of the “Phone” Field. (See Settings ->Design ->Store Language)
  • [billing_phone] – Controls/Inserts the Shopper’s phone information.
  • [CustomerInfo_address] – Displays the Title of the “Address” Field. (See Settings ->Design ->Store Language)
  • [billing_address] – Controls/Inserts the Shopper’s address information.
  • [CustomerInfo_address2] – Displays the Title of the “Suite/Apt#” Field. (See Settings ->Design ->Store Language)
  • [billing_address2] – Controls/Inserts the Shopper’s address 2 information.
  • [CustomerInfo_city] – Displays the Title of the “City” Field. (See Settings ->Design ->Store Language)
  • [billing_city] – Controls/Inserts the Shopper’s first name.
  • [CustomerInfo_country] – Displays the Title of the “Country” Field. (See Settings ->Design ->Store Language)
  • [CountryDropDown] – Controls/Inserts the Country dropdown menu.
  • [CustomerInfo_state] – Displays the Title of the “State” Field. (See Settings ->Design ->Store Language)
  • [billing_state] – Controls/Inserts the Shopper’s State information.
  • [CustomerInfo_zip] – Displays the Title of the “Zip” Field. (See Settings ->Design ->Store Language)
  • [billing_zip] – Controls/Inserts the Shopper’s postal code information.
  • [billing_country] – Controls/Inserts the Shopper’s country information.
  • [viewcart_giftcertificates-header] – Displays the Title of the “Gift Certificates” section if one is used on the order. (See Settings ->Design ->Store Language)
  • [certificate_name] – Inserts the applicable Gift Certificate code.
  • [discount_amount] – Displays the title of the Gift Certificate “Amount” section. (See Settings ->Design ->Store Language)
  • [discount_balance] – Inserts the Balance left after Gift Certificate is applied.
  • [checkout3_methodofpaymentselect] – Displays the Title of the Billing Selection area. (See Settings ->Design ->Store Language)
  • [payment_description] – Inserts the respective payment method’s caption. (Dependent on Payment Method used on store)
  • [payment_description_message] -Inserts the respective payment method’s description. (Dependent on Payment Method used on store)
  • [checkout3_checkoutquestions] – Displays the Title of the Checkout Questions section if applicable. (See Settings ->Design ->Store Language)
  • [questions] – Begins the Checkout Questions section.
  • [question] – Inserts the applicable questions.
  • [answer] – Controls the Checkout Question answers (used for Checkbox, Text and Text Area questions).
  • [selected] – (scripting) Records if the selection was made.
  • [option] – Lists the Question Answer options available (used for radio button and dropdown questions).
  • [checkout3_Header-comment] – Displays the Title of the page’s “Comments” section. (See Settings ->Design ->Store Language)
  • [checkout3_commentmessage] – Displays the Title of instructional message displayed on the comments section. (See Settings ->Design ->Store Language)
  • [checkout3_submitbutton] – Displays the Title of the “Check Out” button. (See Settings ->Design ->Store Language)
  • [checkout3_Header-shippingmethodinfo] – Displays the Title of the “Shipping Method” area of the page. (See Settings ->Design ->Store Language)
  • [oshipmethod] – Inserts the selected Shipping method on the order.
  • [shoppingcart_shipping] – Displays the Title of the “Shipping” amount on the order. (See Settings ->Design ->Store Language)
  • [SHIPPING] – Inserts the Shipping amount on the order.
  • [checkout3_shippingmethodchange] – Inserts a link on the “Shipping Method” section which allows the shopper to change their shipping options.
  • [checkout2_Header-shippinginfo] – Displays the Title of the “Shipping Information” section. (See Settings ->Design ->Store Language)
  • [checkout2_shippinginfomessage] – Displays the Title of the “Your Package will be delivered to:”section of the “Shipping Information” area. (See Settings ->Design ->Store Language)
  • [shipping_firstname] – Inserts the Shipping First name from step 2.
  • [shipping_lastname] – Inserts the Shipping Last Name from step 2.
  • [shipping_company] – Inserts the Shipping Company from step 2.
  • [shipping_address] – Inserts the Shipping Address from step 2.
  • [shipping_address2] – Inserts the Shipping Suite/Apt# from step 2.
  • [shipping_city] – Inserts the Shipping City from step 2.
  • [shipping_phone] – Inserts the Shipping Phone from step 2.
  • [shipping_state] – Inserts the Shipping State from step 2.
  • [shipping_zip] – Inserts the Shipping Zip from step 2.
  • [shipping_country] – Inserts the Shipping Country from step 2.
  • [checkout2_shippinginfochange] – Inserts a link on the “Shipping Method” section which allows the shopper to change their shipping address.
  • [checkout1_Header-shoppingcart] – Inserts the Title of the “Shopping Cart” summary section of the page. (See Settings ->Design ->Store Language)
  • [ITEM_CATALOGID] – Inserts the applicable Item ID(s) to the products being ordered.
  • [THUMBNAIL] – Inserts the thumbnail of the applicable item(s).
  • [ITEM_NAME] – Inserts the name(s) of the applicable item(s).
  • [ITEM_PRICE] – Inserts the price(s) of the applicable item(s).
  • [ITEM_QUANTITY] – Inserts the quantity of each applicable item.
  • [ITEM_SUBTOTAL] – Inserts the subtotal of the each applicable item and its quantity combined.
  • [buysafe_totalbondcost] – If BuySafe is enabled on the account, this variable will insert the Bonding Cost applicable to the order.

These next variables will be present on the page as part of 3dcart’s Address Verification Add-on.
(Note: This add-on requires additional purchase in order for the scripting to apply to your pages.)

  • [result_msg] – Displays the result message of the validation for Address verification
  • [checkout1_AddressValidator_SuggestedAddress] – Displays the title of the suggested address
  • [AddrressValidator_address1] – Displays the first level of the suggested address
  • [AddrressValidator_address2] – Displays the second level of the suggested address
  • [AddrressValidator_city] – Displays the suggested city
  • [AddrressValidator_state] – Displays the suggested state
  • [AddrressValidator_zip]  – Displays the suggested zip code
  • [AddrressValidator_address] – It’s gonna bring the value from the default entered address
  • [checkout1_AddressValidator_Continue] – Displays the text inside the button to continue with the suggested address
  • [checkout1_AddressValidator_Close] – Displays the text inside the button to close  the suggested address pop up
  • [useAddressValidator] – It’s going to add the response of the  Address Validator if you are using the Suggested  Address (true),  or  you click in close to use the default entered address (false )
X