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>
Comment