From 823fa5436eba77f6fdd343069e56f47ed4b78040 Mon Sep 17 00:00:00 2001
From: ccadmingit1 <yossi.em@gmail.com>
Date: Thu, 20 Aug 2026 20:37:15 +0000
Subject: [PATCH] =?UTF-8?q?AI=20update:=20=D7=AA=D7=99=D7=A7=D7=95=D7=9F?=
 =?UTF-8?q?=20=D7=93=D7=97=D7=95=D7=A3=20=D7=9C=D7=93=D7=A3=20=D7=94=D7=AA?=
 =?UTF-8?q?=D7=A9=D7=9C=D7=95=D7=9D=20=D7=94=D7=9E=D7=A9=D7=95=D7=AA=D7=A3?=
 =?UTF-8?q?:=20=D7=9B=D7=A8=D7=92=D7=A2=20=D7=9B=D7=A9=D7=A0=D7=9B=D7=A0?=
 =?UTF-8?q?=D7=A1=D7=99=D7=9D=20=D7=9C=D7=93=D7=A3=20=D7=A2=D7=9D=20=D7=A4?=
 =?UTF-8?q?=D7=A8=D7=9E=D7=98=D7=A8=D7=99=20biz=20=D7=95-plan,=20=D7=9E?=
 =?UTF-8?q?=D7=95=D7=98=D7=9E=D7=A2=20iframe=20=D7=A2=D7=9D=20=D7=A7=D7=99?=
 =?UTF-8?q?=D7=A9=D7=95=D7=A8=20SmartPay=20=D7=A7=D7=91=D7=95=D7=A2=20(har?=
 =?UTF-8?q?dcoded)=20=D7=A9=D7=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  24 +++++++-----
 script.js  |  94 ++++++++++++++++++++++++++++++++---------------
 style.css  | 106 ++++++++++++++++++++++++++++++++++-------------------
 3 files changed, 148 insertions(+), 76 deletions(-)

diff --git a/index.html b/index.html
index fbc92d8..815f59b 100644
--- a/index.html
+++ b/index.html
@@ -54,16 +54,20 @@
           <ul class="plan-features" id="planFeatures"></ul>
         </div>
 
-        <div class="iframe-container" id="iframeContainer">
-          <div class="iframe-loading" id="iframeLoading" role="status" aria-live="polite">
-            <div class="spinner" aria-hidden="true"></div>
-            <span>טוען טופס תשלום...</span>
-          </div>
-          <iframe 
-            id="paymentFrame"
-            title="טופס תשלום מאובטח SmartPay"
-            allow="payment"
-          ></iframe>
+        <div class="payment-action" id="paymentAction">
+          <button type="button" class="pay-button" id="payButton">
+            <svg class="pay-button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
+              <line x1="1" y1="10" x2="23" y2="10"/>
+            </svg>
+            <span>המשך לתשלום מאובטח</span>
+          </button>
+          <p class="payment-note">
+            <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+            </svg>
+            תועבר/י לדף תשלום מאובטח של <span lang="en">SmartPay</span>
+          </p>
         </div>
 
         <div class="error-state" id="errorState" style="display: none;">
