OPAY: CVV Mini-Modal Not Working #73

influxweb · 2019-10-17T19:36:10Z

Expected Behavior

When using a payment gateway which utilizes the CVV field, the "What's This?" button should open the relevant information in a modal.

Current Behavior

Currently the button is not triggering the modal to open.

Correcting the Issue

It appears the issue isn't with mini-modal per se but something to do with the button not being recognized as a trigger element. I have added this update and it will be included in the next maintenance release.

To make the update prior to the next release, you will need to update the following code:

User Interface -> Pages -> OPAY -> Template:

<mvt:item name="html_profile" />
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<base href="&mvt:global:basehref;">
	<mvt:if expr="NOT ISNULL l.settings:page:title">
		<title>&mvt:page:title;</title>
	<mvt:else>
		<title>&mvt:store:name;: &mvt:page:name;</title>
	</mvt:if>
	<mvt:item name="head" param="css_list" />
	<mvt:item name="head" param="head_tag" />
	<mvt:if expr="l.settings:payment:capabilities:split">
		<script>
			function AmountType_Changed(amounttype) {
				var balance_amount = document.querySelector('[data-hook="payment-balance-amount"]');
				var amount = document.querySelector('[data-hook="payment-amount"]');
				var additional = document.querySelector('[data-hook="payment-additional"]');
				if (amounttype === 'total') {
					amount.disabled = true;
					additional.classList.add('u-hidden');
					if (balance_amount) {
						balance_amount.disabled = true;
					}
				}
				else if (amounttype === 'balance') {
					amount.disabled = true;
					additional.classList.remove('u-hidden');
					if (balance_amount) {
						balance_amount.disabled = false;
					}
				}
				else if (amounttype === 'partial') {
					amount.disabled = false;
					additional.classList.remove('u-hidden');
					if (balance_amount) {
						balance_amount.disabled	= true;
					}
				}
			}
		</script>
	</mvt:if>
	<mvt:if expr="NOT('check' CIN g.PaymentMethod) AND NOT('cod' CIN g.PaymentMethod) AND NOT('pal' CIN g.PaymentMethod)">
		<script>
			var supportedPaymentMethods = [
				<mvt:foreach array="paymentmethods" iterator="method">
					<mvt:if expr="l.settings:method:module NE 'check' AND l.settings:method:module NE 'cod' AND l.settings:method:module NE 'customercredit' AND NOT('pal' CIN l.settings:method:module)">
						<mvt:if expr="'am' CIN l.settings:method:code OR 'ax' CIN l.settings:method:code OR '003' CIN l.settings:method:code">
							{name: 'american-express', value: '&mvte:method:module;:&mvte:method:code;'},
						<mvt:elseif expr="'di' CIN l.settings:method:code OR '004' CIN l.settings:method:code">
							{name: 'discover', value: '&mvte:method:module;:&mvte:method:code;'},
						<mvt:elseif expr="'mc' CIN l.settings:method:code OR 'master' CIN l.settings:method:code OR '002' CIN l.settings:method:code">
							{name: 'mastercard', value: '&mvte:method:module;:&mvte:method:code;'},
						<mvt:elseif expr="'vi' CIN l.settings:method:code OR '001' CIN l.settings:method:code">
							{name: 'visa', value: '&mvte:method:module;:&mvte:method:code;'},
						</mvt:if>
						<mvt:assign name="g.cc_payment" value="1" />
						<mvt:assign name="g.payment_module_class" value="l.settings:method:module $ '-payment-form'" />
					</mvt:if>
				</mvt:foreach>
			]
		</script>
	</mvt:if>
