OSEL Payment Selection Options in Suivant

[widgetsupply]

So, for some reason Check payment is the default option on OSEL. We get very few check payments. This is compounded by the fact there is a very subtle difference between selected and not selected payment options. While we have been live on Suivant for less than a week, we have had quite a few customers who have abandoned their cart, complained, or ended up checking out with check payment thinking that was the only option. So, I am wondering what the options are.

I'd like to make check payment be the last option, but that still won't address the issue that customer aren't understanding the payment options.

1. Can I have a different image for payment options that are not selected. It would be more obvious if the selected option was in color and the others were in black and white and faded.

2. So, can I change to radio buttons? There is radio button code below the image code?

3. Can I choose a different default payment method?

4. Can I not have a default payment method, which would force the customer to choose?

5. Other ideas?

I'd appreciate any advice I can get.

Here is my complete code:

<div class="column whole medium-half">
<p class="h4 fields-heading uppercase">Please Select Your Payment Method</p>
<mvt:assign name="l.settings:payment:method:image" value="''" />
<mvt:foreach array="paymentmethods" iterator="method">
<mvt:if expr="'am' CIN l.settings:method:code OR 'ax' CIN l.settings:method:code OR '003' CIN l.settings:method:code">
<mvt:assign name="l.settings:payment:method:image" value="'../images/icons/logo_amex.png'" />
<mvt:elseif expr="'vi' CIN l.settings:method:code OR '001' CIN l.settings:method:code">
<mvt:assign name="l.settings:payment:method:image" value="'../images/icons/logo_visa.png'" />
<mvt:elseif expr="'mc' CIN l.settings:method:code OR 'master' CIN l.settings:method:code OR '002' CIN l.settings:method:code">
<mvt:assign name="l.settings:payment:method:image" value="'../images/icons/logo_mastercard.png'" />
<mvt:elseif expr="'di' CIN l.settings:method:code OR '004' CIN l.settings:method:code">
<mvt:assign name="l.settings:payment:method:image" value="'../images/icons/logo_discover.png'" />
<mvt:elseif expr="'ach' CIN l.settings:method:code OR 'check' CIN l.settings:method:code">
<mvt:assign name="l.settings:payment:method:image" value="'../images/icons/logo_check.png'" />
<mvt:elseif expr="'paypal' CIN l.settings:method:code OR 'pp' CIN l.settings:method:code OR 'pal' CIN l.settings:method:code">
<mvt:assign name="l.settings:payment:method:image" value="'../images/icons/logo_paypal.png'" />
</mvt:if>
<div class="column one-fourth payment-method-selectors">
<mvt:if expr="pos1 EQ 1">
<label for="l-&mvt:method:name;"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" checked="checked" id="l-&mvt:method:name;" /><img src="&mvt:payment:method:image;" alt="&mvt:method:name;" title="&mvt:method:name;" /></label>
<mvt:else>
<label for="l-&mvt:method:name;"><input type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="l-&mvt:method:name;" /><img src="&mvt:payment:method:image;" alt="&mvt:method:name;" title="&mvt:method:name;" /></label>
</mvt:if>
</div>
</mvt:foreach>
</div>
</div>

[Matt Zimmermann]

Re: OSEL Payment Selection Options in Suivant

Hi John,

There are radio buttons as part of the default layout, they have been hidden through CSS. You can modify the functionality as you would like, it will just require some custom coding and CSS changes. To sort the payment methods, you have two choices. You can hard-code the methods in the order you want them or you could purchase the Payment Methods for Groups module to sort the order. If you go the module method you would need to convert to either radio buttons or a select list as you cannot sort the custom layout.

[Bruce - PhosphorMedia]

Re: OSEL Payment Selection Options in Suivant

if you do the custom method you also need some JS to test that a "selection" has been made OR make one of the payment options a default. The problem with defaulting to one method is that some customers overlook the selections and end up accepting the default.