Announcement

Collapse
No announcement yet.

Complete Order button grayed out on autofill.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Complete Order button grayed out on autofill.

    Using Elements framework on mobile and desktop when you autofill the credit card data the Complete Order button is grayed out. When you manually type the information in there isn't a problem. Any ideas? Here is the OPAY form code on our site currently:

    Code:
                <form data-hook="opay-form" method="post" action="&mvt:payment:url;">
                    <fieldset>
                        <legend>&mvt:page:name;</legend>
                        <input type="hidden" name="Action" value="AUTH" />
                        <input type="hidden" name="Screen" value="INVC" />
                        <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                        <mvt:item name="payment" />
                        <input data-hook="payment-method" type="hidden" name="PaymentMethod" value="&mvte:global:PaymentMethod;">
                        <input type="hidden" name="SplitPaymentData" value="&mvte:global:SplitPaymentData;" />
                        <p class="c-heading-delta">
                            Payment Information<br>
                            <span class="c-heading--subheading">Payment Method: <span data-hook="payment-method-display">&mvt:payment:desc;</span></span>
                        </p>
                        <mvt:if expr="NOT ISNULL l.settings:payment:message">
                            <p class="x-messages x-messages--info">&mvt:payment:message;</p>
                        </mvt:if>
                        <mvt:if expr="l.settings:paymentsettings:mivapay:enabled AND ( l.settings:mivapay:paymentcardtype:id OR l.settings:mivapay:paymentcard:id )">
                            <ul class="c-form-list">
                                <li class="c-form-list__item c-form-list__item--full">
                                    <mvt:item name="mivapay"/>
                                </li>
                            </ul>
                        <mvt:else>
                            <ul class="c-form-list o-layout u-grids-1 u-grids-2--m">
                                <mvt:foreach array="payment:fields" iterator="field">
                                    <mvt:if expr="'exp' CIN l.settings:field:code">
                                        <li class="c-form-list__item o-layout__item" data-hook="mvt-select" data-classlist="c-form-select__dropdown" data-id="&mvt:field:code;">
                                            <mvt:if expr="l.settings:field:invalid">
                                                <label class="c-form-label u-color-red" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
                                            <mvt:else>
                                                <label class="c-form-label" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
                                            </mvt:if>
                                            <div class="c-control-group">
                                                <mvt:item name="payment" param="field:code" />
                                            </div>
                                        </li>
                                    <mvt:elseif expr="l.settings:field:code EQ 'cc_number'">
                                        <li class="c-form-list__item o-layout__item" data-hook="mvt-input" data-classlist="c-form-input" data-id="&mvt:field:code;" data-dataHook="detect-card">
                                            <mvt:if expr="l.settings:field:invalid">
                                                <label class="c-form-label u-color-red" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
                                            <mvt:else>
                                                <label class="c-form-label" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
                                            </mvt:if>
                                            <mvt:item name="payment" param="field:code" />
                                        </li>
                                    <mvt:elseif expr="'cvv' CIN l.settings:field:code">
                                        <li class="c-form-list__item o-layout__item" data-hook="mvt-input" data-classlist="c-form-input" data-id="&mvt:field:code;">
                                            <mvt:if expr="l.settings:field:invalid">
                                                <label class="c-form-label u-color-red" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
                                            <mvt:else>
                                                <label class="c-form-label" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
                                            </mvt:if>
                                            <mvt:item name="payment" param="field:code" />
                                            <button class="c-button c-button--small c-button--clear" data-mini-modal data-mini-modal-type="inline" data-mini-modal-content="data-cvv" title="Card Security Code Information">What's This? <span class="u-icon-question"></span></button>
                                        </li>
                                    <mvt:else>
                                        <li class="c-form-list__item o-layout__item" data-hook="mvt-input" data-classlist="c-form-input" data-id="&mvt:field:code;">
                                            <mvt:if expr="l.settings:field:invalid">
                                                <label class="c-form-label u-color-red" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
                                            <mvt:else>
                                                <label class="c-form-label" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
                                            </mvt:if>
                                            <mvt:item name="payment" param="field:code" />
                                        </li>
                                    </mvt:if>
                                </mvt:foreach>
                            </ul>
                        </mvt:if>
    
                        <mvt:if expr="l.settings:payment:capabilities:split">
                            <ul class="c-form-list">
                                <mvt:if expr="g.Amount_Invalid">
                                    <p class="c-heading-delta u-color-red">Payment Amount</p>
                                <mvt:else>
                                    <p class="c-heading-delta">Payment Amount</p>
                                </mvt:if>
    
                                <li class="c-form-list__item">
                                    <mvt:if expr="( NOT l.settings:payment:capabilities:balance ) OR ( l.settings:payment:balance GE l.settings:splitpayment:remaining )">
                                        <mvt:if expr="NOT g.UI_Exception">
                                            <mvt:assign name="g.AmountType" value="'total'" />
                                            <mvt:assign name="g.Amount" value="l.settings:splitpayment:remaining ROUND 2" />
                                        </mvt:if>
    
                                        <label class="c-form-checkbox">
                                            <mvt:if expr="g.AmountType EQ 'total'">
                                                <input class="c-form-checkbox__input" type="radio" name="AmountType" value="total" onclick="AmountType_Changed( this.value );" checked>
                                            <mvt:else>
                                                <input class="c-form-checkbox__input" type="radio" name="AmountType" value="total" onclick="AmountType_Changed( this.value );">
                                            </mvt:if>
    
                                            <mvt:if expr="NOT ISNULL l.settings:payment:split_data">
                                                <span class="c-form-checkbox__caption">Remaining Order Total (&mvt:payment:formatted_remaining;)</span>
                                            <mvt:else>
                                                <span class="c-form-checkbox__caption">Entire Order Total (&mvt:basket:formatted_total;)</span>
                                            </mvt:if>
                                        </label>
                                    <mvt:else>
                                        <mvt:if expr="NOT g.UI_Exception">
                                            <mvt:assign name="g.AmountType" value="'balance'" />
                                            <mvt:assign name="g.Amount" value="l.settings:payment:balance ROUND 2" />
                                        </mvt:if>
    
                                        <label class="c-form-checkbox">
                                            <mvt:if expr="g.AmountType EQ 'balance'">
                                                <input data-hook="payment-balance-amount" type="hidden" name="Amount" value="&mvte:payment:balance;">
                                                <input class="c-form-checkbox__input" type="radio" name="AmountType" value="balance" onclick="AmountType_Changed( this.value );" checked>
                                            <mvt:else>
                                                <input data-hook="payment-balance-amount" type="hidden" name="Amount" value="&mvte:payment:balance;" disabled>
                                                <input class="c-form-checkbox__input" type="radio" name="AmountType" value="balance" onclick="AmountType_Changed( this.value );">
                                            </mvt:if>
                                            <span class="c-form-checkbox__caption">Available Balance (&mvt:payment:formatted_balance;)</span>
                                        </label>
                                    </mvt:if>
                                </li>
                                <li class="c-form-list__item">
                                    <label class="c-form-checkbox">
                                        <mvt:if expr="g.AmountType EQ 'partial'">
                                            <input class="c-form-checkbox__input" type="radio" name="AmountType" value="partial" onclick="AmountType_Changed( this.value );" checked>
                                            <span class="c-form-checkbox__caption">Partial: <input class="c-form-input" data-hook="payment-amount" type="text" name="Amount" value="&mvte:global:Amount;"></span>
                                        <mvt:else>
                                            <input class="c-form-checkbox__input" type="radio" name="AmountType" value="partial" onclick="AmountType_Changed( this.value );">
                                            <span class="c-form-checkbox__caption">Partial: <input class="c-form-input" data-hook="payment-amount" type="text" name="Amount" value="&mvte:global:Amount;" disabled></span>
                                        </mvt:if>
                                    </label>
                                </li>
                            </ul>
    
                            <mvt:if expr="g.AmountType EQ 'total'">
                                <mvt:assign name="l.settings:display" value="'u-hidden'" />
                            <mvt:else>
                                <mvt:assign name="l.settings:display" value="'u-shown'" />
                            </mvt:if>
                            <section class="&mvt:display;" data-hook="payment-additional">
                                <p class="c-heading-delta">Pay Additional Balance With</p>
                                <ul class="c-form-list">
                                    <mvt:foreach array="paymentmethods" iterator="method">
                                        <mvt:if expr="( l.settings:method:module NE 'customercredit' ) OR ( ( g.PaymentMethod NE 'customercredit:credit' ) AND ( NOT miva_array_search( l.settings:splitpayment:splits, 1, l.split, 'l.split:module:code EQ l.settings:method:module' ) ) )">
                                            <li class="c-form-list__item c-form-list__item--full u-font-small">
                                                <mvt:if expr="pos1 EQ 1">
                                                    <label class="c-form-checkbox">
                                                        <mvt:if expr="l.settings:method:paymentcard:id">
                                                            <input class="c-form-checkbox__input" type="radio" name="AdditionalPaymentMethod" value="paymentcard:&mvte:method:paymentcard:id;" checked>
                                                        <mvt:elseif expr="l.settings:method:paymentcardtype:id">
                                                            <input class="c-form-checkbox__input" type="radio" name="AdditionalPaymentMethod" value="paymentcardtype:&mvte:method:paymentcardtype:id;" checked>
                                                        <mvt:else>
                                                            <input class="c-form-checkbox__input" type="radio" name="AdditionalPaymentMethod" value="&mvte:method:module;:&mvte:method:code;" checked>
                                                        </mvt:if>
                                                        <span class="c-form-checkbox__caption">&mvt:method:name;</span>
                                                    </label>
                                                <mvt:else>
                                                    <label class="c-form-checkbox">
                                                        <mvt:if expr="l.settings:method:paymentcard:id">
                                                            <input class="c-form-checkbox__input" type="radio" name="AdditionalPaymentMethod" value="paymentcard:&mvte:method:paymentcard:id;">
                                                        <mvt:elseif expr="l.settings:method:paymentcardtype:id">
                                                            <input class="c-form-checkbox__input" type="radio" name="AdditionalPaymentMethod" value="paymentcardtype:&mvte:method:paymentcardtype:id;">
                                                        <mvt:else>
                                                            <input class="c-form-checkbox__input" type="radio" name="AdditionalPaymentMethod" value="&mvte:method:module;:&mvte:method:code;">
                                                        </mvt:if>
                                                        <span class="c-form-checkbox__caption">&mvt:method:name;</span>
                                                    </label>
                                                </mvt:if>
                                            </li>
                                        </mvt:if>
                                    </mvt:foreach>
                                </ul>
                            </section>
                        </mvt:if>
    
                        <ul class="c-form-list">
                            <li class="c-form-list__item c-form-list__item--full u-text-right">
                                <mvt:if expr="l.settings:paymentsettings:mivapay:enabled AND ( l.settings:mivapay:paymentcardtype:id OR l.settings:mivapay:paymentcard:id )">
                                    <script type="text/javascript">
                                        var onclick_submit = function () {
                                            if (MivaPay && ( typeof MivaPay.Submit === 'function' )) {
                                                MivaPay.Submit(function () {
                                                    var form;
    
                                                    form = document.querySelector('[data-hook="opay-form"]');
                                                    form.submit();
                                                });
                                            }
                                        }
                                    </script>
    
                                    <span onclick="onclick_submit(); return false;">
                                        <input class="c-button c-button--large c-button--primary" type="submit" value="Complete Order">
                                    </span>
                                <mvt:else>
                                    <mvt:if expr="g.cc_payment EQ 1">
                                        <mvt:if expr="l.settings:payment:capabilities:split">
                                            <input class="c-button c-button--large c-button--primary" data-hook="submit-form" type="submit" value="Complete Order">
                                        <mvt:else>
                                            <input class="c-button c-button--large c-button--primary" data-hook="submit-form" type="submit" value="Complete Order" disabled>
                                        </mvt:if>
                                    <mvt:else>
                                        <input class="c-button c-button--large c-button--primary" data-hook="submit-form" type="submit" value="Complete Order">
                                    </mvt:if>
                                </mvt:if>
                            </li>
                        </ul>
                    </fieldset>
                </form>
    www.jcroffroad.com

    #2
    There have been several updates made to Shadows which have not been retrofitted to Elements. This update may solve your issue: https://github.com/mivaecommerce/rea...dows/issues/46
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      Thanks for the response.
      I followed the line update there and it didn't seem to work. So I updated the whole scripts.js file with the most up to date version and that didn't seem to help either.
      I have submitted a ticket.
      Last edited by monkeyevil; 06-19-19, 06:55 AM.
      www.jcroffroad.com

      Comment


        #4
        Are you using MivaPay, what browser(s) are you seeing this in, and are you using a third-party function for auto-fill or the browser's implementation? Unfortunately, there are several aspects of auto-fill that do not always work reliably.
        Matt Zimmermann
        Front-End Development Director / Miva, Inc.

        Comment


          #5
          Sounds like the button script is looking at key or focus actions, for which autofill--on some browsers, won't trigger? We've had to add jQuery/JS hacks in our self developed sites when doing things like CC detection and customer info scripts. Fun times kids, fun times. Chrome also just disregards autofill-off entirely anyway.
          Bruce Golub
          Phosphor Media - "Your Success is our Business"

          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
          phosphormedia.com

          Comment

          Working...
          X