</head>
<body id="js-&mvte:page:code;" class="o-site-wrapper t-page-&mvt:global:pageClass;">
	<mvt:item name="hdft" param="global_header" />

	<section class="o-layout">
		<div class="o-layout__item">
			<mvt:item name="hdft" param="header" />
			<mvt:item name="customfields" param="Write_Basket('order_instructions', g.order_instructions)" />
		</div>
	</section>

	<section class="o-layout o-layout--wide">
		<div class="o-layout__item u-width-12 u-width-8--l u-width-5--w u-offset-2--w">
			<mvt:item name="readytheme" param="contentsection( 'checkout_steps' )" />
			<mvt:item name="readytheme" param="contentsection( 'messages' )" />

			<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-echo u-text-bold u-text-uppercase">
						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:elseif expr="'brain' CIN g.PaymentMethod">
						<ul class="c-form-list">
							<li class="c-form-list__item c-form-list__item--full">
								<mvt:foreach array="payment:fields" iterator="field">
									<mvt:item name="payment" param="field:code" />
								</mvt:foreach>
							</li>
						</ul>
					<mvt:elseif expr="'square' CIN g.PaymentMethod">
						<ul class="c-form-list o-layout u-grids-1 u-text-bold u-text-uppercase t-payment-form t-&mvt:global:payment_module_class;">
							<li class="c-form-list__item">
								<mvt:foreach array="payment:fields" iterator="field">
									<mvt:item name="payment" param="field:code" />
								</mvt:foreach>
							</li>
						</ul>
					<mvt:else>
						<ul class="c-form-list o-layout u-grids-1 u-text-bold u-text-uppercase t-payment-form t-&mvt:global:payment_module_class;">
							<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 c-form-input--huge u-font-small" data-id="&mvt:field:code;">
										<mvt:if expr="l.settings:field:invalid">
											<label class="c-form-label u-color-red u-font-tiny" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
										<mvt:else>
											<label class="c-form-label u-font-tiny" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
										</mvt:if>
										<div class="c-control-group o-layout--align-baseline">
											<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 c-form-input--huge u-font-small" data-id="&mvt:field:code;" data-dataHook="detect-card">
										<mvt:if expr="l.settings:field:invalid">
											<label class="c-form-label u-color-red u-font-tiny" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
										<mvt:else>
											<label class="c-form-label u-font-tiny" 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">
										<mvt:if expr="l.settings:field:invalid">
											<label class="c-form-label u-color-red u-font-tiny" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
										<mvt:else>
											<label class="c-form-label u-font-tiny" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
										</mvt:if>
										<div class="c-control-group o-layout--align-baseline">
											<span class="u-width-6" data-hook="mvt-input" data-classlist="c-form-input c-form-input--huge u-font-small c-form-input--cvv" data-id="&mvt:field:code;">
												<mvt:item name="payment" param="field:code"/>
											</span>
											<span class="u-width-6">
												<button class="c-button c-button--small c-button--clear u-bg-transparent x-messages--info t-data-cvv" data-mini-modal data-mini-modal-type="inline" data-mini-modal-content="data-cvv" title="Card Security Code Information" type="button">What's This? <span class="u-icon-question"></span></button>
											</span>
										</div>

										<div class="u-hidden" data-cvv>
											<section class="c-mini-modal__element-subject u-width-12 u-width-6--m u-bg-white">
												<p class="c-heading-delta u-text-uppercase">Card Security Code</p>
												<p><strong>What is the CVV2 and what does it look like?</strong><br />For your protection, we ask that you enter an extra 3-4 digit number called the CVV2. The CVV2 is NOT your PIN number and is not the last 3 or 4 digits of your credit card number. It is an extra ID printed on your Visa, MasterCard, Discover or American Express Card.<br />We request this code as a security measure to our customers. Requiring this information helps to ensure that the credit card is present at the time of purchase. If you cannot find this code or it is illegible, please contact your credit card issuer.</p>
												<p><strong>Visa, MasterCard and Discover:</strong><br />On the back of the card in the top-right corner of the signature box. Enter the three-digit number following the credit card number. (See below.)</p>
												<p><strong>American Express:</strong><br />On the front of the card. Enter the four-digit number on the right directly above the credit card number. (See below.)</p>
												<p class="u-text-center"><img src="&mvte:global:theme_path;/core/images/img_cvv.png" alt="CID/CVV/CVV2 Locations" title="CID/CVV/CVV2 Locations"></p>
											</section>
										</div>
									</li>
								<mvt:else>
									<li class="c-form-list__item o-layout__item" data-hook="mvt-input" data-classlist="c-form-input c-form-input--huge u-font-small" data-id="&mvt:field:code;">
										<mvt:if expr="l.settings:field:invalid">
											<label class="c-form-label u-color-red u-font-tiny" for="&mvt:field:code;" title="&mvt:field:prompt;">&mvt:field:prompt;</label>
										<mvt:else>
											<label class="c-form-label u-font-tiny" 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>
						<hr class="c-keyline">
					</mvt:if>

					<mvt:if expr="l.settings:payment:capabilities:split">
						<ul class="c-form-list u-text-uppercase">
							<mvt:if expr="g.Amount_Invalid">
								<p class="c-heading-echo u-text-bold u-color-red">Payment Amount</p>
							<mvt:else>
								<p class="c-heading-echo u-text-bold">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 c-form-checkbox--radio u-font-small">
										<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 c-form-checkbox--radio u-font-small">
										<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 c-form-checkbox--radio u-font-small">
									<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; u-text-uppercase" data-hook="payment-additional">
							<p class="c-heading-echo u-text-bold">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 c-form-checkbox--radio u-font-small">
													<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 c-form-checkbox--radio u-font-small">
													<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 o-layout u-flex">
							<div class="o-layout__item u-text-right">
								<p class="c-heading-delta u-text-uppercase u-text-bold">
									<span class="c-heading--subheading">Current Total</span><br>
									&mvt:basket:formatted_total;
								</p>
							</div>
							<div class="o-layout__item t-payment-cta">
								<mvt:if expr="l.settings:paymentsettings:mivapay:enabled AND ( l.settings:mivapay:paymentcardtype:id OR l.settings:mivapay:paymentcard:id )">
									<script>
										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--huge c-button--full u-bg-gray-50 u-font-small u-text-medium u-text-uppercase" type="submit" value="Complete Order">
									</span>
								<mvt:elseif expr="'brain' CIN g.PaymentMethod OR 'square' CIN g.PaymentMethod">
									<input class="c-button c-button--huge c-button--full u-bg-gray-50 u-font-small u-text-medium u-text-uppercase" type="submit" value="Complete Order">
								<mvt:else>
									<mvt:if expr="g.cc_payment EQ 1">
										<input class="c-button c-button--huge c-button--full u-bg-gray-50 u-font-small u-text-medium u-text-uppercase" data-hook="submit-form" type="submit" value="Complete Order">
									<mvt:else>
										<input class="c-button c-button--huge c-button--full u-bg-gray-50 u-font-small u-text-medium u-text-uppercase" type="submit" value="Complete Order">
									</mvt:if>
								</mvt:if>
							</div>
						</li>
					</ul>
				</fieldset>
			</form>

			<hr class="c-keyline">

			<mvt:item name="customer" />
		</div>
		<aside class="o-layout__item u-width-12 u-width-4--l u-width-5--w">
			<mvt:item name="basket" />
		</aside>
	</section>

	<section class="o-layout">
		<div class="o-layout__item">
			<mvt:item name="hdft" param="footer" />
		</div>
	</section>

	<mvt:item name="hdft" param="global_footer" />
