public function template() {
        global $usces_entries;

        $note = null;
        if (empty($usces_entries['order']['note'])) {
            /**
             * Mirrored Welcart filter
             *
             * @ignore
             */
            $note = apply_filters('usces_filter_default_order_note', null);
        } else {
            $note = esc_html($usces_entries['order']['note']);
        }

        $propsAndEvents = [];
        if ($this->controlledComponent === true) {
            $propsAndEvents[] = 'v-bind:purchase-payload="purchasePayload"';
            $propsAndEvents[] = '@update-payload="updatePayload"';
        }

        $allPropsAndEvents = join(' ', $propsAndEvents);
        ?>
        <notes-form-component
            inline-template
            note-session-val='<?php echo $note; ?>'
            <?php echo $allPropsAndEvents; ?>
        >
            <?php ob_start(); ?>
            <table class="customer_form" id="notes_table">
                <tr>
                    <th scope="row"><?php _e('Notes', 'usces'); ?></th>
                    <td colspan="2">
                        <textarea
                            v-model="note"
                            name="offer[note]"
                            id="note"
                            class="notes">
                        </textarea>
                    </td>
                </tr>
            </table>
            <?php
            $vuehtml = ob_get_clean();
            /**
             * Filters the `notes-form-component` Vue component HTML shown on the Quickpay page
             *
             * @param string $vuehtml
             */
            echo apply_filters('wcexaap_checkout_review_filter_notes_form', $vuehtml);
            ?>
        </notes-form-component>
        <?php
    }