Square Payment Integration - mivaecommerce/booc-readytheme GitHub Wiki
Since Booc ships with floating label functionality on the checkout pages, this needs to be accommodated for if you choose to add Square as a payment method.
In the administration portal, update the OPAY page with the following code:
<mvt:item name="html_profile" />
<head>
<mvt:if expr="NOT ISNULL l.settings:page:title">
<title>&mvt:page:title;</title>
<mvt:else>
<title>&mvt:store:name;: Checkout: Payment Information</title>
</mvt:if>
<mvt:item name="head" param="head_tag" />
<mvt:if expr="l.settings:payment:capabilities:split">
<script>
function AmountType_Changed(amounttype) {
var balance_amount, amount, additional;
balance_amount = document.getElementById( 'payment-balance-amount' );
amount = document.getElementById( 'payment-amount' );
additional = document.getElementById( 'payment-additional' );
if (amounttype === 'total') {
amount.disabled = true;
additional.style.display = 'none';
if (balance_amount) {
balance_amount.disabled = true;
}
}
else if (amounttype === 'balance') {
amount.disabled = true;
additional.style.display = '';
if (balance_amount) {
balance_amount.disabled = false;
}
}
else if (amounttype === 'partial') {
amount.disabled = false;
additional.style.display = '';
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: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:else>
</mvt:if>
</mvt:foreach>
]
</script>
</mvt:if>
</head>
<body class="&mvt:global:pageClass; checkout-page" id="js-&mvte:page:code;">
<mvt:item name="hdft" param="global_header" />
<div class="column whole hdft-header">
<mvt:item name="hdft" param="header" />
</div>
<div class="column whole large-seven-twelfths">
<section class="checkout-progress">
<div class="row h-nm">
<div class="column one-third h-align-center">
<small class="color--gray font--medium font--uppercase checkout-progress__step">Customer Info</small>
</div>
<div class="column one-third h-align-center">
<small class="color--gray font--medium font--uppercase checkout-progress__step">Shipping</small>
</div>
<div class="column one-third h-align-center">
<small class="font--medium font--uppercase checkout-progress__step checkout-progress__step--current border--primary">Payment</small>
</div>
</div>
</section>
<!-- end .checkout-progress -->
<section class="customer-information">
<div class="row h-nm">
<div class="column whole">
<h1 class="font--regular h2">Payment</h1>
</div>
</div>
<div class="h-breaker"></div>
<div class="row h-nm">
<div class="column whole">
<form class="floating-labels payment-details-form" data-hook="floating-labels payment-details-form" method="post" action="&mvt:payment:url;">
<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;" />
<mvt:if expr="l.settings:paymentsettings:mivapay:enabled AND ( l.settings:mivapay:paymentcardtype:id OR l.settings:mivapay:paymentcard:id )">
<div class="row bg--secondary border--gray h-nm payment-details-form__header--miva-pay">
<div class="column whole medium-two-thirds font--bold font--uppercase">Payment Method: &mvt:payment:desc;</div>
<div class="column whole medium-one-third h-np">
<small class="bg--white border--gray font--medium font--uppercase payment-details-form__header__badge" data-theme-icon="."> Secure Payment</small>
</div>
</div>
<div class="h-breaker"></div>
<mvt:item name="mivapay" />
<mvt:elseif expr="'brain' CIN g.PaymentMethod OR 'square' CIN g.PaymentMethod">
<div class="row bg--secondary border--gray h-nm payment-details-form__header--miva-pay">
<div class="column whole medium-two-thirds font--bold font--uppercase">Payment Method: &mvt:payment:desc;</div>
<div class="column whole medium-one-third h-np">
<small class="bg--white border--gray font--medium font--uppercase payment-details-form__header__badge" data-icon="'"> Secure Payment</small>
</div>
</div>
<div id="payment-fields" class="row border--gray h-nm payment-details-form__content &mvt:global:payment_module_class;">
<mvt:foreach array="payment:fields" iterator="field">
<mvt:item name="payment" param="field:code" />
</mvt:foreach>
<br>
</div>
<mvt:else>
<mvt:if expr="g.cc_payment EQ 1">
<div class="row bg--secondary border--gray h-nm payment-details-form__header">
<mvt:if expr="l.settings:payment:capabilities:split">
<div class="column whole medium-two-thirds font--bold font--uppercase">Payment Method: &mvt:payment:desc;</div>
<mvt:else>
<div class="column whole medium-two-thirds font--bold font--uppercase">Credit Card Information</div>
</mvt:if>
<div class="column whole medium-one-third h-np">
<small class="bg--white border--gray font--medium font--uppercase payment-details-form__header__badge" data-theme-icon="."> Secure Payment</small>
</div>
</div>
<mvt:foreach array="payment:fields" iterator="field">
<div data-hook="payment-field-row payment-field-row-&mvte:field:code;" data-code="&mvte:field:code;" data-invalid="&mvte:field:invalid;" data-prompt="&mvte:field:prompt;">
<mvt:item name="payment" param="field:code" />
</div>
<mvt:if expr="l.settings:field:code CIN 'cc_fname,cc_lname'">
<mvt:assign name="l.settings:payment:proxy:cc_name_split:active" value="1" />
<mvt:elseif expr="l.settings:field:code CIN 'cc_name'">
<mvt:assign name="l.settings:payment:proxy:cc_name_full:active" value="1" />
<mvt:elseif expr="l.settings:field:code EQ 'cc_number'">
<mvt:assign name="l.settings:payment:proxy:cc_number:active" value="1" />
<mvt:elseif expr="l.settings:field:code EQ 'cc_exp'">
<mvt:assign name="l.settings:payment:proxy:cc_exp:active" value="1" />
<mvt:elseif expr="l.settings:field:code EQ 'cc_cvv'">
<mvt:assign name="l.settings:payment:proxy:cc_cvv:active" value="1" />
<mvt:elseif expr="l.settings:field:code EQ 'cvv'">
<mvt:assign name="l.settings:payment:proxy:cvv:active" value="1" />
</mvt:if>
</mvt:foreach>
<div class="row border--gray h-nm payment-details-form__content proxy-payment h-all-hidden" data-hook="proxy-payment-fields">
<mvt:if expr="NOT ISNULL l.settings:payment:message">
<div class="column whole">
<p class="message message--info h-ntm">&mvt:payment:message;</p>
</div>
</mvt:if>
<mvt:if expr="l.settings:payment:proxy:cc_name_full:active">
<div class="column whole form-row proxy-payment__field-row" data-hook="cc_name">
<label for="l-cc_name">Name on Card</label>
<input class="input--medium border--gray" id="l-cc_name" data-code="cc_name" data-hook="proxy-input proxy-input-cc_name" type="text">
</div>
</mvt:if>
<mvt:if expr="l.settings:payment:proxy:cc_name_split:active">
<div class="column whole medium-half form-row proxy-payment__field-row" data-hook="cc_fname">
<label for="l-cc_fname">First Name</label>
<input class="input--medium border--gray h-corner" id="l-cc_fname" data-code="cc_fname" data-hook="proxy-input proxy-input-cc_fname" type="text">
</div>
<div class="column whole medium-half form-row proxy-payment__field-row" data-hook="cc_lname">
<label for="l-cc_lname">Last Name</label>
<input class="input--medium border--gray" id="l-cc_lname" data-code="cc_lname" data-hook="proxy-input proxy-input-cc_lname" type="text">
</div>
</mvt:if>
<mvt:if expr="l.settings:payment:proxy:cc_number:active">
<div class="column whole medium-two-thirds form-row h-nm proxy-payment__field-row">
<label for="l-cc_number">Credit Card Number</label>
<input class="input--medium border--gray" id="l-cc_number" data-code="cc_number" data-hook="proxy-input proxy-input-cc_number" type="text">
</div>
<div class="column whole medium-two-thirds color--red form-row payment-details-form__content__card-type" data-hook="payment-details-form__content__card-type">
<mvt:foreach array="paymentmethods" iterator="method">
<mvt:if expr="'am' CIN l.settings:method:code OR 'ax' CIN l.settings:method:code OR '003' CIN l.settings:method:code">
<img data-hook="card-type-american-express" src="&mvte:global:theme_path;/images/icons/logo_amex.png">
<mvt:elseif expr="'vi' CIN l.settings:method:code OR '001' CIN l.settings:method:code">
<img data-hook="card-type-visa" src="&mvte:global:theme_path;/images/icons/logo_visa.png">
<mvt:elseif expr="'mc' CIN l.settings:method:code OR 'master' CIN l.settings:method:code OR '002' CIN l.settings:method:code">
<img data-hook="card-type-mastercard" src="&mvte:global:theme_path;/images/icons/logo_mastercard.png">
<mvt:elseif expr="'di' CIN l.settings:method:code OR '004' CIN l.settings:method:code">
<img data-hook="card-type-discover" src="&mvte:global:theme_path;/images/icons/logo_discover.png">
</mvt:if>
</mvt:foreach>
</div>
</mvt:if>
<br class="h-clear">
<mvt:if expr="l.settings:payment:proxy:cc_exp:active">
<div class="column whole medium-half x-large-one-third form-row proxy-payment__field-row">
<label for="l-cc_exp_month">Month</label>
<select class="input--medium border--gray" id="l-cc_exp_month" data-code="cc_exp_month" data-hook="proxy-input proxy-input-cc_exp_month">
<option value="">Select Month</option>
<mvt:while expr="g.cc_exp_month_counter LT 12">
<mvt:assign name="g.cc_exp_month_counter" value="g.cc_exp_month_counter + 1" />
<option value="&mvte:global:cc_exp_month_counter;">&mvte:global:cc_exp_month_counter;</option>
</mvt:while>
</select>
</div>
<div class="column whole medium-half x-large-one-third form-row proxy-payment__field-row">
<label for="l-cc_exp_year">Year</label>
<select class="input--medium border--gray" id="l-cc_exp_year" data-code="cc_exp_year" data-hook="proxy-input proxy-input-cc_exp_year">
<option value="" selected>Select Year</option>
<mvt:assign name="g.cc_exp_year" value="s.dyn_tm_year" />
<mvt:while expr="g.cc_exp_year_counter LT 25">
<option value="&mvte:global:cc_exp_year;">&mvte:global:cc_exp_year;</option>
<mvt:assign name="g.cc_exp_year_counter" value="g.cc_exp_year_counter + 1" />
<mvt:assign name="g.cc_exp_year" value="s.dyn_tm_year + g.cc_exp_year_counter" />
</mvt:while>
</select>
</div>
</mvt:if>
<mvt:if expr="l.settings:payment:proxy:cc_cvv:active">
<div class="column whole medium-one-sixth form-row proxy-payment__field-row">
<label for="l-cc_cvv">CVV</label>
<input class="input--medium border--gray" id="l-cc_cvv" data-code="cc_cvv" data-hook="proxy-input proxy-input-cc_cvv" type="text">
</div>
</mvt:if>
<mvt:if expr="l.settings:payment:proxy:cvv:active">
<div class="column whole medium-one-sixth form-row proxy-payment__field-row">
<label for="l-cvv">CVV</label>
<input class="input--medium border--gray" id="l-cvv" data-code="cvv" data-hook="proxy-input proxy-input-cc_cvv" type="text">
</div>
</mvt:if>
<mvt:if expr="l.settings:payment:capabilities:split">
<mvt:if expr="g.Amount_Invalid">
<mvt:assign name="l.settings:invalid:class" value="'color--red'" />
<mvt:else>
<mvt:assign name="l.settings:invalid:class" value="''" />
</mvt:if>
<div class="column whole" id="payment-amount-fields">
<p class="font--bold">Payment Amount</p>
<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>
<p>
<label class="floating-labels__check-radio &mvt:invalid:class;">
<mvt:if expr="g.AmountType EQ 'total'">
<input type="radio" name="AmountType" value="total" onClick="AmountType_Changed( this.value );" checked />
<mvt:else>
<input type="radio" name="AmountType" value="total" onClick="AmountType_Changed( this.value );" />
</mvt:if>
<mvt:if expr="NOT ISNULL l.settings:payment:split_data">
Remaining Order Total (&mvt:payment:formatted_remaining;)
<mvt:else>
Entire Order Total (&mvt:basket:formatted_total;)
</mvt:if>
</label>
</p>
<mvt:else>
<p>
<label class="floating-labels__check-radio &mvt:invalid:class;">
<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>
<mvt:if expr="g.AmountType EQ 'balance'">
<input type="radio" name="AmountType" value="balance" onClick="AmountType_Changed( this.value );" checked />
<input type="hidden" id="payment-balance-amount" name="Amount" value="&mvte:payment:balance;" />
<mvt:else>
<input type="radio" name="AmountType" value="balance" onClick="AmountType_Changed( this.value );" />
<input type="hidden" id="payment-balance-amount" name="Amount" value="&mvte:payment:balance;" disabled />
</mvt:if>
Available Balance (&mvt:payment:formatted_balance;)
</label>
</p>
</mvt:if>
<mvt:if expr="g.AmountType EQ 'partial'">
<div class="form-row">
<label class="floating-labels__check-radio &mvt:invalid:class;">
<input type="radio" name="AmountType" value="partial" onClick="AmountType_Changed( this.value );" checked />
Partial:
<input class="input--medium border--gray" id="payment-amount" type="text" name="Amount" value="&mvte:global:Amount;" />
</label>
</div>
<mvt:else>
<div class="form-row">
<label class="floating-labels__check-radio &mvt:invalid:class;">
<input type="radio" name="AmountType" value="partial" onClick="AmountType_Changed( this.value );" />
Partial:
<input class="input--medium border--gray" id="payment-amount" type="text" name="Amount" value="&mvte:global:Amount;" disabled />
</label>
</div>
</mvt:if>
</div>
<mvt:if expr="g.AmountType EQ 'total'">
<mvt:assign name="g.totalPayment" value="'display: none;'" />
</mvt:if>
<div class="column whole form-row" id="payment-additional" style="&mvt:global:totalPayment;">
<label class="&mvt:invalid:class;" for="l-AdditionalPaymentMethod">Pay Additional Balance With:</label>
<select class="input--medium border--gray" id="l-AdditionalPaymentMethod" name="AdditionalPaymentMethod">
<option value="" selected>Select Method</option>
<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')))">
<mvt:if expr="l.settings:method:paymentcard:id">
<option value="paymentcard:&mvte:method:paymentcard:id;">&mvt:method:name;</option>
<mvt:elseif expr="l.settings:method:paymentcardtype:id">
<option value="paymentcardtype:&mvte:method:paymentcardtype:id;">&mvt:method:name;</option>
<mvt:else>
<option value="&mvte:method:module;:&mvte:method:code;">&mvt:method:name;</option>
</mvt:if>
</mvt:if>
</mvt:foreach>
</select>
</div>
</mvt:if>
</div>
<mvt:else>
<div class="row bg--secondary border--gray h-nm payment-details-form__header">
<div class="column whole medium-two-thirds font--bold font--uppercase">Payment Method: &mvt:payment:desc;</div>
<div class="column whole medium-one-third h-np">
<small class="bg--white border--gray font--medium font--uppercase payment-details-form__header__badge" data-theme-icon="."> Secure Payment</small>
</div>
</div>
<div class="row border--gray h-nm payment-details-form__content proxy-payment h-all-hidden" data-hook="proxy-payment-fields">
<mvt:if expr="NOT ISNULL l.settings:payment:message">
<div class="column whole">
<p class="message message--info h-ntm">&mvt:payment:message;</p>
</div>
</mvt:if>
<mvt:foreach array="payment:fields" iterator="field">
<div class="column whole form-row" data-hook="mvt-input" data-classlist="input--medium border--gray" data-id="l-&mvt:field:code;">
<mvt:if expr="l.settings:field:invalid">
<label class="color--red" for="l-&mvt:field:code;">&mvt:field:prompt;</label>
<mvt:else>
<label for="l-&mvt:field:code;">&mvt:field:prompt;</label>
</mvt:if>
<mvt:item name="payment" param="field:code" />
</div>
</mvt:foreach>
<mvt:if expr="l.settings:payment:capabilities:split">
<mvt:if expr="g.Amount_Invalid">
<mvt:assign name="l.settings:invalid:class" value="'color--red'" />
<mvt:else>
<mvt:assign name="l.settings:invalid:class" value="''" />
</mvt:if>
<div class="column whole" id="payment-amount-fields">
<p class="font--bold">Payment Amount</p>
<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>
<p>
<label class="floating-labels__check-radio &mvt:invalid:class;">
<mvt:if expr="g.AmountType EQ 'total'">
<input type="radio" name="AmountType" value="total" onClick="AmountType_Changed( this.value );" checked />
<mvt:else>
<input type="radio" name="AmountType" value="total" onClick="AmountType_Changed( this.value );" />
</mvt:if>
<mvt:if expr="NOT ISNULL l.settings:payment:split_data">
Remaining Order Total (&mvt:payment:formatted_remaining;)
<mvt:else>
Entire Order Total (&mvt:basket:formatted_total;)
</mvt:if>
</label>
</p>
<mvt:else>
<p>
<label class="floating-labels__check-radio &mvt:invalid:class;">
<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>
<mvt:if expr="g.AmountType EQ 'balance'">
<input type="radio" name="AmountType" value="balance" onClick="AmountType_Changed( this.value );" checked />
<input type="hidden" id="payment-balance-amount" name="Amount" value="&mvte:payment:balance;" />
<mvt:else>
<input type="radio" name="AmountType" value="balance" onClick="AmountType_Changed( this.value );" />
<input type="hidden" id="payment-balance-amount" name="Amount" value="&mvte:payment:balance;" disabled />
</mvt:if>
Available Balance (&mvt:payment:formatted_balance;)
</label>
</p>
</mvt:if>
<mvt:if expr="g.AmountType EQ 'partial'">
<div class="form-row">
<label class="floating-labels__check-radio &mvt:invalid:class;">
<input type="radio" name="AmountType" value="partial" onClick="AmountType_Changed( this.value );" checked />
Partial:
<input class="input--medium border--gray" id="payment-amount" type="text" name="Amount" value="&mvte:global:Amount;" />
</label>
</div>
<mvt:else>
<div class="form-row">
<label class="floating-labels__check-radio &mvt:invalid:class;">
<input type="radio" name="AmountType" value="partial" onClick="AmountType_Changed( this.value );" />
Partial:
<input class="input--medium border--gray" id="payment-amount" type="text" name="Amount" value="&mvte:global:Amount;" disabled />
</label>
</div>
</mvt:if>
</div>
<mvt:if expr="g.AmountType EQ 'total'">
<mvt:assign name="g.totalPayment" value="'display: none;'" />
</mvt:if>
<div class="column whole form-row" id="payment-additional" style="&mvt:global:totalPayment;">
<label class="&mvt:invalid:class;" for="l-AdditionalPaymentMethod">Pay Additional Balance With:</label>
<select class="input--medium border--gray" id="l-AdditionalPaymentMethod" name="AdditionalPaymentMethod">
<option value="" selected>Select Method</option>
<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')))">
<mvt:if expr="l.settings:method:paymentcard:id">
<option value="paymentcard:&mvte:method:paymentcard:id;">&mvt:method:name;</option>
<mvt:elseif expr="l.settings:method:paymentcardtype:id">
<option value="paymentcardtype:&mvte:method:paymentcardtype:id;">&mvt:method:name;</option>
<mvt:else>
<option value="&mvte:method:module;:&mvte:method:code;">&mvt:method:name;</option>
</mvt:if>
</mvt:if>
</mvt:foreach>
</select>
</div>
</mvt:if>
</div>
</mvt:if>
</mvt:if>
<div class="h-breaker"></div>
<div class="row form-row">
<div class="column whole form-row h-align-center h-align-right---m">
<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 (event) {
if (MivaPay && (typeof MivaPay.Submit === 'function')) {
MivaPay.Submit(function () {
var form;
form = document.querySelector('[data-hook*="payment-details-form"]');
form.submit();
});
}
}
</script>
<span onclick="onclick_submit(); return false;">
<input class="button button--large bg--primary color--black font--bold font--uppercase h-nb" type="submit" value="Complete Order">
</span>
<mvt:elseif expr="'brain' CIN g.PaymentMethod OR 'square' CIN g.PaymentMethod">
<input class="button button--large bg--primary color--black font--bold font--uppercase h-nb" type="submit" value="Complete Order">
<mvt:else>
<mvt:if expr="g.cc_payment EQ 1">
<input class="button button--large bg--primary color--black font--bold font--uppercase h-nb" data-hook="submit-form" type="submit" value="Complete Order">
<mvt:else>
<input class="button button--large bg--primary color--black font--bold font--uppercase h-nb" data-hook="submit-form" type="submit" value="Complete Order">
</mvt:if>
</mvt:if>
</div>
</div>
</form>
<div class="h-breaker"></div>
</div>
</div>
</section>
<!-- end .customer-information -->
</div>
<div class="column whole large-five-twelfths">
<mvt:item name="basket" />
<mvt:item name="customer" />
</div>
<div class="column whole hdft-footer">
<mvt:item name="hdft" param="footer" />
</div>
<mvt:item name="hdft" param="global_footer" />
</body>
</html>In your theme.css file [mm5/themes/booc/css/theme/theme.css], add this code:
/**
Square Payment Module
*/
.square-payment-form label:not(.floating-labels__check-radio) {
display: block;
width: auto;
padding: 0;
position: static;
top: auto;
left: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.square-payment-form .sq-input {
display: block;
width: auto;
margin-bottom: 1em;
}