PayPal Commerce and listing the cards accepted

[lesliekirk]

Used to be we could tweak the layout to list out the credit cards, PayPal or other payment options with a radio button selection. With PayPal Commerce the radio button selection has been whittled down to credit cards and PayPal. Can the "old school" method of list each card type be used with PayPal Commerce or will it confuse it? Has anyone tried?

[SidFeyDesigns]

Never tried separating them but I just set up PayPal commerce for a site recently ( site is still on Suivant ) and I assigned an image I created to display next to the radio button/label text.

I also set the Credit Card Payment Method Rule to Display as "Card" so people didn't think credit card only.

You could also set the Display as rule to be a list of the cards accepted if you don't want to use an image. Ex: "Visa, MasterCard, Discover, or American Express".

Code to assign an image (besed off the Suivant theme):

<mvt:if expr="l.settings:method:code EQ 'cc'">
    <mvt:assign name="l.settings:payment:method:image" value="g.theme_path $ '/images/icons/logo_Visa_MC_Disc_Amex_160x32.png'" />
<mvt:elseif expr="l.settings:method:code EQ 'paypal'">
    <mvt:assign name="l.settings:payment:method:image" value="g.theme_path $ '/images/icons/logo_paypal.png'" />
</mvt:if>
<div class="form-row payment-method-selectors">
    <label class="column whole np" for="l-&mvte:method:name;">
        <mvt:if expr="pos1 EQ 1">
            <input class="align-middle" type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="l-&mvte:method:name;" checked />
        <mvt:else>
            <input class="align-middle" type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="l-&mvte:method:name;" />
        </mvt:if>
        <span class="method-name inline-block align-middle">&nbsp;&mvt:method:name;&nbsp;</span>
        <img class="inline-block" src="&mvt:payment:method:image;" alt="&mvte:method:name;" />
        <mvt:if expr="l.settings:method:code EQ 'paypal'">
            <mvt:item name="readytheme" param="contentsection( 'paypalcp_configuration' )" />
        </mvt:if>
    </label>
</div>

Untitled.png

[lesliekirk]

Never tried separating them but I just set up PayPal commerce for a site recently ( site is still on Suivant ) and I assigned an image I created to display next to the radio button/label text.

I also set the Credit Card Payment Method Rule to Display as "Card" so people didn't think credit card only.

You could also set the Display as rule to be a list of the cards accepted if you don't want to use an image. Ex: "Visa, MasterCard, Discover, or American Express".

Code to assign an image (besed off the Suivant theme):

<mvt:if expr="l.settings:method:code EQ 'cc'">
<mvt:assign name="l.settings:payment:method:image" value="g.theme_path $ '/images/icons/logo_Visa_MC_Disc_Amex_160x32.png'" />
<mvt:elseif expr="l.settings:method:code EQ 'paypal'">
<mvt:assign name="l.settings:payment:method:image" value="g.theme_path $ '/images/icons/logo_paypal.png'" />
</mvt:if>
<div class="form-row payment-method-selectors">
<label class="column whole np" for="l-&mvte:method:name;">
<mvt:if expr="pos1 EQ 1">
<input class="align-middle" type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="l-&mvte:method:name;" checked />
<mvt:else>
<input class="align-middle" type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" id="l-&mvte:method:name;" />
</mvt:if>
<span class="method-name inline-block align-middle">&nbsp;&mvt:method:name;&nbsp;</span>
<img class="inline-block" src="&mvt:payment:method:image;" alt="&mvte:method:name;" />
<mvt:if expr="l.settings:method:code EQ 'paypal'">
<mvt:item name="readytheme" param="contentsection( 'paypalcp_configuration' )" />
</mvt:if>
</label>
</div>

Untitled.png

Very sexy! Thanks for sharing.