mivaecommerce / readytheme-shadows

Shadows is the development framework and methodology used for creating our ReadyThemes as well as custom websites.
https://shadows.mivareadythemes.com/
MIT License
4 stars 3 forks source link

OPAY: Missing Order Instructions #92

Closed influxweb closed 3 years ago

influxweb commented 3 years ago

Current Behavior

If the OPAY page reloads, any order instructions originally there will be missing.

Correcting the Issue

To make the update, without applying the latest release, you will need to update the code in User Interface -> Templates -> Pages -> OPAY:

<mvt:item name="html_profile" />
<head>
    <meta charset="utf-8">
    <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-&mvte: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:if expr="NOT ISNULL g.order_instructions">
                <mvt:item name="customfields" param="Write_Basket('order_instructions', g.order_instructions)"/>
            </mvt:if>
            <mvt:item name="customfields" param="Read_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 )">
                        <div class="c-form-list">
                            <div class="c-form-list__item c-form-list__item--full">
                                <mvt:item name="mivapay"/>
                            </div>
                        </div>
                    <mvt:elseif expr="'brain' CIN g.PaymentMethod">
                        <div class="c-form-list">
                            <div 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>
                            </div>
                        </div>
                    <mvt:elseif expr="'square' CIN g.PaymentMethod">
                        <div class="c-form-list o-layout u-grids-1 u-text-bold u-text-uppercase t-payment-form t-square-payment-form">
                            <div class="c-form-list__item">
                                <mvt:foreach array="payment:fields" iterator="field">
                                    <mvt:item name="payment" param="field:code" />
                                </mvt:foreach>
                            </div>
                        </div>
                    <mvt:elseif expr="g.PaymentMethod EQ 'paypalcp:cc'">
                        <div id="payment-fields" class="c-form-list o-layout u-grids-1 u-text-bold u-text-uppercase t-payment-form t-paypalcp">
                            <mvt:foreach array="payment:fields" iterator="field">
                                <mvt:if expr="l.settings:field:code EQ 'cc_exp'">
                                    <div 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="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" 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_number'">
                                    <div class="c-form-list__item o-layout__item" data-hook="mvt-input" data-mvt-id="&mvte:field:code;" data-mvt-classlist="c-form-input c-form-input--huge u-font-small" data-mvt-autocomplete="cc-number" data-dataHook="detect-card">
                                        <mvt:if expr="l.settings:field:invalid">
                                            <label class="c-form-label u-color-red u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" 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="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="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        </mvt:if>
                                        <div class="c-control-group o-layout--align-center">
                                            <span class="u-width-6">
                                                <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-dialog-trigger="cvv-info" title="Card Security Code Information" type="button">What's This? <span class="u-icon-question" aria-hidden="true"></span></button>
                                            </span>
                                        </div>

                                        <div class="c-dialog" data-dialog="cvv-info" aria-hidden="true">
                                            <div class="c-dialog__overlay" tabindex="-1">
                                                <div class="c-dialog__container" aria-labelledby="cvv-info-title" aria-modal="true" role="dialog">
                                                    <header class="c-dialog__header">
                                                        <h2 id="cvv-info-title" class="c-dialog__title c-heading-delta u-text-uppercase">Credit Card Security Code</h2>
                                                        <button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
                                                    </header>
                                                    <div class="c-dialog__content">
                                                        <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" loading="lazy"></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <mvt:else>
                                    <div class="c-form-list__item o-layout__item" data-hook="mvt-input" data-mvt-id="&mvt:field:code;" data-mvt-classlist="c-form-input c-form-input--huge u-font-small" data-mvt-autocomplete="cc-name">
                                        <mvt:if expr="l.settings:field:invalid">
                                            <label class="c-form-label u-color-red u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" 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>
                    <mvt:else>
                        <div 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">
                                <!-- &mvte:field:code; -->
                                <mvt:if expr="'exp' CIN l.settings:field:code">
                                    <div class="c-form-list__item o-layout__item" data-hook="mvt-select" data-mvt-id="&mvte:field:code;" data-mvt-classlist="c-form-select__dropdown c-form-input--huge u-font-small">
                                        <mvt:if expr="l.settings:field:invalid">
                                            <label class="c-form-label u-color-red u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" for="&mvte:field:code;" title="&mvte: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>
                                    </div>
                                <mvt:elseif expr="l.settings:field:code EQ 'cc_number'">
                                    <div class="c-form-list__item o-layout__item" data-hook="mvt-input" data-mvt-id="&mvte:field:code;" data-mvt-classlist="c-form-input c-form-input--huge u-font-small" data-mvt-autocomplete="cc-number" data-dataHook="detect-card">
                                        <mvt:if expr="l.settings:field:invalid">
                                            <label class="c-form-label u-color-red u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        </mvt:if>
                                        <mvt:item name="payment" param="field:code" />
                                        <script id="&mvte:field:code;-script">
                                            (function () {
                                                let thisFunction = document.querySelector('#&mvte:field:code;-script');
                                                let ccNumber = thisFunction.previousElementSibling;

                                                ccNumber.setAttribute('inputmode', 'numeric');
                                                ccNumber.setAttribute('pattern', '[0-9]*');
                                            })();
                                        </script>
                                    </div>
                                <mvt:elseif expr="'cvv' CIN l.settings:field:code">
                                    <div 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="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" for="&mvte:field:code;" title="&mvte: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-mvt-id="&mvte:field:code;" data-mvt-classlist="c-form-input c-form-input--huge u-font-small c-form-input--cvv" data-mvt-autocomplete="cc-csc">
                                                <mvt:item name="payment" param="field:code"/>
                                                <script id="&mvte:field:code;-script">
                                                    (function () {
                                                        let thisFunction = document.querySelector('#&mvte:field:code;-script');
                                                        let ccCvv = thisFunction.previousElementSibling;

                                                        ccCvv.setAttribute('inputmode', 'numeric');
                                                        ccCvv.setAttribute('pattern', '[0-9]*');
                                                    })();
                                                </script>
                                            </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-dialog-trigger="cvv-info" title="Card Security Code Information" type="button">What's This? <span class="u-icon-question" aria-hidden="true"></span></button>
                                            </span>
                                        </div>

                                        <div class="c-dialog" data-dialog="cvv-info" aria-hidden="true">
                                            <div class="c-dialog__overlay" tabindex="-1">
                                                <div class="c-dialog__container" aria-labelledby="cvv-info-title" aria-modal="true" role="dialog">
                                                    <header class="c-dialog__header">
                                                        <h2 id="cvv-info-title" class="c-dialog__title c-heading-delta u-text-uppercase">Credit Card Security Code</h2>
                                                        <button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
                                                    </header>
                                                    <div class="c-dialog__content">
                                                        <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" loading="lazy"></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                <mvt:elseif expr="'fname' CIN l.settings:field:code">
                                    <div class="c-form-list__item o-layout__item" data-hook="mvt-input" data-mvt-id="&mvte:field:code;" data-mvt-classlist="c-form-input c-form-input--huge u-font-small" data-mvt-autocomplete="cc-given-name">
                                        <mvt:if expr="l.settings:field:invalid">
                                            <label class="c-form-label u-color-red u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" 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="'lname' CIN l.settings:field:code">
                                    <div class="c-form-list__item o-layout__item" data-hook="mvt-input" data-mvt-id="&mvte:field:code;" data-mvt-classlist="c-form-input c-form-input--huge u-font-small" data-mvt-autocomplete="cc-family-name">
                                        <mvt:if expr="l.settings:field:invalid">
                                            <label class="c-form-label u-color-red u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        </mvt:if>
                                        <mvt:item name="payment" param="field:code" />
                                    </div>
                                <mvt:else>
                                    <div class="c-form-list__item o-layout__item" data-hook="mvt-input" data-mvt-id="&mvte:field:code;" data-mvt-classlist="c-form-input c-form-input--huge u-font-small">
                                        <mvt:if expr="l.settings:field:invalid">
                                            <label class="c-form-label u-color-red u-font-tiny" for="&mvte:field:code;" title="&mvte:field:prompt;">&mvt:field:prompt;</label>
                                        <mvt:else>
                                            <label class="c-form-label u-font-tiny" 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>
                        <hr class="c-keyline">
                    </mvt:if>

                    <mvt:if expr="l.settings:payment:capabilities:split">
                        <div 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>

                            <div 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>
                            </div>
                            <div 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>
                            </div>
                        </div>

                        <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>
                            <div 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' ) ) )">
                                        <div 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>
                                        </div>
                                    </mvt:if>
                                </mvt:foreach>
                            </div>
                        </section>
                    </mvt:if>

                    <div class="c-form-list">
                        <div 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>
                        </div>
                    </div>
                </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>