[solved] Authorizeaim module modified for responsive & mobile themes

[fiddler1]

I've been trying to get my site as mobile-friendly as possible prior to going live. I had trouble with the authorizeaim module for credit card processing by Authorize.net - it would not display well in responsive themes, and didn't work at all with mobile. After some tinkering, I am happy to share a version of the primary template for this module which works great in responsive themes, and also works well with the default mobile theme. There remain a few issues that maybe someone else can fix:

 

- Authorizeaim still does not pull up the order-confirmation page. It goes to order history or guest tracking.

- I could not make the drop-down list for expiration date month to work on mobile. Jquery or something is adding leading zeros to the date. So that's why this has an entry blank for month.

- Of course you need SSL working to use this module, and use my changes at your own risk.

This is my rework of file authorizeaim.tpl:

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<link rel="shortcut icon" type="image/x-icon" href="{$module_dir}secure.png" />
<p class="payment_module" >

	{if $isFailed == 1}
		<p style="color: red;">
			{if !empty($smarty.get.message)}
				{l s='ERROR; there is a problem with your transaction: ' mod='authorizeaim'}{$smarty.get.message|htmlentities}
			{else}
				{l s='ERROR; your card information seems to be incorrect.' mod='authorizeaim'}
			{/if}
		</p>
	{/if}

	<form name="authorizeaim_form" id="authorizeaim_form" action="{$module_dir}validation.php" method="post" data-ajax="false">
		<span style="border: 1px solid #595A5E;display: block;padding: 0.9em;text-decoration: none;margin-left: 0.7em;">
			<a id="click_authorizeaim" href="#" title="{l s='Pay with credit card' mod='authorizeaim'}" style="display: block;text-decoration: none; font-weight: bold;">
				{if $cards.visa == 1}<img src="{$module_dir}cards/visa.gif" alt="{l s='Visa Logo' mod='authorizeaim'}" style="vertical-align: middle;" />{/if}
				{if $cards.mastercard == 1}<img src="{$module_dir}cards/mastercard.gif" alt="{l s='Mastercard Logo' mod='authorizeaim'}" style="vertical-align: middle;" />{/if}
				{if $cards.discover == 1}<img src="{$module_dir}cards/discover.gif" alt="{l s='Discover Logo' mod='authorizeaim'}" style="vertical-align: middle;" />{/if}
				{if $cards.ax == 1}<img src="{$module_dir}cards/ax.jpg" alt="{l s='American Express Logo' mod='authorizeaim'}" style="vertical-align: middle;" />{/if}
				  {l s='Credit Card' mod='authorizeaim'}
                        <img src="{$module_dir}logoa.gif" alt="secure payment" style="vertical-align: middle; float: right"/>
			</a>

				{if $isFailed == 0}
						<div id="aut2"style="display:none">
				{else}
						<div id="aut2">
				{/if}
				<br /><br />

							
				

				<input type="hidden" name="x_solution_ID" value="A1000006" />
				<input type="hidden" name="x_invoice_num" value="{$x_invoice_num}" />

				<label style="margin-top: 4px; margin-left: 5px;display: block;">{l s='Name on Card' mod='authorizeaim'}</label><br/>
                            <input type="text" name="name" placeholder="Your Name" id="fullname" size="30" maxlength="25S" data-mini="false" /><img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;" /><br /><br />

				<label style="margin-top: 4px; margin-left: 5px; margin-bottom: 4px; display: block;float: left;">{l s='Card Type' mod='authorizeaim'}</label><br/><br/>
				<select id="cardType" data-mini="false">
					{if $cards.ax == 1}<option value="AmEx">American Express</option>{/if}
					{if $cards.visa == 1}<option value="Visa">Visa</option>{/if}
					{if $cards.mastercard == 1}<option value="MasterCard">MasterCard</option>{/if}
					{if $cards.discover == 1}<option value="Discover">Discover</option>{/if}
				</select>
				<img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;" /><br /><br />

				<label style="margin-top: 4px; margin-left: 5px; display: block;">{l s='Card Number' mod='authorizeaim'}</label><br/> <input type="text" name="x_card_num" placeholder="Card Number" id="cardnum" size="30" maxlength="16" autocomplete="Off" data-mini="false" /><img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;" /><br /><br />
				<label style="margin-top: 4px; margin-left: 5px; display: block; float: left;">{l s='Expiration date MM/YYYY' mod='authorizeaim'}</label><br/><br/>
				<input type="text" id="x_exp_date_m" name="x_exp_date_m" placeholder="MM" data-mini="false" size="2" maxlength="2">
				 /
				<select name="x_exp_date_y" data-mini="false">{section name=date_y start=14 loop=20}
					<option value="{$smarty.section.date_y.index}">20{$smarty.section.date_y.index}</option>{/section}
				</select>
				<img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;" /><br /><br />
				<label style="margin-top: 4px; margin-left: 5px; display: block;">{l s='Card Security Code' mod='authorizeaim'}</label> <input type="text" name="x_card_code" placeholder="Code" id="x_card_code" size="4" maxlength="4" autocomplete="Off" /><img src="{$module_dir}secure.png" alt="" style="margin-left: 5px;"/> <img src="{$module_dir}help.png" id="[spam-filter]_help" title="{l s='Security code: Last 3 digits on the back of your card, or the small 4 digits on the front of your American Express card.' mod='authorizeaim'}" alt="" /><br /><br />
			<img src="{$module_dir}[spam-filter].png" id="[spam-filter]_help_img" alt=""style="display: none;" />
<br /> <br />
Your card will be charged after you press the button below. Please click only once.<br /><br />
				<input type="button" id="asubmit" value="{l s='Place Order' mod='authorizeaim'}" style="margin-left: 129px; padding-left: 25px; padding-right: 25px; float: left;" class="button" />
				<br class="clear" />
			</div>
		</span>
	</form>
</p>
<script type="text/javascript">
	var mess_error = "{l s='There seems to be a problem with your credit card information (Credit card type, number, expiration date, or [spam-filter])' mod='authorizeaim' js=1}";
	var mess_error2 = "{l s='Please enter your name as it appears on your card.' mod='authorizeaim' js=1}";
	{literal}
		$(document).ready(function(){
			$('#x_exp_date_m').children('option').each(function()
			{
				if ($(this).val() < 10)
				{
					$(this).val('0' + $(this).val());
					$(this).html($(this).val())
				}
			});
			$('#click_authorizeaim').click(function(e){
				e.preventDefault();
				$('#click_authorizeaim').fadeOut("fast",function(){
					$("#aut2").show();
					$('#click_authorizeaim').fadeIn('fast');
				});
				$('#click_authorizeaim').unbind();
				$('#click_authorizeaim').click(function(e){
					e.preventDefault();
				});
			});

			$('#[spam-filter]_help').click(function(){
				$("#[spam-filter]_help_img").show();
				$('#[spam-filter]_help').unbind();
			});

			$('#asubmit').click(function()
				{
				if ($('#fullname').val() == '')
				{
					alert(mess_error2);
				}
				else if ($('#cardnum').val(), $('#cardType').val(), $('#x_card_code').val() == '')
				{
					alert(mess_error);
				}
				else
				{
					$('#authorizeaim_form').submit();
				}
				return false;
			});
		});

	{/literal}
</script>

And attached to this post are two images: an updated American Express logo, and also a smaller Authroize.net checkout logo. The larger image that comes with the module does not work well with my changes. Here is the American Express logo (note that this is jpg and not gif like the original)

 

And here is the smaller Authnet logo

 

Hope this helps someone else, and please post if you have further improvements.

- Tim

Edited December 18, 2013 by fiddler1 (see edit history)