{if empty($_hide_payments) && (!empty($payment_methods) || !empty($payment))}
    <section class="c-payment-section" data-payment-image-url="{$payment_image_url|default:''|escape}" data-is-mobile="{if $wa->isMobile()}1{else}0{/if}" data-sbp-label="{'Оплатить СБП'|escape}">
        {if !empty($payment_methods)}

            {if empty($style_version)}
                <input class="c-button button js-show-payments" type="button" value="[`Pay`]">
                <span class="spinner js-show-payments-spinner custom-ml-4" style="display: none; top: 2px;"></span>
            {else}
                <a href="javascript:void(0);" class="c-button js-show-payments"{if !empty($company.invoice_options.button_color)} style="background-color: {$company.invoice_options.button_color};"{/if}>
                    <i class="fas fa-spinner wa-animation-spin speed-1000 custom-mr-4 js-show-payments-spinner" style="display: none;"></i>
                    [`Pay`]
                </a>
            {/if}

            <div class="dialog c-payments-wrapper js-payments-wrapper">
                <div class="dialog-background"></div>
                <div class="dialog-body">
                    <a href="#" class="dialog-close js-close-dialog text-white">&#x2715;</a>
                    <div class="dialog-header">
                        <p class="dialog-title text-white">{$company.name|escape}</p>
                    </div>
                    <div class="dialog-content">
                        <form method="post" class="js-main-payment-form">

                            <ul class="c-payment-options">
                                <li class="c-payment-item c-payment-item-invoice">
                                    <p class="number">[`Invoice`] [`#`] {$invoice.number|escape}</p>
                                    <p class="amount">{$invoice.amount|wa_format_amount_currency:$invoice.currency_id}</p>
                                </li>
                                <li class="c-payment-item js-payment-image-item" style="display:none;"></li>
                                {$has_pay_plugin = false}
                                {$has_pay_plugin_divider = false}
                                {foreach $payment_methods as $m}
                                    {if $m.plugin == 'pay'}
                                        {$has_pay_plugin = true}
                                    {/if}
                                    {if $has_pay_plugin && !$has_pay_plugin_divider && $m.plugin != 'pay'}
                                        {$has_pay_plugin_divider = true}
                                        <li class="c-payment-item divider">
                                            [`More payment options`]
                                        </li>
                                    {/if}
                                    {$empty_provider = $m.plugin === 'pay' && !empty($m.is_empty_provider)}
                                    <li class="c-payment-item{if $m.id == $payment_id} is-active{/if}{if !empty($m.error)} has-error{/if}{if $has_pay_plugin && $m.plugin != 'pay'} lighter-bg{/if}"
                                        style="animation-delay: {$m@index * 2 * 0.1}s"
                                        data-id="{$m.id|escape}"
                                    >
                                        <label>
                                            <input class="c-payment-input" type="radio" name="payment_id" value="{$m.id}" {if !empty($m.error) || $empty_provider}disabled="disabled"{/if}>
                                            {if $m.plugin != 'pay'}
                                                <div class="c-payment-header">
                                                    {if !empty($m.logo)}
                                                        <div class="c-payment-image-wrapper">
                                                            <img class="c-payment-image" src="{$m.logo}">
                                                        </div>
                                                    {/if}
                                                </div>
                                            {/if}
                                            <div class="c-payment-body{if $m.plugin == 'pay'} is-pay-plugin{/if}">
                                                {if !empty($m.name)}
                                                    <p class="c-payment-name">
                                                    {$m.name|escape}
                                                    {if $m.plugin == 'pay' && !$empty_provider}
                                                        &nbsp;
                                                        <img class="c-payment-icon" src="{$wa_url}wa-content/img/payment/mir.svg" alt="МИР" />
                                                        <img class="c-payment-icon" src="{$wa_url}wa-content/img/payment/mastercard.svg" alt="MasterCard" />
                                                        <img class="c-payment-icon" src="{$wa_url}wa-content/img/payment/visa.svg" alt="VISA" />
                                                    {/if}
                                                    </p>
                                                {/if}

                                                {if !empty($m.description)}
                                                    <p class="c-payment-description">{$m.description}</p>
                                                {/if}
                                                {if $empty_provider}
                                                    <span class="c-payment-button js-close-dialog">[s`OK, thanks`]</span>
                                                {/if}
                                                {if !empty($m.error)}
                                                    <p class="error"><em>{$m.error}</em></p>
                                                {/if}
                                                {if !empty($m.custom_html)}
                                                    <div class="c-payment-content wa-form"{if $m.id != $payment_id} style="display: none;"{/if}>
                                                        {$m.custom_html}
                                                        <input class="button black full-width largest js-payment-item-button" type="submit" value="[`Pay`]">
                                                    </div>
                                                {/if}
                                            </div>
                                        </label>
                                    </li>
                                    {foreachelse}
                                    <li class="c-payment-item">
                                        <em class="error">[`Oops! We are sorry, but <strong>we can not offer any payment option for your order</strong>. Checkout can not be completed.`]</em>
                                    </li>
                                {/foreach}
                            </ul>

                            <input type="hidden" name="hash" value="{$hash|escape}">
                            {*<input class="{if empty($style_version)}button{else}c-button{/if}" type="submit" value="[`Pay`]">*}
                        </form>
                    </div>
                </div>
            </div>
            <script>
                ( function($) {
                    var $wrapper = $("#c-invoice-front-section");
                    const dialogContent = $wrapper.find(".js-payments-wrapper");
                    const $paymentItems = dialogContent.find(".c-payment-item");
                    const paymentImageUrl = $wrapper.find(".c-payment-section").data("payment-image-url");
                    const invoiceHash = dialogContent.find('input[name="hash"]').val();
                    const isMobileClient = !!$wrapper.find(".c-payment-section").data("is-mobile");
                    const sbpLabel = $wrapper.find(".c-payment-section").data("sbp-label");
                    let paymentImageLoaded = false;
                    let paymentImageFailed = false;
                    let paymentPollingStarted = false;
                    let paymentStatusCheckUrl = null;
                    let paymentImageRequest = null;
                    let preparingPaymentsDialog = false;

                    function escapeHtml(value) {
                        return $("<div>").text(value || "").html();
                    }

                    function renderPaymentImage($dialog, paymentImage) {
                        const $item = $dialog.find(".js-payment-image-item");
                        if (!$item.length || !paymentImage) {
                            return;
                        }

                        if (paymentImage.qr_payload && isMobileClient) {
                            $item
                                .removeClass("c-payment-item-qr")
                                .addClass("c-payment-item-sbp")
                                .html(
                                    '<a href="' + escapeHtml(paymentImage.qr_payload) + '" class="c-button-core">' +
                                        '<div class="c-payment-image-wrapper">' +
                                            '<img class="c-payment-image" src="' + escapeHtml(paymentImage.logo) + '">' +
                                        '</div>' +
                                        '<span class="c-payment-name">' + escapeHtml(sbpLabel) + '</span>' +
                                    '</a>'
                                )
                                .show();
                            return;
                        }

                        const imageSrc = paymentImage.image_data_url || paymentImage.image_url || "";
                        const description = paymentImage.description ? '<p class="c-payment-description">' + escapeHtml(paymentImage.description) + '</p>' : "";
                        $item
                            .removeClass("c-payment-item-sbp")
                            .addClass("c-payment-item-qr")
                            .html(
                                '<div class="c-payment-item-inner">' +
                                    '<div class="c-payment-header">' +
                                        '<div class="c-payment-image-wrapper">' +
                                            '<img class="c-payment-image" src="' + escapeHtml(imageSrc) + '" alt="">' +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="c-payment-body">' +
                                        description +
                                    '</div>' +
                                '</div>'
                            )
                            .show();
                    }

                    function startStatusPolling() {
                        if (paymentPollingStarted || !paymentStatusCheckUrl || !invoiceHash) {
                            return;
                        }
                        paymentPollingStarted = true;
                        const PERIOD = 9000;

                        (function schedule() {
                            setTimeout(function() {
                                $.post(paymentStatusCheckUrl, { hash: invoiceHash }, function(r) {
                                    if (r && r.is_paid) {
                                        window.location.reload();
                                    }
                                }).always(function() {
                                    schedule();
                                });
                            }, PERIOD);
                        }());
                    }

                    function ensurePaymentImage($dialog, dialog) {
                    {if $has_pay_plugin}
                        if (paymentImageLoaded) {
                            startStatusPolling();
                            return $.Deferred().resolve().promise();
                        }
                        if (!invoiceHash || !paymentImageUrl || paymentImageFailed) {
                            return $.Deferred().resolve().promise();
                        }

                        if (paymentImageRequest) {
                            return paymentImageRequest;
                        }

                        paymentImageRequest = $.post(paymentImageUrl, { hash: invoiceHash }, function(response) {
                            if (!response || response.error || !response.payment_image) {
                                paymentImageFailed = true;
                                return;
                            }
                            renderPaymentImage($dialog, response.payment_image);
                            paymentImageLoaded = true;
                            paymentStatusCheckUrl = response.status_check_url || null;
                            startStatusPolling();
                            if (dialog && typeof dialog.resize === "function") {
                                dialog.resize();
                            }
                        }).always(function() {
                            paymentImageRequest = null;
                        });

                        return paymentImageRequest;
                    {else}
                        return $.Deferred().resolve().promise();
                    {/if}
                    }

                    function setShowPaymentsLoading($button, isLoading) {
                        const $spinner = $wrapper.find(".js-show-payments-spinner");
                        $button.prop("disabled", isLoading);
                        $spinner.toggle(!!isLoading);
                    }

                    $wrapper.on("click", ".js-show-payments", function(e) {
                        e.preventDefault();

                        if (preparingPaymentsDialog) {
                            return;
                        }
                        preparingPaymentsDialog = true;

                        const $button = $(this);
                        setShowPaymentsLoading($button, true);

                        ensurePaymentImage(dialogContent).done(() => {
                            $.waDialog({
                                $wrapper: dialogContent,
                                onOpen: ($dialog, dialog) => {
                                    setShowPaymentsLoading($button, false);
                                    preparingPaymentsDialog = false;
                                    ensurePaymentImage($dialog, dialog);
                                    const $form = $dialog.find('form.js-main-payment-form');
                                    const $submitButton = $form.find("[type='submit']");
                                    const $paymentContent = $form.find(".c-payment-content");
                                    let paymentContent = null;
                                    let paymentSection = null;
                                    let selectedPayment = null;
                                    let activePaymentId = null;

                                    $form.on('submit', (e) => {
                                        e.preventDefault();

                                        $.post(location.href, $dialog.find('form').serialize(), (response) => {

                                            if (typeof response === 'string') {
                                                paymentSection = $(response).find(".c-payment-section");

                                                if (paymentSection.length) {
                                                    if (paymentContent.length) {
                                                        paymentContent.hide();
                                                    }

                                                    paymentSection.find('[type="submit"]').addClass("button black full-width text-ellipsis largest js-payment-item-button");
                                                    selectedPayment.append(paymentSection);

                                                    paymentContent = null;
                                                } else {
                                                    dialog.close();
                                                    return;
                                                }
                                            }

                                            dialog.resize();
                                        });
                                    });

                                    $form.find('.c-payment-item').on('click', function(e) {
                                        const $payment_radio = $(this).find('.c-payment-input');
                                        if (!$payment_radio || $payment_radio.length == 0) {
                                            return;
                                        }

                                        const $target = $(e.target);
                                        if ($target.hasClass("js-payment-item-button")) {
                                            const $local_form = $target.closest("form").not(".js-main-payment-form");
                                            if ($local_form.length > 0) {
                                                return;
                                            }
                                        }
                                        
                                        const selected_payment_id = $payment_radio.val();
                                        // Prevent double clicks
                                        if (activePaymentId == selected_payment_id) {
                                            return;
                                        }
                                        activePaymentId = selected_payment_id;

                                        // Allow repeated clicks after 5 sec
                                        setTimeout(() => {
                                            activePaymentId = null;
                                        }, 5000);

                                        e.preventDefault();

                                        $payment_radio.prop("checked", true);
                                        selectedPayment = $(this);
                                        paymentContent = selectedPayment.find(".c-payment-content");
                                        $paymentContent.hide();

                                        if(paymentSection) {
                                            paymentSection.remove();
                                            paymentSection = null;
                                        }

                                        if (paymentContent.length) {
                                            paymentContent.show();
                                        }else{
                                            $form.trigger("submit");
                                        }

                                        dialog.resize();
                                    });

                                    setTimeout(() => $paymentItems.each((i, item) => $(item).addClass("animated")), $paymentItems.length * 200);
                                },
                                onClose: () => {
                                    $paymentItems.each((i, item) => $(item).removeClass("animated"));
                                }
                            });
                        }).fail(() => {
                            setShowPaymentsLoading($button, false);
                            preparingPaymentsDialog = false;
                        });
                    });
                })(jQuery);

                /**
                 * @description dialog component
                 * @example /webasyst/ui/component/dialog/
                 * */
                {literal}
                ( function($) {

                    const class_names = {
                        "wrapper": "dialog",
                        "wrapper-opened": "dialog-opened",
                            "background": "dialog-background",
                            "body": "dialog-body",
                                "header": "dialog-header",
                                "content": "dialog-content",
                                "footer": "dialog-footer"
                    };

                    const locked_class = "is-locked";
                    const dialogs = [];

                    var Dialog = ( function($) {

                        Dialog = function(options) {
                            const that = this;

                            that.$body = $('body');
                            that.$window = $(window.top);
                            that.$document = $(top.document);

                            that.$wrapper = options["$wrapper"];

                            if (that.$wrapper && that.$wrapper.length) {
                                // GENERATE ID
                                that.component_id = Object.generateId(this);

                                // DOM
                                that.$background = that.$wrapper.find( getSelector("background") )
                                that.$block = that.$wrapper.find( getSelector("body") );
                                that.$content = that.$block.find( getSelector("content") );

                                // CONST
                                that.esc = (typeof options["esc"] === "boolean" ? options["esc"] : true);
                                that.animate = (typeof options["animate"] === "boolean" ? options["animate"] : true);

                                // VARS
                                that.options = (options["options"] || {});
                                that.position = (typeof options["position"] === "function" ? options["position"] : null);
                                that.lock_body_scroll = (typeof options["lock_body_scroll"] === "boolean" ? options["lock_body_scroll"] : true);
                                that.bodyDefaultPadding = document.body.style.getPropertyValue('padding-right');
                                that.bodyDefaultBoxSizing = document.body.style.getPropertyValue('box-sizing');
                                const append_to = that.$body.find(options["append_to"]);
                                that.append_to = append_to.length ? append_to : that.$body;

                                // DYNAMIC VARS
                                that.is_visible = false;
                                that.is_removed = false;
                                that.is_ontop = true;

                                // HELPERS
                                that.onOpen = (typeof options["onOpen"] === "function" ? options["onOpen"] : null);
                                that.onClose = (typeof options["onClose"] === "function" ? options["onClose"] : null);
                                that.onResize = (typeof options["onResize"] === "function" ? options["onResize"] : null);
                                that.onBgClick = (typeof options["onBgClick"] === "function" ? options["onBgClick"] : null);

                                // INIT
                                that.init();

                            } else {
                                log("Error: bad data for dialog");
                            }

                            dialogs.push(that);
                        };

                        Dialog.prototype.init = function() {
                            const that = this;

                            // save link on dialog
                            that.$wrapper.data("dialog", that);

                            that.bindEvents();
                        };

                        Dialog.prototype.bindEvents = function() {
                            const that = this;

                            that.$wrapper.on("click.Dialog", ".js-close-dialog, .js-dialog-close", $.proxy(this.close, that));

                            that.$wrapper.on("dialog-close", $.proxy(this.close, that));

                            // Click on background, default nothing
                            if (that.onBgClick) {
                                that.$wrapper.on("click.Dialog", getSelector("background"), $.proxy(that.backgroundClick, that));
                            }

                            if (that.esc) {
                                that.$document.on(`keyup.Dialog.${that.component_id}`, $.proxy(that.escapeWatcher, that))
                            }

                            that.$window.on(`resize.Dialog.${that.component_id}`, $.proxy(that.resizeDialog, that));
                            that.$document.on(`refresh.Dialog.${that.component_id}`, $.proxy(that.resizeDialog, that));

                            that.render();
                        };

                        Dialog.prototype.render = function() {
                            const that = this;

                            try {
                                that.show();
                            } catch(e) {
                                log("Error: " + e.message);
                            }

                            // trigger event on open
                            if (that.onOpen) {
                                that.onOpen(that.$wrapper, that);
                            }
                        };

                        Dialog.prototype.show = function() {
                            const that = this;

                            const is_exist = $.contains(top.document, that.$wrapper);

                            if (!is_exist) {
                                that.append_to.append(that.$wrapper);
                            }

                            that.$wrapper.addClass(class_names["wrapper-opened"]);
                            that.is_visible = true;

                            // set is_ontop flag only on last element
                            dialogs.map((item) => {
                                if (item.component_id !== that.component_id) {
                                    item.is_ontop = false;
                                }
                            })

                            that.setPosition();

                            if (that.animate) {
                                that.animateDialog(true);
                            }

                            if (that.lock_body_scroll) {
                                that.lockBodyScroll(true);
                            }
                        };

                        Dialog.prototype.setPosition = function() {
                            const that = this;

                            that.$content.css("height", "auto");

                            const window_w = that.$window.width();
                            const window_h = that.$window.height();
                            const wrapper_w = that.$block.outerWidth();
                            const wrapper_h = that.$block.outerHeight();

                            let pad = 20;

                            let css;

                            let getPosition = getDefaultPosition;

                            if (that.position) {
                                css = that.position(that);
                                pad = 0;
                            } else {
                                css = getPosition({
                                    width: wrapper_w,
                                    height: wrapper_h
                                });
                            }

                            if (css.left > 0 && css.left + wrapper_w > window_w) {
                                css.left = window_w - wrapper_w - pad;
                            }

                            if (css.top > 0) {
                                if (css.top + wrapper_h > window_h) {
                                    const customPad = pad ? pad : 20;
                                    css.top = pad ? pad : css.top;
                                    that.$background.css('height', that.$block.outerHeight() + customPad + css.top);
                                    that.$wrapper.css({
                                        'overflow-y': 'scroll',
                                        'padding-bottom': pad,
                                    });
                                    that.$block.css('position', 'relative');
                                    that.$block.css('margin-bottom', customPad);
                                } else {
                                    that.$background.height('');
                                    that.$wrapper.css({
                                        'overflow-y': 'scroll',
                                        'padding-bottom': 0,
                                    });
                                }
                            } else {
                                css.top = pad;

                                that.$content.hide();

                                const block_h = that.$block.outerHeight();
                                const content_h = window_h - block_h - pad * 2;

                                that.$content
                                .css("height", content_h > 0 ? `${content_h}px` : 'auto')
                                .addClass("is-long-content")
                                .show();

                            }

                            that.$block.css({'top': css.top, 'left': css.left});

                            function getDefaultPosition(area) {
                                return {
                                    top: Math.abs( (window_h - area.height)/2 ),
                                    left: Math.abs( (window_w - area.width)/2 )
                                };
                            }
                        };

                        Dialog.prototype.lockBodyScroll = function(state) {
                            const that = this;

                            if (state) {
                                const scroll_width = Math.abs(window.innerWidth - document.documentElement.clientWidth);
                                that.$body.addClass(locked_class);
                                document.body.style.paddingRight = scroll_width + 'px';
                                document.body.style.boxSizing = 'border-box';
                            } else {
                                that.$body.removeClass(locked_class);

                                if (that.bodyDefaultPadding) {
                                    document.body.style.paddingRight = that.bodyDefaultPadding;
                                } else {
                                    document.body.style.removeProperty('padding-right');
                                }

                                if (that.bodyDefaultBoxSizing) {
                                    document.body.style.boxSizing = that.bodyDefaultBoxSizing;
                                } else {
                                    document.body.style.removeProperty('box-sizing');
                                }
                            }
                        }

                        Dialog.prototype.resizeDialog = function() {
                            const that = this;

                            const is_exist = $.contains(top.document, that.$wrapper[0]);

                            if (is_exist) {
                                that.resize();
                            }
                        }

                        Dialog.prototype.resize = function() {
                            const that = this;

                            that.setPosition();

                            if (that.onResize) {
                                that.onResize(that.$wrapper, that);
                            }
                        };

                        Dialog.prototype.backgroundClick = function(event) {
                            const that = this;

                            that.onBgClick(event, that.$wrapper, that);
                        }

                        Dialog.prototype.escapeWatcher = function(event) {
                            const that = this;

                            // prevent all system keyboard events
                            event.preventDefault();

                            const is_exist = $.contains(top.document, that.$wrapper[0]);

                            if (!is_exist) {
                                return;
                            }

                            const ESCAPE_CODE = 27;

                            if (event.keyCode === ESCAPE_CODE && dialogs.length && that.is_ontop) {
                                const currentDialog = dialogs[dialogs.length - 1];
                                currentDialog.close();
                            }
                        }

                        Dialog.prototype.close = function(event) {
                            if (event) {
                                event.preventDefault();
                            }

                            const that = this;

                            let result = null;

                            if (!that.is_visible || result) {
                                return;
                            }

                            if(!dialogs.length) {
                                return;
                            }

                            if (that.onClose) {
                                result = that.onClose(that);

                                if (result === false) {
                                    return;
                                }
                            }

                            dialogs.pop()

                            // set is_ontop flag on a last dialog in array
                            dialogs.map((item, index) => {
                                if (dialogs.length === index + 1) {
                                    item.is_ontop = true;
                                }
                            })

                            if (that.animate) {
                                that.animateDialog(false).then( function() {
                                    that.$wrapper.remove()
                                });
                            } else {
                                that.$wrapper.remove();
                            }

                            const dialogLength = that.$body.find(`div.${class_names["wrapper-opened"]}:visible`).length;
                            if (that.lock_body_scroll && !(dialogLength > 1)) {
                                that.lockBodyScroll(false);
                            }

                            that.is_removed = true;
                            that.is_visible = false;

                            that.destroy();

                            return result;
                        };

                        Dialog.prototype.hide = function() {
                            const that = this;

                            if (that.animate) {
                                that.animateDialog(false).then( function() {
                                    that.$wrapper.detach();
                                });
                            } else {
                                that.$wrapper.detach();
                            }

                            that.is_visible = false;

                            if (that.lock_body_scroll) {
                                that.lockBodyScroll(false);
                            }
                        };

                        Dialog.prototype.unbindEvents = function() {
                            const that = this;

                            that.$wrapper.off(".Dialog");
                            that.$window.off(`resize.Dialog.${that.component_id}`);
                            that.$document.off(`keyup.Dialog.${that.component_id}`);
                            that.$document.off(`refresh.Dialog.${that.component_id}`);
                        }

                        Dialog.prototype.destroy = function() {
                            const that = this;

                            that.unbindEvents()
                            that.$wrapper.removeData("dialog");
                        }

                        if ( typeof Object.generateId == "undefined" ) {
                            let id = 0;

                            Object.generateId = function(o) {
                                if ( typeof o.__uniqueid == "undefined" ) {
                                    Object.defineProperty(o, "__uniqueid", {
                                        value: ++id,
                                        enumerable: false,
                                        writable: false
                                    });
                                }

                                return o.__uniqueid;
                            };
                        }

                        /**
                         * @param {Boolean} animate
                        * */
                        Dialog.prototype.animateDialog = function(animate) {
                            var that = this,
                                deferred = $.Deferred(),
                                time = 200;

                            var shifted_class = "is-shifted",
                                animate_class = "is-animated";

                            if (animate) {
                                that.$wrapper.addClass(shifted_class);
                                that.$wrapper[0].offsetHeight;
                                that.$wrapper
                                    .addClass(animate_class)
                                    .removeClass(shifted_class);

                                setTimeout( function() {
                                    deferred.resolve();
                                }, time);

                            } else {
                                that.$wrapper.addClass(shifted_class);
                                setTimeout( function() {
                                    deferred.resolve();
                                    that.$wrapper.removeClass(animate_class);
                                }, time);
                            }

                            return deferred.promise();
                        };

                        return Dialog;

                    })($);

                    $.waDialog = function(plugin_options) {
                        plugin_options = ( typeof plugin_options === "object" ? plugin_options : {});

                        var options = $.extend(true, {}, plugin_options),
                            result = false;

                        options["$wrapper"] = getWrapper(options);

                        if (options["$wrapper"]) {
                            result = new Dialog(options);
                        }

                        return result;
                    };

                    function getWrapper(options) {
                        let result;

                        if (options["html"]) {
                            result = $(options["html"]);

                        } else if (options["$wrapper"]) {
                            result = options["$wrapper"];

                        } else {
                            result = generateDialog(options["header"], options["content"], options["footer"]);
                        }

                        return result;

                        function generateDialog($header, $content, $footer) {
                            let result = false;

                            const $wrapper = $("<div />").addClass( class_names["wrapper"] );
                            const $bg = $("<div />").addClass( class_names["background"] );
                            const $body = $("<div />").addClass( class_names["body"] );
                            const $header_w = ( $header ? $("<div />").addClass( class_names["header"] ).append($header) : false );
                            const $content_w = ( $content ? $("<div />").addClass( class_names["content"] ).append($content) : false );
                            const $footer_w = ( $footer ? $("<div />").addClass( class_names["footer"] ).append($footer) : false );

                            if ($header_w || $content_w || $footer_w) {
                                if ($header_w) {
                                    $body.append($header_w)
                                }
                                if ($content_w) {
                                    $body.append($content_w)
                                }
                                if ($footer_w) {
                                    $body.append($footer_w)
                                }
                                result = $wrapper.append($bg).append($body);
                            }

                            return result;
                        }
                    }

                    function getSelector(name) {
                        return (class_names[name] ? "." + class_names[name] : null);
                    }

                    function log(data) {
                        if (console && console.log) {
                            console.trace(data);
                        }
                    }

                })(jQuery);
                {/literal}
            </script>
            <style>
                html {
                    --background-color-blank:#fff;
                    --dialog-background-color:rgba(0, 0, 0, 0.5);
                    --dialog-shadow-color:#bbb;
                    --background-color:rgba(0, 20, 80, 0.05);
                }

                .dialog { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; z-index: 1050; background-color: transparent; }
                .dialog.dialog-opened { display: block; }
                .dialog .dialog-background { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; box-sizing: border-box; background-color: var(--dialog-background-color); backdrop-filter: blur(20px); }
                .dialog .dialog-body { position: absolute; top: 10vh !important; left: 0; z-index: 10; box-sizing: border-box; background: none; width: 400px; max-width: 80%;  box-shadow: none; }
                .dialog .dialog-body.min-width { width: min-content; }
                .dialog .dialog-body form { overflow: visible; }
                .dialog .dialog-body .dialog-header { padding: 1.5rem; margin: 0; }
                .dialog .dialog-body .dialog-header > *:first-child { margin-top: 0; }
                .dialog .dialog-body .dialog-header > *:last-child { margin-bottom: 0; }
                .dialog .dialog-body .dialog-header + .dialog-content { padding-top: 0; }
                .dialog .dialog-body .dialog-content { padding: 1.5rem; min-height: 4rem; overflow-y: auto; box-sizing: border-box;}
                .dialog .dialog-body .dialog-content:empty { display: none; }
                .dialog .dialog-body .dialog-content.overflow-hidden { overflow: hidden; }
                .dialog .dialog-body .dialog-footer { margin: 1rem 0 0; padding: 0 1.5rem 1.5rem 1.5rem; }
                .dialog .dialog-close { position: absolute; top: 0.25rem; right: 1rem; color: inherit; font-size: 1.5rem; opacity: 0.5; padding: 1rem; }
                .dialog .dialog-close:hover { opacity: 1; }

                /* animation */
                .dialog .dialog-body { transform: translate(0, 0); }
                .dialog.is-shifted { opacity: 0; }
                .dialog.is-shifted .dialog-body { transform: translate(0, 2rem); }
                .dialog.is-animated { transition: opacity 200ms ease-in-out;}
                .dialog.is-animated .dialog-body { transition: transform 200ms ease-in-out, left 200ms linear, top 200ms linear;}

                .dialog .c-payment-options::-webkit-scrollbar { display: none; }
                .dialog .c-payment-options { margin: 0; padding: 0; list-style: none; overflow: hidden; max-height: 80vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
                .dialog .c-payment-options .c-payment-item:not(.c-payment-item-invoice):not(.divider) {
                    background: #f8f9fa;
                    border: 1px solid #e9ecef;
                    margin-bottom: 15px;
                    overflow: hidden;
                    opacity: 0;
                    transform: translateY(20px);
                    animation: fadeInUp 0.6s ease-out forwards;

                    &:hover {
                        transform: translateY(-2px) !important;
                    }

                    &.animated {
                        opacity: 1;
                        transform: translateY(0);
                        animation: none;
                    }
                }
                .dialog .c-payment-options .c-payment-item.lighter-bg { background-color: #f3f3f3 !important; }
                .dialog .c-payment-options li:not(.divider) { padding: 1rem; border-radius: 1rem; margin-bottom: .75rem; background-color: var(--background-color-blank); transition: transform 200ms ease-in-out; }
                .dialog .c-payment-options li.divider { font-size: 1.2rem; color: #fff; font-weight: bold; text-align: center; padding: .25rem; margin-bottom: 1rem; }
                .dialog .c-payment-options li:last-child { margin-bottom: 0; }
                .dialog .c-payment-options .c-payment-item-invoice {
                    .number {
                        font-size: 16px;
                        color: #777;
                        text-align: center;
                        margin: 0 0 .5rem 0;
                    }
                    .amount {
                        font-size: 36px;
                        font-weight: 600;
                        text-align: center;
                        margin: 0;
                        color: #000;
                    }
                 }
                .dialog .c-payment-options li label { display: flex; gap: 1rem; cursor: pointer; }
                .dialog .c-payment-options li label .c-payment-input { display: none; }
                .dialog .c-payment-options li label .c-payment-header { flex: 1 0 20%; }
                .dialog .c-payment-options li .c-payment-header .c-payment-image-wrapper { border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.15); padding: 5px; box-sizing: border-box; height: 32px; overflow: clip; }
                .dialog .c-payment-options li label .c-payment-header img { max-width: 100%; object-fit: scale-down; vertical-align: middle; }
                .dialog .c-payment-options li label .c-payment-body { flex: 1 1 80%; text-align: left; }
                .dialog .c-payment-options li label .c-payment-body p:last-of-type { margin-bottom: 0; }
                .dialog .c-payment-options li label .c-payment-body .c-payment-name { margin-bottom: .25rem; font-weight: 500; font-size: 18px; color: #000; }
                .dialog .c-payment-options li .c-payment-body .c-payment-description { margin-top: 0; font-size: 13px; color: #888; }
                .dialog .c-payment-options li .error { color: red; font-style: italic; font-size: 80%; }
                .dialog .c-payment-options li label .c-payment-body .c-payment-content { margin-top: 1rem; font-size: 14px; }
                .dialog .c-payment-options li label .c-payment-body .c-payment-content .wa-field .wa-name { margin-bottom: .5rem; }
                .dialog .c-payment-options li label .c-payment-body .c-payment-content .wa-field { margin-bottom: 1rem; }
                .dialog .c-payment-options li label .c-payment-body .c-payment-content .wa-field input { border: 1px solid #e6e6e6; border-radius: 4px; padding: .5rem; width: 100%; }
                .dialog .c-payment-options li label .c-payment-body.is-pay-plugin { text-align: center; }
                .dialog .c-payment-options li label .c-payment-body.is-pay-plugin .c-payment-icon { display: inline-block; height: 10px; width: auto; margin-left: 0.125rem; }
                .dialog .c-payment-section {
                    margin-top: 1rem;
                    font-size: 14px;
                }
                .dialog .c-payment-section:not(:has([type="submit"])) {
                    color: red;
                    font-size: 14px;
                }
                .dialog .c-payment-options li.c-payment-item .c-payment-body .c-payment-button {
                    background-color: #dedede;
                    padding: 9px 0px;
                    border-radius: 10px;
                    margin-top: 15px;
                    width: 100%;
                    display: block;
                    color: #333;
                }
               .dialog .c-payment-options li.c-payment-item:hover .c-payment-body .c-payment-button {
                    background-color: #d3d3d3;
                    transition: 0.2s;
                }

                .dialog .c-payment-options .c-payment-item.c-payment-item-qr .c-payment-item-inner {
                    display: flex;
                    gap: 1rem;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                }
                .dialog .c-payment-options .c-payment-item.c-payment-item-qr .c-payment-item-inner .c-payment-image-wrapper {
                    height: auto;
                }
                .dialog .c-payment-options .c-payment-item.c-payment-item-qr .c-payment-item-inner .c-payment-image-wrapper img {
                    max-width: 100%;
                    max-height: 210px;
                    object-fit: scale-down;
                    display: block;
                    margin: 0 auto;
                }
                .dialog .c-payment-options .c-payment-item.c-payment-item-qr .c-payment-item-inner .c-payment-body {
                    flex: 1 0 100%;
                    text-align: center;
                    line-height: 1.4;
                }

                .dialog .c-payment-options .c-payment-item.c-payment-item-sbp .c-button-core {
                    background-color: #1A1442;
                    width: 100%;
                    height: auto;
                    max-width: 100%;
                    padding: 1.25rem 1.25rem 1rem;
                    border-radius: 1rem;
                    text-align: center;
                    display: block;
                    line-height: 1.4;
                }
                .dialog .c-payment-options .c-payment-item:not(.c-payment-item-invoice):not(.divider).c-payment-item-sbp {
                    padding: 0;
                    background: none;
                    border: none;
                    display: flex;
                }
                .dialog .c-payment-options .c-payment-item.c-payment-item-sbp img {
                    width: 2.25rem;
                    height: 2.25rem;
                    margin: 0 auto 1rem;
                    display: block;
                }
                .dialog .c-payment-options .c-payment-item.c-payment-item-sbp .c-payment-name {
                    font-size: 1.06125rem;
                    color: #fff;
                    font-weight: bold;
                }

                @media screen and (max-width: 760px) { /* mobile */

                    .dialog { padding: 0 !important; overflow: hidden !important; }
                    .dialog .dialog-body { position: absolute !important; top: 0!important; left: 0!important; bottom: 0!important; right: 0!important; max-width: 100%; width: 100%; display: flex; flex-direction: column; border-radius: 0; margin: 0 !important; }
                    .dialog .dialog-body .dialog-footer { margin-top: auto; padding-top: 1rem; }

                }

                @keyframes fadeInUp {
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            </style>
        {elseif (!empty($payment))}
            {$payment}
        {/if}
    </section>
{else}
    {*<p>No payment methods or payment</p>*}
{/if}