{"id":2789,"date":"2025-12-31T21:31:06","date_gmt":"2025-12-31T21:31:06","guid":{"rendered":"https:\/\/adwatonline.com\/?page_id=2789"},"modified":"2025-12-31T22:59:12","modified_gmt":"2025-12-31T22:59:12","slug":"shopify-fee-calculator","status":"publish","type":"page","link":"https:\/\/adwatonline.com\/en\/shopify-fee-calculator","title":{"rendered":"Shopify Fee Calculator"},"content":{"rendered":"    <!DOCTYPE html>\n    <html lang=\"ar\" dir=\"rtl\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n        <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700;800;900&display=swap\" rel=\"stylesheet\">\n        <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n        <style>\n            #sc-root { font-family: 'Cairo', sans-serif; direction: rtl; text-align: right; }\n            #sc-root * { box-sizing: border-box; }\n            \n            \/* \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0647\u0648\u064a\u0629 (\u0645\u0637\u0627\u0628\u0642\u0629 \u0644\u0644\u0635\u0648\u0631\u0629) *\/\n            .bg-header { background-color: #004C3F; } \/* \u0623\u062e\u0636\u0631 \u063a\u0627\u0645\u0642 *\/\n            .text-shopify { color: #008060; }\n            .bg-shopify-green { background-color: #45C486; } \/* \u0627\u0644\u0623\u062e\u0636\u0631 \u0627\u0644\u0641\u0627\u062a\u062d \u0641\u064a \u0627\u0644\u0647\u064a\u062f\u0631 *\/\n            .border-selected { border: 2px solid #000; box-shadow: 0 0 0 1px #000; transform: translateY(-2px); }\n            \n            \/* \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a *\/\n            .sc-input {\n                width: 100%; padding: 12px; border: 1px solid #e2e8f0;\n                border-radius: 8px; font-size: 1rem; transition: 0.3s;\n                text-align: left; direction: ltr; font-weight: 700; color: #1e293b;\n            }\n            .sc-input:focus { border-color: #45C486; outline: none; box-shadow: 0 0 0 3px rgba(69, 196, 134, 0.2); }\n            \n            \/* \u0627\u0644\u062a\u0648\u062c\u0644 (\u0627\u0644\u0643\u0628\u0633\u0648\u0644\u0629) *\/\n            .toggle-pill {\n                display: flex; background: #f1f5f9; border-radius: 50px; padding: 4px;\n                position: relative; cursor: pointer; border: 1px solid #e2e8f0; width: fit-content; margin: 0 auto;\n            }\n            .toggle-bg {\n                position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: 50%;\n                background: #000; border-radius: 50px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;\n            }\n            .toggle-option {\n                padding: 8px 24px; border-radius: 50px; font-size: 0.85rem; font-weight: 700;\n                z-index: 2; transition: 0.3s; flex: 1; text-align: center; color: #64748b;\n            }\n            .toggle-option.active { color: white; }\n\n            \/* \u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u062e\u0637\u0637 *\/\n            .plan-card {\n                border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;\n                cursor: pointer; transition: 0.3s; background: white; position: relative;\n                display: flex; flex-direction: column;\n            }\n            .plan-card:hover { border-color: #94a3b8; }\n            .plan-header-strip { background: #45C486; padding: 8px; text-align: center; font-weight: 700; font-size: 0.8rem; color: #002e25; }\n            \n            \/* \u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0628\u0648\u0627\u0628\u0629 *\/\n            .gateway-card {\n                border: 2px solid #e2e8f0; border-radius: 10px; padding: 12px;\n                text-align: center; cursor: pointer; transition: 0.3s; background: white;\n            }\n            .gateway-card.active { border-color: #45C486; background-color: #f0fdf4; }\n            .gateway-card.external-active { border-color: #fca5a5; background-color: #fef2f2; }\n\n            \/* \u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u064a\u062f\u0648\u064a *\/\n            .manual-box {\n                background-color: #FFFBEB; border: 1px solid #FCD34D; border-radius: 12px;\n                padding: 15px; margin-top: 25px; position: relative;\n            }\n            .manual-input {\n                width: 100%; padding: 8px; border: 1px solid #FCD34D; background: white;\n                border-radius: 6px; text-align: center; font-weight: 700; direction: ltr;\n            }\n\n            \/* \u0627\u0644\u0646\u062a\u0627\u0626\u062c *\/\n            .result-card {\n                background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px;\n                padding: 20px; text-align: center; display: flex; flex-direction: column; justify-content: center;\n            }\n            .res-val { font-size: 2.2rem; font-weight: 900; direction: ltr; line-height: 1.1; margin: 10px 0; }\n            \n            \/* CTA *\/\n            .cta-btn {\n                background: #000; color: #fff; padding: 16px 20px; border-radius: 50px;\n                font-weight: 800; display: block; width: 100%; margin-top: 15px;\n                transition: 0.3s; text-decoration: none;\n            }\n            .cta-btn:hover { background: #333; transform: scale(1.02); }\n        <\/style>\n    <\/head>\n    <body class=\"bg-gray-50 p-2 md:p-6\">\n\n    <div id=\"sc-root\" class=\"max-w-6xl mx-auto bg-white rounded-[20px] shadow-xl overflow-hidden border border-slate-100 my-6\">\n        \n        <!-- \u0627\u0644\u0647\u064a\u062f\u0631 -->\n        <div class=\"bg-header p-8 text-center text-white relative overflow-hidden\">\n            <h1 class=\"text-3xl font-black mb-2 flex justify-center items-center gap-3\">\n                <i class=\"fa-brands fa-shopify text-4xl\"><\/i>\n                \u062d\u0627\u0633\u0628\u0629 \u0631\u0633\u0648\u0645 \u0634\u0648\u0628\u064a\u0641\u0627\u064a\n            <\/h1>\n            <p class=\"opacity-80\">\u062e\u0637\u0637 \u0644\u0623\u0631\u0628\u0627\u062d \u0645\u062a\u062c\u0631\u0643 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u064a<\/p>\n        <\/div>\n\n        <div class=\"p-6 md:p-10 grid grid-cols-1 lg:grid-cols-12 gap-12\">\n            \n            <!-- (\u0627\u0644\u064a\u0645\u064a\u0646) \u0627\u0644\u0645\u062f\u062e\u0644\u0627\u062a \u0648\u0627\u0644\u062e\u0637\u0637 -->\n            <div class=\"lg:col-span-5 order-1\">\n                \n                <!-- 1. \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a -->\n                <div class=\"mb-8\">\n                    <label class=\"block text-slate-700 font-bold mb-2 text-sm\">\u0647\u062f\u0641 \u0645\u0628\u064a\u0639\u0627\u062a\u0643 \u0627\u0644\u0634\u0647\u0631\u064a \u0627\u0644\u0645\u062a\u0648\u0642\u0639<\/label>\n                    <div class=\"relative\">\n                        <span class=\"absolute right-4 top-1\/2 -translate-y-1\/2 text-gray-400 font-bold\">$<\/span>\n                        <input type=\"number\" id=\"inp_revenue\" class=\"sc-input pr-8 py-3 text-xl\" value=\"5000\" oninput=\"app.calc()\">\n                    <\/div>\n                <\/div>\n\n                <hr class=\"border-slate-100 my-6\">\n\n                <!-- 2. \u062f\u0648\u0631\u0629 \u0627\u0644\u062f\u0641\u0639 (Toggle Pill Style) -->\n                <div class=\"mb-6 text-center\">\n                    <div class=\"toggle-pill\" onclick=\"app.toggleCycle()\">\n                        <div class=\"toggle-bg\" id=\"cycle-bg\"><\/div>\n                        <div class=\"toggle-option active\" id=\"opt-monthly\" onclick=\"app.setCycle('monthly')\">\u062f\u0641\u0639 \u0634\u0647\u0631\u064a<\/div>\n                        <div class=\"toggle-option\" id=\"opt-yearly\" onclick=\"app.setCycle('yearly')\">\u062f\u0641\u0639 \u0633\u0646\u0648\u064a (\u0648\u0641\u0631 25%)<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 3. \u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u062e\u0637\u0637 (Grid) -->\n                <div class=\"grid grid-cols-3 gap-2 mb-6\">\n                    \n                    <!-- Basic -->\n                    <div class=\"plan-card border-selected\" id=\"card-basic\" onclick=\"app.selectPlan('basic')\">\n                      \n                        <div class=\"p-3 text-center flex-grow flex flex-col justify-between\">\n                            <div>\n                                <h3 class=\"font-black text-lg text-slate-800\">Basic<\/h3>\n                                <span class=\"bg-green-100 text-green-800 text-[10px] font-bold px-2 rounded-full\">Popular<\/span>\n                            <\/div>\n                            <div class=\"mt-2\">\n                                <span class=\"text-xs text-gray-400 line-through block\" id=\"old-price-basic\">$24<\/span>\n                                <span class=\"text-2xl font-black text-slate-900 dir-ltr\" id=\"price-basic\">$19<\/span>\n                                <span class=\"text-[10px] text-slate-500 font-bold block\">USD\/\u0634\u0647\u0631<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Grow -->\n                    <div class=\"plan-card\" id=\"card-grow\" onclick=\"app.selectPlan('grow')\">\n                        <div class=\"plan-header-strip opacity-0\">.<\/div>\n                        <div class=\"p-3 text-center flex-grow flex flex-col justify-between\">\n                            <h3 class=\"font-black text-lg text-slate-800\">Grow<\/h3>\n                            <div class=\"mt-2\">\n                                <span class=\"text-xs text-gray-400 line-through block\" id=\"old-price-grow\">$69<\/span>\n                                <span class=\"text-2xl font-black text-slate-900 dir-ltr\" id=\"price-grow\">$54<\/span>\n                                <span class=\"text-[10px] text-slate-500 font-bold block\">USD\/\u0634\u0647\u0631<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Advanced -->\n                    <div class=\"plan-card\" id=\"card-advanced\" onclick=\"app.selectPlan('advanced')\">\n                        <div class=\"plan-header-strip opacity-0\">.<\/div>\n                        <div class=\"p-3 text-center flex-grow flex flex-col justify-between\">\n                            <h3 class=\"font-black text-lg text-slate-800\">Advanced<\/h3>\n                            <div class=\"mt-2\">\n                                <span class=\"text-xs text-gray-400 line-through block\" id=\"old-price-advanced\">$399<\/span>\n                                <span class=\"text-2xl font-black text-slate-900 dir-ltr\" id=\"price-advanced\">$299<\/span>\n                                <span class=\"text-[10px] text-slate-500 font-bold block\">USD\/\u0634\u0647\u0631<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 4. \u0628\u0648\u0627\u0628\u0629 \u0627\u0644\u062f\u0641\u0639 -->\n                <div class=\"mb-4\">\n                    <label class=\"text-xs font-bold text-slate-500 mb-2 block\">\u0628\u0648\u0627\u0628\u0629 \u0627\u0644\u062f\u0641\u0639 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629:<\/label>\n                    <div class=\"grid grid-cols-2 gap-3\">\n                        <div class=\"gateway-card active\" id=\"gw-shopify\" onclick=\"app.setGateway('shopify')\">\n                            <div class=\"font-bold text-sm text-slate-800\">Shopify Payments<\/div>\n                            <div class=\"text-xs text-green-600 mt-1\">\u0631\u0633\u0648\u0645 0%<\/div>\n                        <\/div>\n                        <div class=\"gateway-card\" id=\"gw-external\" onclick=\"app.setGateway('external')\">\n                            <div class=\"font-bold text-sm text-slate-800\">\u0628\u0648\u0627\u0628\u0629 \u062e\u0627\u0631\u062c\u064a\u0629<\/div>\n                            <div class=\"text-xs text-red-500 mt-1\">\u0631\u0633\u0648\u0645 \u0625\u0636\u0627\u0641\u064a\u0629<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- 5. \u0627\u0644\u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u0623\u0635\u0641\u0631 (\u0627\u0644\u0645\u0631\u0648\u0646\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629) -->\n                <div class=\"manual-box\">\n                    <div class=\"absolute -top-3 right-3 bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-[10px] font-bold border border-yellow-200\">\n                        <i class=\"fa-solid fa-pen\"><\/i> \u062a\u062d\u0643\u0645 \u0643\u0627\u0645\u0644 (\u062a\u0639\u062f\u064a\u0644 \u064a\u062f\u0648\u064a)\n                    <\/div>\n                    \n                    <div class=\"grid grid-cols-2 gap-3 mb-3\">\n                        <div>\n                            <label class=\"block text-[10px] font-bold text-yellow-900 mb-1\">\u0633\u0639\u0631 \u0627\u0644\u0627\u0634\u062a\u0631\u0627\u0643 ($)<\/label>\n                            <input type=\"number\" id=\"inp_sub_cost\" class=\"manual-input\" oninput=\"app.calc()\">\n                        <\/div>\n                        <div>\n                            <label class=\"block text-[10px] font-bold text-yellow-900 mb-1\">\u0639\u0645\u0648\u0644\u0629 \u0627\u0644\u0645\u0646\u0635\u0629 (%)<\/label>\n                            <input type=\"number\" id=\"inp_fee_rate\" class=\"manual-input\" oninput=\"app.calc()\">\n                        <\/div>\n                    <\/div>\n                    \n                    <div>\n                        <label class=\"block text-[10px] font-bold text-yellow-900 mb-1\">\u0646\u0633\u0628\u0629 \u0627\u0644\u062e\u0635\u0645 \u0627\u0644\u0633\u0646\u0648\u064a (%)<\/label>\n                        <div class=\"relative\">\n                            <input type=\"number\" id=\"inp_discount_percent\" class=\"manual-input bg-yellow-50 focus:bg-white\" value=\"25\" oninput=\"app.updateDefaults()\"> \n                            <span class=\"absolute left-3 top-1\/2 -translate-y-1\/2 text-yellow-600 text-xs font-bold\">%<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n\n            <!-- (\u0627\u0644\u064a\u0633\u0627\u0631) \u0627\u0644\u0646\u062a\u0627\u0626\u062c -->\n            <div class=\"lg:col-span-7 order-2 flex flex-col\">\n                \n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5 mb-8\">\n                    <!-- \u0635\u0627\u0641\u064a \u0627\u0644\u062f\u062e\u0644 -->\n                    <div class=\"result-card bg-green-50 border-green-200\">\n                        <span class=\"text-green-700 font-bold text-sm\">\u0635\u0627\u0641\u064a \u062f\u062e\u0644\u0643 (Net Revenue)<\/span>\n                        <div class=\"res-val text-green-800\" id=\"res_net\">$0.00<\/div>\n                        <span class=\"text-xs text-green-600 font-bold bg-green-100 px-2 py-1 rounded-full w-max mx-auto\">\u0628\u0639\u062f \u062e\u0635\u0645 \u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u0646\u0635\u0629<\/span>\n                    <\/div>\n\n                    <!-- \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0631\u0633\u0648\u0645 -->\n                    <div class=\"result-card bg-red-50 border-red-200\">\n                        <span class=\"text-red-500 font-bold text-sm\">\u0625\u062c\u0645\u0627\u0644\u064a \u0645\u0627 \u064a\u0623\u062e\u0630\u0647 \u0634\u0648\u0628\u064a\u0641\u0627\u064a<\/span>\n                        <div class=\"res-val text-red-600\" id=\"res_fees\">$0.00<\/div>\n                        <span class=\"text-xs text-red-400\" id=\"res_breakdown\">\u0627\u0634\u062a\u0631\u0627\u0643 + \u0639\u0645\u0648\u0644\u0629<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- \u0634\u0631\u064a\u0637 \u0627\u0644\u062a\u0648\u0632\u064a\u0639 -->\n                <div class=\"bg-white rounded-xl p-5 border border-slate-100 shadow-sm\">\n                    <div class=\"flex justify-between text-sm font-bold mb-3\">\n                        <span class=\"text-slate-700\">\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u062f\u062e\u0644:<\/span>\n                        <span class=\"text-slate-500 text-xs\" id=\"res_effective\">\u0646\u0633\u0628\u0629 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0641\u0639\u0644\u064a\u0629: 0%<\/span>\n                    <\/div>\n                    \n                    <div class=\"w-full h-4 bg-gray-100 rounded-full overflow-hidden flex mb-3\">\n                        <div id=\"bar-net\" class=\"h-full bg-header transition-all duration-500\" style=\"width: 0%\"><\/div>\n                        <div id=\"bar-fees\" class=\"h-full bg-red-500 transition-all duration-500\" style=\"width: 0%\"><\/div>\n                    <\/div>\n                    \n                    <div class=\"flex justify-between text-xs font-bold\">\n                        <div class=\"flex items-center gap-2\">\n                            <span class=\"w-3 h-3 rounded-full bg-header block\"><\/span>\n                            <span class=\"text-slate-600\">\u062f\u062e\u0644\u0643 \u0627\u0644\u0635\u0627\u0641\u064a<\/span>\n                        <\/div>\n                        <div class=\"flex items-center gap-2\">\n                            <span class=\"w-3 h-3 rounded-full bg-red-500 block\"><\/span>\n                            <span class=\"text-slate-600\">\u0631\u0633\u0648\u0645 \u0634\u0648\u0628\u064a\u0641\u0627\u064a<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- CTA -->\n                <div class=\"cta-box mt-8 bg-gray-900 text-white p-6 rounded-2xl text-center\">\n                    <div class=\"flex items-center justify-center gap-2 mb-2 text-yellow-400\">\n                        <i class=\"fa-solid fa-rocket\"><\/i> \u0639\u0631\u0636 \u062e\u0627\u0635 \u0648\u062d\u0635\u0631\u064a\n                    <\/div>\n                    <h3 class=\"text-lg font-bold mb-4\">\u0647\u0644 \u062a\u0639\u0644\u0645 \u0623\u0646\u0643 \u062a\u0633\u062a\u0637\u064a\u0639 \u0627\u0644\u0628\u062f\u0621 \u0627\u0644\u064a\u0648\u0645 \u0645\u0642\u0627\u0628\u0644 \u062f\u0648\u0644\u0627\u0631 \u0648\u0627\u062d\u062f \u0641\u0642\u0637\u061f<\/h3>\n                    <a href=\"https:\/\/adwatonline.com\/shopify\" target=\"_blank\" class=\"cta-btn\">\n                        \u0627\u0634\u062a\u0631\u0643 \u0627\u0644\u0622\u0646 \u0641\u064a \u0634\u0648\u0628\u064a\u0641\u0627\u064a \u0645\u0642\u0627\u0628\u0644 1$\n                    <\/a>\n                <\/div>\n\n                <!-- \u0627\u0644\u062a\u0646\u0648\u064a\u0647 \u0627\u0644\u0630\u0643\u064a (Evergreen) -->\n                <div class=\"mt-6 p-4 bg-f1f5f9 border-r-4 border-slate-300 bg-slate-50 rounded-lg text-xs text-slate-500 leading-relaxed\">\n                    <strong>\ud83d\udca1 \u0644\u0645\u0627\u0630\u0627 \u0648\u0641\u0631\u0646\u0627 \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u064a\u062f\u0648\u064a\u061f<\/strong><br>\n                    \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u062a\u062a\u063a\u064a\u0631\u060c \u0648\u0642\u062f \u062a\u062e\u062a\u0644\u0641 \u0627\u0644\u0639\u0631\u0648\u0636 \u0645\u0646 \u062f\u0648\u0644\u0629 \u0644\u0623\u062e\u0631\u0649. \u0642\u0645\u0646\u0627 \u0628\u062a\u0635\u0645\u064a\u0645 \u0647\u0630\u0647 \u0627\u0644\u0623\u062f\u0627\u0629 \u0628\u0645\u0631\u0648\u0646\u0629 \u062a\u0627\u0645\u0629 \u0644\u062a\u0633\u0645\u062d \u0644\u0643 \u0628\u062a\u062d\u062f\u064a\u062b \"\u0633\u0639\u0631 \u0627\u0644\u0627\u0634\u062a\u0631\u0627\u0643\" \u0623\u0648 \"\u0646\u0633\u0628\u0629 \u0627\u0644\u0639\u0645\u0648\u0644\u0629\" \u064a\u062f\u0648\u064a\u0627\u064b \u0641\u064a (\u0627\u0644\u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u0623\u0635\u0641\u0631)\u060c \u0644\u062a\u0636\u0645\u0646 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062d\u0633\u0627\u0628\u0627\u062a \u062f\u0642\u064a\u0642\u0629 \u062f\u0627\u0626\u0645\u0627\u064b \u0645\u0647\u0645\u0627 \u062a\u063a\u064a\u0631\u062a \u0627\u0644\u0623\u0633\u0639\u0627\u0631 \u0641\u064a \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644.\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const app = {\n            \/\/ \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0645\u062d\u062f\u062b\u0629 (\u0634\u0647\u0631\u064a \/ \u0633\u0646\u0648\u064a) \u062d\u0633\u0628 \u0627\u0644\u0635\u0648\u0631\u0629\n            plans: {\n                basic: { m: 27, y: 19, fee: 2.0 },\n                grow: { m: 72, y: 54, fee: 1.0 },\n                advanced: { m: 399, y: 299, fee: 0.6 }\n            },\n            \n            state: {\n                plan: 'basic',\n                yearly: true, \/\/ \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0633\u0646\u0648\u064a \u0643\u0645\u0627 \u0641\u064a \u0627\u0644\u0635\u0648\u0631\u0629\n                external: false\n            },\n\n            \/\/ 1. \u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u062f\u0648\u0631\u0629 (Toggle Logic)\n            setCycle: (type) => {\n                app.state.yearly = (type === 'yearly');\n                const bg = document.getElementById('cycle-bg');\n                const m = document.getElementById('opt-monthly');\n                const y = document.getElementById('opt-yearly');\n\n                \/\/ \u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 (RTL Handling)\n                if (document.dir === 'rtl') {\n                    if(app.state.yearly) { bg.style.right = 'auto'; bg.style.left = '4px'; }\n                    else { bg.style.right = '4px'; bg.style.left = 'auto'; }\n                } else {\n                    if(app.state.yearly) { bg.style.right = '4px'; bg.style.left = '50%'; }\n                    else { bg.style.right = '50%'; bg.style.left = '4px'; }\n                }\n\n                if(app.state.yearly) {\n                    y.classList.add('active'); m.classList.remove('active');\n                } else {\n                    m.classList.add('active'); y.classList.remove('active');\n                }\n\n                app.updateUI();\n                app.updateDefaults();\n            },\n\n            \/\/ 2. \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u062e\u0637\u0629\n            selectPlan: (planName) => {\n                app.state.plan = planName;\n                document.querySelectorAll('.plan-card').forEach(el => el.classList.remove('border-selected'));\n                document.getElementById('card-' + planName).classList.add('border-selected');\n                app.updateDefaults();\n            },\n\n            \/\/ 3. \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0648\u0627\u062c\u0647\u0629 (\u0627\u0644\u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0642\u062f\u064a\u0645\u0629 \u0648\u0627\u0644\u062c\u062f\u064a\u062f\u0629)\n            updateUI: () => {\n                const d = app.plans;\n                const isY = app.state.yearly;\n\n                \/\/ \u062a\u062d\u062f\u064a\u062b \u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a\n                document.getElementById('price-basic').innerText = '$' + (isY ? d.basic.y : d.basic.m);\n                document.getElementById('old-price-basic').innerText = isY ? '$24' : '$32'; \/\/ \u0623\u0633\u0639\u0627\u0631 \u0642\u0628\u0644 \u0627\u0644\u062e\u0635\u0645 \u062a\u0642\u0631\u064a\u0628\u064a\u0629 \u0644\u0644\u0639\u0631\u0636\n\n                document.getElementById('price-grow').innerText = '$' + (isY ? d.grow.y : d.grow.m);\n                document.getElementById('old-price-grow').innerText = isY ? '$69' : '$92';\n\n                document.getElementById('price-advanced').innerText = '$' + (isY ? d.advanced.y : d.advanced.m);\n                document.getElementById('old-price-advanced').style.display = isY ? 'block' : 'none'; \/\/ Advanced \u0639\u0627\u062f\u0629 \u0644\u0627 \u064a\u0638\u0647\u0631 \u0644\u0647 \u062e\u0635\u0645 \u0634\u0647\u0631\u064a \u0641\u064a \u0627\u0644\u0635\u0648\u0631\u0629\u060c \u0644\u0643\u0646 \u0633\u0646\u062a\u0631\u0643\u0647\n            },\n\n            \/\/ 4. \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0644\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u064a\u062f\u0648\u064a\u0629\n            updateDefaults: () => {\n                const pData = app.plans[app.state.plan];\n                \n                \/\/ \u062d\u0633\u0627\u0628 \u0627\u0644\u0633\u0639\u0631 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0646\u0633\u0628\u0629 \u0627\u0644\u062e\u0635\u0645 \u0627\u0644\u0645\u062f\u062e\u0644\u0629 \u064a\u062f\u0648\u064a\u0627\u064b (\u0644\u0644\u0645\u0631\u0648\u0646\u0629)\n                \/\/ \u0644\u0643\u0646 \u0647\u0646\u0627 \u0633\u0646\u0623\u062e\u0630 \u0627\u0644\u0642\u064a\u0645\u0629 \u0645\u0646 \u0627\u0644\u0640 Object \u0645\u0628\u0627\u0634\u0631\u0629 \u0644\u0623\u0646\u0647\u0627 \u062f\u0642\u064a\u0642\u0629 \u062d\u0633\u0628 \u0627\u0644\u0635\u0648\u0631\u0629\n                \/\/ *\u0645\u0644\u0627\u062d\u0638\u0629:* \u0625\u0630\u0627 \u063a\u064a\u0631 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0646\u0633\u0628\u0629 \u0627\u0644\u062e\u0635\u0645 \u064a\u062f\u0648\u064a\u0627\u064b\u060c \u0633\u0646\u0636\u0637\u0631 \u0644\u0644\u062d\u0633\u0627\u0628\u060c \u0644\u0643\u0646 \u0627\u0644\u0635\u0648\u0631\u0629 \u062a\u0639\u0637\u064a \u0623\u0631\u0642\u0627\u0645 \u062b\u0627\u0628\u062a\u0629 (19\/54\/299).\n                \/\/ \u0627\u0644\u062d\u0644: \u0646\u0639\u062a\u0645\u062f \u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0635\u0648\u0631\u0629 \u0643\u0640 \"\u0623\u0633\u0627\u0633\"\u060c \u0648\u0646\u0633\u0645\u062d \u0628\u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u064a\u062f\u0648\u064a \u0627\u0644\u0645\u0628\u0627\u0634\u0631 \u0644\u0644\u0633\u0639\u0631.\n                \n                const price = app.state.yearly ? pData.y : pData.m;\n                document.getElementById('inp_sub_cost').value = price;\n                \n                \/\/ \u0627\u0644\u0646\u0633\u0628\u0629\n                const fee = app.state.external ? pData.fee : 0;\n                document.getElementById('inp_fee_rate').value = fee;\n\n                app.calc();\n            },\n\n            setGateway: (type) => {\n                app.state.external = (type === 'external');\n                document.getElementById('gw-shopify').className = type === 'shopify' ? 'gateway-card active' : 'gateway-card';\n                document.getElementById('gw-external').className = type === 'external' ? 'gateway-card external-active' : 'gateway-card';\n                \n                app.updateDefaults();\n            },\n\n            calc: () => {\n                const revenue = parseFloat(document.getElementById('inp_revenue').value) || 0;\n                const subCost = parseFloat(document.getElementById('inp_sub_cost').value) || 0;\n                const feeRate = parseFloat(document.getElementById('inp_fee_rate').value) || 0;\n\n                const feeAmount = revenue * (feeRate \/ 100);\n                const totalFees = subCost + feeAmount;\n                const net = revenue - totalFees;\n                const effectiveRate = revenue > 0 ? (totalFees \/ revenue * 100) : 0;\n\n                document.getElementById('res_net').innerText = '$' + net.toLocaleString('en-US', {maximumFractionDigits: 2});\n                document.getElementById('res_fees').innerText = '$' + totalFees.toFixed(2);\n                document.getElementById('res_breakdown').innerText = `\u0627\u0634\u062a\u0631\u0627\u0643 $${subCost} + \u0639\u0645\u0648\u0644\u0629 $${feeAmount.toFixed(2)}`;\n                document.getElementById('res_effective').innerText = `\u0627\u0644\u0646\u0633\u0628\u0629 \u0627\u0644\u0641\u0639\u0644\u064a\u0629: ${effectiveRate.toFixed(1)}%`;\n\n                if (revenue > 0 && totalFees > 0) {\n                    const feePercent = Math.min((totalFees \/ revenue) * 100, 100);\n                    const netPercent = 100 - feePercent;\n                    \n                    document.getElementById('bar-fees').style.width = feePercent + '%';\n                    document.getElementById('bar-net').style.width = netPercent + '%';\n                } else {\n                    document.getElementById('bar-fees').style.width = '0%';\n                    document.getElementById('bar-net').style.width = '100%';\n                }\n            }\n        };\n\n        window.onload = function() {\n            app.setCycle('yearly'); \/\/ Default to Yearly as per screenshot suggestion (save 25%)\n        };\n    <\/script>\n    <\/body>\n    <\/html>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2789","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"\u0645\u062d\u0645\u062f \u0623\u0645\u064a\u0646","author_link":"https:\/\/adwatonline.com\/en\/archives\/author\/abo-ameen78977gmail-com"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/adwatonline.com\/en\/wp-json\/wp\/v2\/pages\/2789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adwatonline.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adwatonline.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adwatonline.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adwatonline.com\/en\/wp-json\/wp\/v2\/comments?post=2789"}],"version-history":[{"count":0,"href":"https:\/\/adwatonline.com\/en\/wp-json\/wp\/v2\/pages\/2789\/revisions"}],"wp:attachment":[{"href":"https:\/\/adwatonline.com\/en\/wp-json\/wp\/v2\/media?parent=2789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}