It was brought to my attention, earlier this week, that the Credit Card Capture module does not display correctly when using the Sandbox skin. After doing a little searching, I found that the file responsible for displaying the Credit Card Capture form actually resided within the module (rather than within each skin). Consequently, this file was not distributed with the skin. The offending file is: modules/gateway/Card_Capture/form.tpl If you wish to use the Credit Card Capture module, please open this file (seen above), remove all of the code within this file and paste the following code into the file:
<!-- BEGIN: form -->
<!-- BEGIN: error -->
<div class="typError">{LANG_ERROR}</div>
<!-- END: error -->
<h3>{VAL_AMOUNT_DUE}</h3>

<h1 style="margin-top:25px;">{LANG_CC_INFO_TITLE}</h1>

<div class="frmContainer">

	<p>
		<label for="firstName">{LANG_FIRST_NAME}</label>
		<input type="text" name="firstName" value="{VAL_FIRST_NAME}" class="textbox" />
    </p>
    <p>
    	<label for="lastName">{LANG_LAST_NAME}</label>
        <input type="text" name="lastName" value="{VAL_LAST_NAME}" class="textbox" />
    </p>
    <p>
    	<label for="cardTupe">{LANG_CARD_TYPE}</label>
        <select name="cardType" class="textbox">
				<!-- BEGIN: repeat_cards -->
				<option value="{VAL_CARD_TYPE}" {CARD_SELECTED}>{VAL_CARD_NAME}</option>
				<!-- END: repeat_cards -->
		</select>
    </p>
    <p>
    	<label for="cardNumber">{LANG_CARD_NUMBER}</label>
        <input type="text" name="cardNumber" value="" size="19" maxlength="19" class="textbox" />
    </p>

 	<!-- BEGIN: issue_info -->
        <p>
            <label for="issueMonth">{LANG_ISSUE_DATE}</label>
            <input type="text" name="issueMonth" value="" size="2" maxlength="2" class="textbox" /> <span style="float:left; margin:0px 10px;"> / </span><input type="text" name="issueYear" value="" size="2" maxlength="2" class="textbox" /> <span style="margin-left:20px;">(mm/yy)</span>
        </p>
        <p>
            <label for="issueNo">{LANG_ISSUE_NO}</label>
            <input type="text" name="issueNo" value="" size="4" maxlength="4" class="textbox" />
        </p>
	<!-- END: issue_info -->

    <p>
    	<label for="expirationMonth">{LANG_EXPIRES}</label>
        <input type="text" name="expirationMonth" value="" size="2" maxlength="2" class="textbox" /> <span style="float:left; margin:0px 10px;"> / </span> <input type="text" name="expirationYear" value="" size="2" maxlength="2" class="textbox" /> <span style="margin-left:20px;">(mm/yy)</span>
    </p>

	<!-- BEGIN: cvv -->
        <p>
            <label for="cvc2">{LANG_SECURITY_CODE}</label>
            <input type="text" name="cvc2" value="" size="4" maxlength="4" class="textbox" />
            <span onmouseover="findObj('cvv-img').src='images/general/cvv.gif'" onmouseout="findObj('cvv-img').src='images/general/px.gif'" style="cursor: pointer; cursor: hand;">&nbsp;?&nbsp;</span> <div id="cvv" style="position:absolute; width: 1px; height: 1px;">		<img src="images/general/px.gif" border="0" id="cvv-img" alt="" /></div>
        </p>
	<!-- END: cvv -->

</div>

<h1 style="margin-top:25px;">{LANG_CUST_INFO_TITLE}</h1>

<div class="frmContainer">

    <p>
    	<label for="emailAddress">{LANG_EMAIL}</label>
        <input type="text" name="emailAddress" value="{VAL_EMAIL_ADDRESS}" size="50" class="textbox" />
    </p>

	<p style="border-bottom:none;">
    	<label for="addr1">{LANG_ADDRESS}</label>
        <input type="text" name="addr1" value="{VAL_ADD_1}" size="50" class="textbox" />
    </p>

    <p>
    	<input id="add_2" class="textbox frmAlign" type="text" style="float: none;" value="{VAL_ADD_2}" size="50" name="addr2"/> {LANG_OPTIONAL}
    </p>

    <p>
    	<label for="city">{LANG_CITY}</label>
        <input type="text" name="city" value="{VAL_CITY}" class="textbox" />
    </p>

    <p>
    	<label for="state">{LANG_STATE}</label>
        <input type="text" name="state" value="{VAL_COUNTY}" size="2" class="textbox" />
    </p>

    <p>
    	<label for="postalCode">{LANG_ZIPCODE}</label>
        <input type="text" name="postalCode" value="{VAL_POST_CODE}" size="10" maxlength="10" class="textbox" />
    </p>

    <p>
    	<label for="country">{LANG_COUNTRY}</label>
        <select name="country" class="textbox">
			<!-- BEGIN: repeat_countries -->
				<option value="{VAL_COUNTRY_ISO}" {COUNTRY_SELECTED}>{VAL_COUNTRY_NAME}</option>
			<!-- END: repeat_countries -->
		</select>

    </p>
    <input type="hidden" name="gateway" value="{VAL_GATEWAY}" />

</div>
<!-- END: form -->


Comments

  1. Hi Homer,

    Will this also improve the look of the form in the Catalyst skin?

    Kind Regards
    Andy

    By Andy on Reply
  2. Much improve look and feel….thanks homer works great!

    By Andy on Reply

Add your comment

(will not be published)