PayPal Commerce Credit Card Autocomplete and Placeholder

[kocourek]

Has anyone that is using the PayPal Commerce Platform been able to get placeholders added to OPAY? I am hoping to add a placeholder specifically to the expiration date field to prevent some customer confusion.

Additionally, I'm not sure if it's my specific implementation or not, but when using a form fill on OPAY, filling the form from the Name field, only the name is populated. If you autofill from the credit card number field, the entire form is properly populated.

[Brennan]

Each of the input fields are actually independent iframes (loaded from PayPal) so you can't control the default content from Miva. The expiration field should auto format any numbers into the date format required and prevent letters. What is the confusion you're seeing from customers?

[kocourek]

Thanks for the reply, Brennan. Moving from Payflow, where the expiration date was split into separate fields for month and year, to the PayPal Commerce platform, where there is now a single form for the expiration date, caused each of my testers to briefly question how to enter the date. That being said, each of them eventually did eventually enter the date, but I'd prefer to limit any potential confusion within checkout.

It appears as though there is some support for injecting data into the PayPal-hosted iframe using the "data-mvt-##" fields on OPAY, but a "data-mvt-placeholder" was not working for me.

Has anyone else experienced the form fill issue on OPAY using the PayPal Commerce Platform?

[SidFeyDesigns]

You could target the expiration field to help give customers a hint.

I recently did this for a client's site when installing PayPal Commerce.

I used a modified version of the code in Shadows and applied it to the Suivant Readytheme with some custom styling.

You will need to change the html code/css classes to match whatever theme you're using but the code in red is where the expiration date field for PayPal Commerce Credit Cards is targeted. The code in blue was my way of providing instruction to their customers.

Make sure you're editing the payment field code within the green <mvt:elseif expr="g.PaymentMethod EQ 'paypalcp:cc'"> conditional statement.

<mvt:if expr="l.settings:paymentsettings:mivapay:enabled AND ( l.settings:mivapay:paymentcardtype:id OR l.settings:mivapay:paymentcard:id )">
    <!-- miva pay code -->
<mvt:elseif expr="'brain' CIN g.PaymentMethod">
    <!-- braintree payment field code -->
<mvt:elseif expr="'square' CIN g.PaymentMethod">
    <!-- square payment field code -->
<mvt:elseif expr="g.PaymentMethod EQ 'paypalcp:cc'">
    <div id="payment-fields">
        <div class="column whole payment-fields-header">
            <span class="inline-block">Pay with card</span>
            <img class="inline-block float-right" src="../images/icons/logo_Visa_MC_Disc_Amex_160x32.png" alt="Cards Accepted" title="Cards Accepted">
        </div>
        <div class="column whole np payment-fields-container">
            <mvt:foreach array="payment:fields" iterator="field">
               <mvt:if expr="l.settings:field:code EQ 'cc_exp'">
                    <div class="column whole x-small-half">
                        <mvt:if expr="l.settings:field:invalid">
                            <label class="required error" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                        <mvt:else>
                            <label class="required" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                        </mvt:if>
                      <span class="small">(MM/YY)</span>
                      <mvt:item name="payment" param="field:code" />
                    </div>
                <mvt:elseif expr="l.settings:field:code EQ 'cc_number'">
                    <div class="column whole">
                        <mvt:if expr="l.settings:field:invalid">
                            <label class="required error" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                        <mvt:else>
                            <label class="required" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                        </mvt:if>
                        <mvt:item name="payment" param="field:code" />
                    </div>
                <mvt:elseif expr="l.settings:field:code EQ 'cc_cvv'">
                    <div class="column whole x-small-half">
                        <mvt:if expr="l.settings:field:invalid">
                            <label class="required error" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                        <mvt:else>
                            <label class="required" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                        </mvt:if>
                        <a href="&mvt:urls:_self:auto;#js-cvv-information" title="Find your CVV number" id="js-open-cvv-information" class="blue"><span class="small decoration">Click to find your CVV</span></a>
                        <mvt:item name="payment" param="field:code"/>
                    </div>
                <mvt:else>
                    <div class="column whole">
                        <mvt:if expr="l.settings:field:invalid">
                            <label class="required error" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                        <mvt:else>
                            <label class="required" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                        </mvt:if>
                        <mvt:item name="payment" param="field:code" />
                    </div>
                </mvt:if>
            </mvt:foreach>
        </div>
        <div class="clear"></div>
    </div>
<mvt:else>
    <!-- other payment field code -->
</mvt:if>

Here's a screenshot of the results:
PayPal-Card-Fields.png

Haven't had any complaints about customer confusion so far from the client.

Hope this helps.

-Nick

[kocourek]

That approach will work just fine. Thanks for the idea!