Make credit card type choice radio buttons

[Southlander]

We use simple validation. I am surprised how often people email and say they see we only take one card type and they have a different card type. Thus they think they cannot order, not realizing there is a pull-down with other choices. Of course with simple validation the card type choice must match the card data that gets entered on the next screen. So they advance with "Visa" as the type and then key in a MasterCard, etc.

So I was thinking it would be clearer if the card choices were radio buttons.

Has anyone done this?

[Leanne]

Re: Make credit card type choice radio buttons

Sure. Just modify the layout to change from select inputs to radio buttons. The caveat is that you want to set one of them as default, otherwise if people forget to click a button, they'll get one of those ugly error pages. Just wrap the radio input in a conditional that checks for pos1. If it's 1, set the radio button to checked.

[Brandon MUS]

Re: Make credit card type choice radio buttons

Really simple code (with Visa selected by default):

	<mvt:item name="fonts" param="body_font">
	<mvt:foreach array="paymentmethods" iterator="method">
		<mvt:if expr="l.settings:method:Code EQ 'Visa'">
			<input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" checked="checked" /><label for="payment_&mvte:method:code;">&mvt:method:name;</label><br />
		<mvt:else>
			<input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" /><label for="payment_&mvte:method:code;">&mvt:method:name;</label><br />
		</mvt:if>
	</mvt:foreach>

Slightly more "spruced up":

<mvt:foreach array="paymentmethods" iterator="method">
	<mvt:if expr="l.settings:method:code EQ 'AmerExp' OR l.settings:method:code EQ 'American Express'">
		<span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" checked="checked" /><label for="payment_&mvte:method:code;"><img src="/images/miva/icon.amex.gif" alt="&mvte:method:name;" /></label></span>
	<mvt:elseif expr="l.settings:method:code EQ 'Discover'">
		<span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" /><label for="payment_&mvte:method:code;"><img src="/images/miva/icon.discover.gif" alt="&mvte:method:name;" /></label></span>
	<mvt:elseif expr="l.settings:method:code EQ 'MasterCard'">
		<span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" /><label for="payment_&mvte:method:code;"><img src="/images/miva/icon.mastercard.gif" alt="&mvte:method:name;" /></label></span>
	<mvt:elseif expr="l.settings:method:code EQ 'Visa'">
		<span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" /><label for="payment_&mvte:method:code;"><img src="/images/miva/icon.visa.gif" alt="&mvte:method:name;" /></label></span>
	<mvt:else>
		<span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" /><label for="payment_&mvte:method:code;">&mvte:method:name;</label></span>
	</mvt:if>
</mvt:foreach>

[papi34]

Re: Make credit card type choice radio buttons

Thanks Brandon. I tried your "spruced up" code, but was left with an empty dropdown box to the left of the radio buttons and none of them were selected by default. Here is what I did.

Replaced this:

   <mvt:foreach array="paymentmethods" iterator="method">
    <option value="&mvte:method:module;:&mvte:method:code;">&mvt:method:name;</option>
   </mvt:foreach>

With this:

   <mvt:foreach array="paymentmethods" iterator="method">
    <mvt:if expr="l.settings:method:code EQ 'AmerExp' OR l.settings:method:code EQ 'American Express'">
     <span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" checked="checked" /><label for="payment_&mvte:method:code;"><img src="/images/miva/icon.amex.gif" alt="&mvte:method:name;" /></label></span>
    <mvt:elseif expr="l.settings:method:code EQ 'Discover'">
     <span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" /><label for="payment_&mvte:method:code;"><img src="/images/miva/icon.discover.gif" alt="&mvte:method:name;" /></label></span>
    <mvt:elseif expr="l.settings:method:code EQ 'MasterCard'">
     <span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" /><label for="payment_&mvte:method:code;"><img src="/images/miva/icon.mastercard.gif" alt="&mvte:method:name;" /></label></span>
    <mvt:elseif expr="l.settings:method:code EQ 'Visa'">
     <span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" /><label for="payment_&mvte:method:code;"><img src="/images/miva/icon.visa.gif" alt="&mvte:method:name;" /></label></span>
    <mvt:else>
     <span class="payment-option"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="payment_&mvte:method:code;" class="inputRadio" /><label for="payment_&mvte:method:code;">&mvte:method:name;</label></span>
    </mvt:if>
   </mvt:foreach>

Did I do something wrong?

[Brandon MUS]

Re: Make credit card type choice radio buttons

I think you have it wrapped in a <select> tag. Look a couple lines up and see what you can find.

[papi34]

Re: Make credit card type choice radio buttons

I think you have it wrapped in a <select> tag. Look a couple lines up and see what you can find.

It is. So I take it those select tags should be removed?

[Brandon MUS]

Re: Make credit card type choice radio buttons

Yeah, that select tag makes it into a drop down menu. Remove that and you should be golden. You will probably want to play with the html and css to get it to look right. That's (most of) the markup from one of my stores.

[papi34]

Re: Make credit card type choice radio buttons

I went with the following and it seems to work fine...

 
<mvt:foreach array="paymentmethods" iterator="method">
<mvt:if expr="pos1 EQ 1">
<input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" checked>&mvt:method:name;<br>
<mvt:else>
<input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;">&mvt:method:name;<br>
</mvt:if>
</mvt:foreach>

thx!