public function template() {
        global $usces_entries;

        $propsAndEvents = [];
        if ($this->controlledComponent === true) {
            $propsAndEvents[] = 'v-bind:shipping-charge="order.formatted_shipping_charge"';
            $propsAndEvents[] = 'v-bind:total-full-price="order.formatted_total_full_price"';
            $propsAndEvents[] = 'v-bind:formatted-discount="order.formatted_discount"';
            $propsAndEvents[] = 'v-bind:formatted-tax="order.formatted_tax"';
            $propsAndEvents[] = 'v-bind:discount="order.discount"';
            $propsAndEvents[] = 'v-bind:usedpoint="order.usedpoint"';
            $propsAndEvents[] = 'v-bind:loading="loading"';
        } else {
            $order = $usces_entries['order'];
            $order['shipping_charge'] = isset($order['shipping_charge']) ? (int)$order['shipping_charge'] : 0;
            $order['total_full_price'] = isset($order['total_full_price']) ? (int)$order['total_full_price'] : 0;
            $order['discount'] = isset($order['discount']) ? $order['discount'] : 0;
            $order['usedpoint'] = isset($order['usedpoint']) ? (int)$order['usedpoint'] : 0;

            $order['formatted_shipping_charge'] = usces_crform($order['shipping_charge'], true, false, 'return');
            $order['formatted_total_full_price'] = usces_crform($order['total_full_price'], true, false, 'return');
            $order['formatted_discount'] = usces_crform($order['discount'], true, false, 'return');
            $order['formatted_tax'] = usces_tax($usces_entries, 'return');

            $propsAndEvents[] = 'shipping-charge="' . $order['formatted_shipping_charge'] . '"';
            $propsAndEvents[] = 'total-full-price="' . $order['formatted_total_full_price'] . '"';
            $propsAndEvents[] = 'formatted-discount="' . $order['formatted_discount'] . '"';
            $propsAndEvents[] = 'formatted-tax="' . $order['formatted_tax'] . '"';
            $propsAndEvents[] = 'v-bind:discount="' . $order['discount'] . '"';
            $propsAndEvents[] = 'v-bind:usedpoint="' . $order['usedpoint'] . '"';
        }

        $allPropsAndEvents = join(' ', $propsAndEvents);
        ?>
        <order-summary-table-component
            <?php echo $allPropsAndEvents; ?>
            inline-template
        >
            <div>
                <?php ob_start(); ?>
                <div class="currency_code">
                    <?php
                    ob_start();
                    _e('Currency', 'usces'); ?> : <?php usces_crcode(); ?>
                    <?php
                    $currency = ob_get_clean();
                    /**
                     * Filters the currency display of the `order-summary-table-component` Vue component
                     * shown on the Quickpay page
                     *
                     * @param string $currency
                     */
                    echo apply_filters('wcexaap_checkout_review_filter_ordersummary_currency', $currency);
                    ?>
                </div>
                <div v-cloak class="ui basic blurring segment">
                    <div v-if="loading" class="ui inverted light active dimmer">
                        <div class="ui loader"></div>
                    </div>
                    <table cellspacing="0" id="cart_table">
                        <thead>
                            <tr>
                                <th scope="row" class="num"><?php _e('No.', 'usces'); ?></th>
                                <th class="thumbnail"></th>
                                <th class="productname"><?php _e('item name', 'usces'); ?></th>
                                <th class="price"><?php _e('Unit price', 'usces'); ?></th>
                                <th class="quantity"><?php _e('Quantity', 'usces'); ?></th>
                                <th class="subtotal"><?php _e('Amount', 'usces'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php usces_get_confirm_rows(); ?>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th class="num"></th>
                                <th class="thumbnail"></th>
                                <th colspan="3" class="aright"><?php _e('total items', 'usces'); ?></th>
                                <th class="aright amount"><?php usces_crform($usces_entries['order']['total_items_price'], true, false); ?></th>
                            </tr>
                            <tr v-if="discount">
                                <td class="num"></td>
                                <td class="thumbnail"></td>
                                <td colspan="3" class="aright">
                                    <?php
                                    /**
                                     * Mirrored Welcart filter
                                     *
                                     * @ignore
                                     */
                                    echo apply_filters('usces_confirm_discount_label', __('Campaign disnount', 'usces'));
                                    ?>
                                </td>
                                <td class="aright" style="color:#FF0000">
                                    {{ formattedDiscount }}
                                </td>
                            </tr>
                            <?php if (usces_is_tax_display() && 'products' == usces_get_tax_target()) : ?>
                                <tr>
                                    <td class="num"></td>
                                    <td class="thumbnail"></td>
                                    <td colspan="3" class="aright"><?php usces_tax_label(); ?></td>
                                    <td class="aright">{{ formattedTax }}</td>
                                </tr>
                            <?php endif; ?>
                            <tr v-if="usedpoint">
                                <td class="num"></td>
                                <td class="thumbnail"></td>
                                <td colspan="3" class="aright"><?php _e('Used points', 'usces'); ?></td>
                                <td class="aright" style="color:#FF0000">
                                    {{ usedpoint }}
                                </td>
                            </tr>
                            <?php if (usces_have_shipped()) : ?>
                                <tr>
                                    <td class="num"></td>
                                    <td class="thumbnail"></td>
                                    <td colspan="3" class="aright"><?php _e('Shipping', 'usces'); ?></td>
                                    <td class="aright fade" id="postage">
                                        {{ shippingCharge }}
                                    </td>
                                </tr>
                            <?php endif; ?>
                            <?php if (!empty($usces_entries['order']['cod_fee'])) : ?>
                                <tr>
                                    <td class="num"></td>
                                    <td class="thumbnail"></td>
                                    <td colspan="3" class="aright">
                                        <?php
                                        /**
                                         * Mirrored Welcart filter
                                         *
                                         * @ignore
                                         */
                                        echo apply_filters('usces_filter_cod_label', __('COD fee', 'usces'));
                                        ?>
                                    </td>
                                    <td class="aright"><?php usces_crform($usces_entries['order']['cod_fee'], true, false); ?></td>
                                </tr>
                            <?php endif; ?>
                            <?php if (usces_is_tax_display() && 'all' == usces_get_tax_target()) : ?>
                                <tr>
                                    <td class="num"></td>
                                    <td class="thumbnail"></td>
                                    <td colspan="3" class="aright"><?php usces_tax_label(); ?></td>
                                    <td class="aright">{{ formattedTax }}</td>
                                </tr>
                            <?php endif; ?>
                                <tr>
                                    <th class="num"></th>
                                    <th class="thumbnail"></th>
                                    <th colspan="3" class="aright"><?php _e('Total Amount', 'usces'); ?></th>
                                    <th class="aright amount fade">
                                        {{ totalFullPrice }}
                                    </th>
                                </tr>
                        </tfoot>
                    </table>
                </div>
                <?php
                $vuehtml = ob_get_clean();
                /**
                 * Filters the `order-summary-table-component` Vue component HTML shown on the Quickpay page
                 *
                 * @param string $vuehtml
                 */
                echo apply_filters('wcexaap_checkout_review_filter_ordersummary_table', $vuehtml);
                ?>
            </div>
        </order-summary-table-component>
        <?php
    }