I’ve installed the SquareUp payment method, but there’s an issue with the theme I’m using where the form code is injected before the window.checkoutConfig code (which is required for the checkout) and as such the form doesn’t display on the frontend due to the JS errors.
How do I move the checkoutConfig code above the payment options so this doesn’t become an issue? I’m using the onepage checkout form:
/app/design/frontend/my/theme/Magento_Checkout
<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>
<div class="loader">
<img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
alt="<?php /* @escapeNotVerified */ echo __('Loading...'); ?>"
style="position: absolute;">
</div>
</div>
<?= /* @noEscape */ $secureRenderer->renderStyleAsTag("position: absolute;", "#checkout-loader img") ?>
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"#checkout": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
}
}
</script>
<?php $serializedCheckoutConfig = /* @noEscape */ $block->getSerializedCheckoutConfig();
$scriptString = <<<script
window.checkoutConfig = {$serializedCheckoutConfig};
// Create aliases for customer.js model from customer module
window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
window.customerData = window.checkoutConfig.customerData;
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
<script>
require([
'mage/url',
'Magento_Ui/js/block-loader'
], function(url, blockLoader) {
blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>");
return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');
})
</script>
</div>```
```/vendor/square/view/layout/checkout_index_index.xml```
```<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Squareup_Omni/css/view/payment/sqpaymentform.css"/>
</head>
<body>
<referenceContainer name="content">
<referenceBlock name="squareup_omni_payment_form_javascript" remove="true" />
<block class="SquareupOmniBlockPaymentFormJavascript" name="squareup_omni_payment_form_javascript_checkout" template="Squareup_Omni::payment/form/javascript-checkout.phtml" ifconfig="payment/squareup_payment/active" />
<block class="SquareupOmniBlockCustomerCards" name="squareup.customer.cards"/>
</referenceContainer>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="checkout-express-step-container" xsi:type="array">
<item name="component" xsi:type="string">Squareup_Omni/js/view/checkout-express-step</item>
<item name="sortOrder" xsi:type="string">1</item>
<item name="children" xsi:type="array">
<item name="checkout-express-step" xsi:type="array">
<item name="component" xsi:type="string">Squareup_Omni/js/view/payment/checkout/checkout-express</item>
<item name="sortOrder" xsi:type="string">2</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Squareup_Omni/payment/checkout/checkoutexpress</item>
<item name="componentContainer" xsi:type="string">checkout</item>
</item>
</item>
</item>
</item>
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="renders" xsi:type="array">
<item name="children" xsi:type="array">
<item name="squareup" xsi:type="array">
<item name="component" xsi:type="string">Squareup_Omni/js/view/payment/square</item>
<item name="methods" xsi:type="array">
<item name="squareup_payment" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
<item name="squarepurchaseorder" xsi:type="array">
<item name="component" xsi:type="string">Squareup_Omni/js/view/payment/squarepurchaseorder</item>
<item name="methods" xsi:type="array">
<item name="squarepurchaseorder" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="children" xsi:type="array">
<item name="loyalty-rewards-highlight" xsi:type="array">
<item name="component" xsi:type="string">Squareup_Omni/js/model/highlight</item>
<item name="frontend_class" xsi:type="string">checkout</item>
<item name="sortOrder" xsi:type="string">0</item>
</item>
</item>
</item>
<item name="giftcard-sidebar" xsi:type="array">
<item name="component" xsi:type="string">Squareup_Omni/js/model/giftcard</item>
<item name="displayArea" xsi:type="string">summary</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Squareup_Omni/giftcard
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>```
