public function template() {
        $propsAndEvents = [];
        if ($this->controlledComponent === true) {
            $propsAndEvents[] = 'v-bind:gift-shipping="giftShipping"';
            $propsAndEvents[] = 'v-bind:loading-prop="loading"';
            $propsAndEvents[] = 'v-bind:hard-errors="hardDeclineErrors"';
            $propsAndEvents[] = 'v-bind:purchase-payload="purchasePayload"';
        } else {
            $order = isset($_SESSION['usces_entry']['order']) ? $_SESSION['usces_entry']['order'] : [];
            $order = WelcartUtils::localizeAssociativeArray($order);
            $propsAndEvents[] = 'v-bind:purchase-payload=\'' . $order . '\'';
        }
        $allPropsAndEvents = join(' ', $propsAndEvents);

        $theme = AmazonPay::getThemeConfig();
        /**
         * Filters the button CSS class for the `purchase-button` Vue component shown on the Quickpay page
         * and Welcart 通常フロー 内容確認 page
         *
         * @important
         * @param string $btnclass
         */
        $btnclass = apply_filters('wcexaap_filter_purchase_button_class', 'ui ' . $theme['btnprimary'] . ' button');
        $btntype = $theme['color'] === 'red' ? 'basic' : '';
        ?>
        <purchase-button
            <?php echo $allPropsAndEvents; ?>
            checkout-division="<?php echo $this->checkoutDivision; ?>"
            product-type="<?php echo $this->productType; ?>"
            charge-type="<?php echo $this->chargeType; ?>"
            inline-template
        >
            <div>
                <?php ob_start(); ?>
                    <div class="back-or-confirm-container">
                        <div v-if="error" class="error_message" v-html="error"></div>
                        <div class="buttons">
                            <?php ob_start(); ?>
                            <a
                                class="login-backbtn ui <?php echo $btntype; ?> button"
                                href="<?php echo esc_url(USCES_CART_URL); ?>"
                            >
                                <?php
                                /**
                                 * Filters the back button text for the `purchase-button` Vue component shown on
                                 * the Quickpay page and Welcart 通常フロー 内容確認 page
                                 *
                                 * @important
                                 * @param string $text
                                 */
                                echo apply_filters(
                                    'wcexaap_filter_purchase_button_component_back_button_text',
                                    esc_html__('Back', 'usces')
                                );
                                ?>
                            </a>
                            <?php echo $this->filterBackButton(ob_get_clean(), $btntype); ?>
                            <button
                                id="purchase_button"
                                class="<?php echo esc_attr($btnclass) ?>"
                                v-bind:class="{ disabled: !canConfirm }"
                                @blur="clearErrors"
                                @click="purchase"
                            >
                                <?php
                                /**
                                 * Filters the purchase button text for the `purchase-button` Vue component shown on
                                 * the Quickpay page and Welcart 通常フロー 内容確認 page
                                 *
                                 * @important
                                 * @param string $text
                                 */
                                echo apply_filters(
                                    'wcexaap_filter_purchase_button_component_purchase_button_text',
                                    esc_html__('Confirm Purchase', 'wcexaap')
                                );
                                ?>
                            </button>
                        </div>
                    </div>
                    <div :class="{ active: processing }" class="ui medium page dimmer">
                        <div class="ui medium text loader"></div>
                    </div>
                <?php
                $vuehtml = ob_get_clean();
                /**
                 * Filters all HTML of the `purchase-button` Vue component shown on the Quickpay page
                 * and Welcart 通常フロー 内容確認 page
                 *
                 * @param string $vuehtml
                 * @param string $btnclass See {@see 'wcexaap_filter_purchase_button_class'}
                 * @param string $btntype
                 */
                echo apply_filters('wcexaap_filter_purchase_button_component', $vuehtml, $btnclass, $btntype);
                ?>
            </div>
        </purchase-button>
        <?php
    }