diff --git a/script.js b/script.js
index 1ad1e60..8ed048f 100644
--- a/script.js
+++ b/script.js
@@ -1,16 +1,16 @@
 (function() {
   'use strict';
 
-  // Business configuration with SmartPay iframe URLs
+  // Business configuration - prices only, payment URLs are generated dynamically
   var BUSINESSES = {
     sarit: {
       name: 'שרית הספרית',
       lang: 'he',
       plans: {
         code: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/af5cb955-8620-57fa-3b5a-61916e5f',
           price: '₪1,490',
           title: 'קוד האתר בלבד',
+          package: 'code',
           features: [
             'קוד מקור מלא של האתר',
             'עיצוב מותאם אישית',
@@ -18,9 +18,9 @@
           ]
         },
         full: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/5ca5e359-9fc8-504b-ce08-6181d906',
           price: '₪2,390',
           title: 'חבילה מלאה',
+          package: 'hosting',
           badge: 'החבילה המומלצת',
           features: [
             'קוד מקור מלא של האתר',
@@ -36,9 +36,9 @@
       lang: 'he',
       plans: {
         code: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/0472462e-8673-5f88-5329-5c54164c',
           price: '₪1,490',
           title: 'קוד האתר בלבד',
+          package: 'code',
           features: [
             'קוד מקור מלא של האתר',
             'עיצוב מותאם אישית',
@@ -46,9 +46,9 @@
           ]
         },
         full: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/188c95d1-e760-5640-f05a-562be8fc',
           price: '₪2,390',
           title: 'חבילה מלאה',
+          package: 'hosting',
           badge: 'החבילה המומלצת',
           features: [
             'קוד מקור מלא של האתר',
@@ -64,9 +64,9 @@
       lang: 'he',
       plans: {
         code: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/08825e84-c73d-5737-c77e-950be56e',
           price: '₪1,490',
           title: 'קוד האתר בלבד',
+          package: 'code',
           features: [
             'קוד מקור מלא של האתר',
             'עיצוב מותאם אישית',
@@ -74,9 +74,9 @@
           ]
         },
         full: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/56604ea6-6729-51f8-f421-9c3e88c1',
           price: '₪2,390',
           title: 'חבילה מלאה',
+          package: 'hosting',
           badge: 'החבילה המומלצת',
           features: [
             'קוד מקור מלא של האתר',
@@ -92,9 +92,9 @@
       lang: 'en',
       plans: {
         code: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/eb9b2b7a-95f9-5e1c-917c-513bfd99',
           price: '₪1,490',
           title: 'קוד האתר בלבד',
+          package: 'code',
           features: [
             'קוד מקור מלא של האתר',
             'עיצוב מותאם אישית',
@@ -102,9 +102,9 @@
           ]
         },
         full: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/ec156279-f214-516e-fe3d-6d462a65',
           price: '₪2,390',
           title: 'חבילה מלאה',
+          package: 'hosting',
           badge: 'החבילה המומלצת',
           features: [
             'קוד מקור מלא של האתר',
@@ -120,9 +120,9 @@
       lang: 'he',
       plans: {
         code: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/08e71a36-b51a-592f-7b9e-d2ef0668',
           price: '₪1,490',
           title: 'קוד האתר בלבד',
+          package: 'code',
           features: [
             'קוד מקור מלא של האתר',
             'עיצוב מותאם אישית',
@@ -130,9 +130,9 @@
           ]
         },
         full: {
-          url: 'https://pay.smartpay.co.il/v1/iframe/049867df-8717-5a0b-ca2c-5ae47d74',
           price: '₪2,390',
           title: 'חבילה מלאה',
+          package: 'hosting',
           badge: 'החבילה המומלצת',
           features: [
             'קוד מקור מלא של האתר',
@@ -145,6 +145,9 @@
     }
   };
 
+  // Payment API endpoint - generates fresh SmartPay links
+  var PAYMENT_API_BASE = '/api/pay/go';
+
   // DOM elements
   var elements = {
     businessTitle: document.getElementById('businessTitle'),
@@ -154,12 +157,19 @@
     planTitle: document.getElementById('planTitle'),
     planPrice: document.getElementById('planPrice'),
     planFeatures: document.getElementById('planFeatures'),
-    iframeContainer: document.getElementById('iframeContainer'),
-    iframeLoading: document.getElementById('iframeLoading'),
-    paymentFrame: document.getElementById('paymentFrame'),
+    paymentAction: document.getElementById('paymentAction'),
+    payButton: document.getElementById('payButton'),
     errorState: document.getElementById('errorState')
   };
 
+  // Current checkout state
+  var currentCheckout = {
+    bizKey: null,
+    planKey: null,
+    business: null,
+    plan: null
+  };
+
   // Parse URL parameters
   function getUrlParams() {
     var params = new URLSearchParams(window.location.search);
@@ -180,7 +190,7 @@
   // Show error state
   function showError() {
     elements.planSection.style.display = 'none';
-    elements.iframeContainer.style.display = 'none';
+    elements.paymentAction.style.display = 'none';
     elements.errorState.style.display = 'block';
     elements.businessTitle.textContent = 'שגיאה';
     elements.businessSubtitle.textContent = '';
@@ -195,11 +205,49 @@
     return div.innerHTML;
   }
 
+  // Build payment URL
+  function buildPaymentUrl(bizKey, plan) {
+    var params = new URLSearchParams();
+    params.set('package', plan.package);
+    params.set('biz', bizKey);
+    return PAYMENT_API_BASE + '?' + params.toString();
+  }
+
+  // Handle payment button click
+  function handlePayment() {
+    if (!currentCheckout.bizKey || !currentCheckout.plan) {
+      showError();
+      return;
+    }
+
+    // Set button to loading state
+    elements.payButton.disabled = true;
+    elements.payButton.classList.add('loading');
+    elements.payButton.innerHTML = '<span class="button-spinner"></span><span>מעבר לתשלום...</span>';
+
+    // Build the payment URL and navigate to it
+    var paymentUrl = buildPaymentUrl(currentCheckout.bizKey, currentCheckout.plan);
+    
+    // Navigate the top window to the payment page
+    // This ensures we break out of any iframe context
+    if (window.top !== window.self) {
+      window.top.location.href = paymentUrl;
+    } else {
+      window.location.href = paymentUrl;
+    }
+  }
+
   // Render checkout page
   function renderCheckout(bizKey, planKey) {
     var business = BUSINESSES[bizKey];
     var plan = business.plans[planKey];
 
+    // Store current checkout state
+    currentCheckout.bizKey = bizKey;
+    currentCheckout.planKey = planKey;
+    currentCheckout.business = business;
+    currentCheckout.plan = plan;
+
     // Update header
     elements.businessTitle.textContent = 'רכישת אתר עבור:';
     
@@ -225,20 +273,8 @@
       .map(function(feature) { return '<li>' + escapeHtml(feature) + '</li>'; })
       .join('');
 
-    // Load iframe
-    elements.paymentFrame.src = plan.url;
-    
-    // Hide loading when iframe loads
-    function handleLoad() {
-      elements.iframeLoading.classList.add('hidden');
-      elements.paymentFrame.removeEventListener('load', handleLoad);
-    }
-    elements.paymentFrame.addEventListener('load', handleLoad);
-
-    // Fallback: hide loading after timeout
-    setTimeout(function() {
-      elements.iframeLoading.classList.add('hidden');
-    }, 5000);
+    // Setup payment button
+    elements.payButton.addEventListener('click', handlePayment);
 
     // Update page title
     document.title = 'רכישת אתר - ' + business.name + ' | Emaillion';
diff --git a/style.css b/style.css
index 0e97870..1eb026c 100644
--- a/style.css
+++ b/style.css
@@ -136,14 +136,10 @@ body {
     animation: none;
   }
   
-  .spinner {
+  .button-spinner {
     animation: none;
     opacity: 0;
   }
-  
-  .iframe-loading .loading-text {
-    display: block;
-  }
 }
 
 .card-header {
@@ -254,51 +250,86 @@ body {
   background-repeat: no-repeat;
 }
 
-/* Iframe Container */
-.iframe-container {
-  position: relative;
-  min-height: 700px;
-  background: var(--color-bg);
+/* Payment Action Section */
+.payment-action {
+  padding: var(--space-xl);
+  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
+  text-align: center;
 }
 
-.iframe-loading {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
+.pay-button {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--space-md);
-  color: var(--color-text-muted);
-  font-size: 0.9375rem;
-  background: var(--color-bg);
-  z-index: 1;
-  transition: opacity var(--transition-base);
+  gap: var(--space-sm);
+  width: 100%;
+  max-width: 360px;
+  padding: var(--space-lg) var(--space-xl);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+  color: white;
+  font-family: var(--font-family);
+  font-size: 1.125rem;
+  font-weight: 600;
+  border: none;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
+  box-shadow: 0 4px 14px rgba(91, 76, 224, 0.4);
 }
 
-.iframe-loading.hidden {
-  opacity: 0;
+.pay-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(91, 76, 224, 0.5);
+}
+
+.pay-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.pay-button:disabled {
+  opacity: 0.8;
+  cursor: not-allowed;
+}
+
+.pay-button.loading {
   pointer-events: none;
 }
 
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--color-border);
-  border-block-start-color: var(--color-primary);
+.pay-button-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.button-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-block-start-color: white;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
 }
 
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
 
-#paymentFrame {
-  width: 100%;
-  min-height: 700px;
-  border: none;
-  display: block;
+.payment-note {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+  margin-block-start: var(--space-lg);
+  font-size: 0.875rem;
+  color: var(--color-text-subtle);
+}
+
+.note-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-success);
+  flex-shrink: 0;
 }
 
 /* Error State */
@@ -411,12 +442,13 @@ body {
     font-size: 1.5rem;
   }
   
-  .iframe-container {
-    min-height: 700px;
+  .payment-action {
+    padding: var(--space-lg);
   }
   
-  #paymentFrame {
-    min-height: 700px;
+  .pay-button {
+    padding: var(--space-md) var(--space-lg);
+    font-size: 1rem;
   }
   
   .footer {