</body>
</html>

User Interface -> CSS Resources -> theme-styles:

				.t-payment-form .c-form-input--cvv {
					max-width: none;
				}

				.t-payment-form .t-data-cvv {
					margin-left: 0.5rem;
				}

The text was updated successfully, but these errors were encountered:

This maintenance release addresses all issues contained in the v1.0.6 milestone. https://github.com/mivaecommerce/readytheme-shadows/milestone/7?closed=1 This closes #68, closes #69, closes #70, closes #71, closes #72, closes #73, closes #74, closes #75, closes #76, closes #77, and closes #78

influxweb added bug verified v1.0.6 labels Oct 17, 2019

influxweb added this to the v1.0.6 milestone Oct 17, 2019

influxweb self-assigned this Oct 17, 2019

influxweb mentioned this issue Oct 18, 2019

v1.0.6 #79

Merged

influxweb closed this as completed in #79 Oct 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OPAY: CVV Mini-Modal Not Working #73

OPAY: CVV Mini-Modal Not Working #73

influxweb commented Oct 17, 2019 •

edited

Loading

OPAY: CVV Mini-Modal Not Working #73

OPAY: CVV Mini-Modal Not Working #73

Comments

influxweb commented Oct 17, 2019 • edited Loading

Expected Behavior

Current Behavior

Correcting the Issue

influxweb commented Oct 17, 2019 •

edited

Loading