public function template() {
        if (empty($this->customFields)) {
            return;
        }

        $js_custom_fields = '{}';
        if (is_array($this->customFields) && count($this->customFields) > 0) {
            $js_custom_fields = WelcartUtils::localizeAssociativeArray($this->customFields);
        }

        $propsAndEvents = [];
        if ($this->controlledComponent === true) {
            $propsAndEvents[] = '@update-payload="updatePayload"';
            $propsAndEvents[] = '@update-error-messages="updateErrorMessages"';
        }

        $allPropsAndEvents = join(' ', $propsAndEvents);
        ?>
        <custom-fields-component
            ident='<?php echo $this->ident ?>'
            v-bind:uscescustomfields='<?php echo $js_custom_fields ?>'
            v-bind:displayerrors="<?php echo $this->display_errors ? 'true' : 'false' ?>"
            <?php echo $allPropsAndEvents ?>
            inline-template
        >
            <div>
                <?php ob_start() ?>
                    <div v-cloak v-for="error in errorMessages" v-if="displayerrors && error" class="error_message">
                        {{ error }}
                    </div>
                    <?php $this->customFieldsMeta(); ?>
                <?php
                $html = ob_get_clean();
                /**
                 * Filters the `custom-fields-component` Vue HTML shown on the Quickpay page
                 *
                 * @param string $html
                 */
                $html = apply_filters('wcexaap_filter_custom_' . $this->ident . '_component_container', $html);
                echo $html;
                ?>
            </div>
        </custom-fields-component>
        <?php
    }