AI update: תיקון דחוף לדף התשלום המשותף: כרגע כשנכנסים לדף עם פרמטרי biz ו-plan, מוטמע iframe עם קישור SmartPay קבוע (hardcoded) שפ

This commit is contained in:
2026-08-20 20:37:15 +00:00
parent d3054f8651
commit 823fa5436e
3 changed files with 148 additions and 76 deletions
+14 -10
View File
@@ -54,16 +54,20 @@
<ul class="plan-features" id="planFeatures"></ul> <ul class="plan-features" id="planFeatures"></ul>
</div> </div>
<div class="iframe-container" id="iframeContainer"> <div class="payment-action" id="paymentAction">
<div class="iframe-loading" id="iframeLoading" role="status" aria-live="polite"> <button type="button" class="pay-button" id="payButton">
<div class="spinner" aria-hidden="true"></div> <svg class="pay-button-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<span>טוען טופס תשלום...</span> <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
</div> <line x1="1" y1="10" x2="23" y2="10"/>
<iframe </svg>
id="paymentFrame" <span>המשך לתשלום מאובטח</span>
title="טופס תשלום מאובטח SmartPay" </button>
allow="payment" <p class="payment-note">
></iframe> <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>
<div class="error-state" id="errorState" style="display: none;"> <div class="error-state" id="errorState" style="display: none;">
+65 -29
View File
@@ -1,16 +1,16 @@
(function() { (function() {
'use strict'; 'use strict';
// Business configuration with SmartPay iframe URLs // Business configuration - prices only, payment URLs are generated dynamically
var BUSINESSES = { var BUSINESSES = {
sarit: { sarit: {
name: 'שרית הספרית', name: 'שרית הספרית',
lang: 'he', lang: 'he',
plans: { plans: {
code: { code: {
url: 'https://pay.smartpay.co.il/v1/iframe/af5cb955-8620-57fa-3b5a-61916e5f',
price: '₪1,490', price: '₪1,490',
title: 'קוד האתר בלבד', title: 'קוד האתר בלבד',
package: 'code',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
'עיצוב מותאם אישית', 'עיצוב מותאם אישית',
@@ -18,9 +18,9 @@
] ]
}, },
full: { full: {
url: 'https://pay.smartpay.co.il/v1/iframe/5ca5e359-9fc8-504b-ce08-6181d906',
price: '₪2,390', price: '₪2,390',
title: 'חבילה מלאה', title: 'חבילה מלאה',
package: 'hosting',
badge: 'החבילה המומלצת', badge: 'החבילה המומלצת',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
@@ -36,9 +36,9 @@
lang: 'he', lang: 'he',
plans: { plans: {
code: { code: {
url: 'https://pay.smartpay.co.il/v1/iframe/0472462e-8673-5f88-5329-5c54164c',
price: '₪1,490', price: '₪1,490',
title: 'קוד האתר בלבד', title: 'קוד האתר בלבד',
package: 'code',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
'עיצוב מותאם אישית', 'עיצוב מותאם אישית',
@@ -46,9 +46,9 @@
] ]
}, },
full: { full: {
url: 'https://pay.smartpay.co.il/v1/iframe/188c95d1-e760-5640-f05a-562be8fc',
price: '₪2,390', price: '₪2,390',
title: 'חבילה מלאה', title: 'חבילה מלאה',
package: 'hosting',
badge: 'החבילה המומלצת', badge: 'החבילה המומלצת',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
@@ -64,9 +64,9 @@
lang: 'he', lang: 'he',
plans: { plans: {
code: { code: {
url: 'https://pay.smartpay.co.il/v1/iframe/08825e84-c73d-5737-c77e-950be56e',
price: '₪1,490', price: '₪1,490',
title: 'קוד האתר בלבד', title: 'קוד האתר בלבד',
package: 'code',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
'עיצוב מותאם אישית', 'עיצוב מותאם אישית',
@@ -74,9 +74,9 @@
] ]
}, },
full: { full: {
url: 'https://pay.smartpay.co.il/v1/iframe/56604ea6-6729-51f8-f421-9c3e88c1',
price: '₪2,390', price: '₪2,390',
title: 'חבילה מלאה', title: 'חבילה מלאה',
package: 'hosting',
badge: 'החבילה המומלצת', badge: 'החבילה המומלצת',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
@@ -92,9 +92,9 @@
lang: 'en', lang: 'en',
plans: { plans: {
code: { code: {
url: 'https://pay.smartpay.co.il/v1/iframe/eb9b2b7a-95f9-5e1c-917c-513bfd99',
price: '₪1,490', price: '₪1,490',
title: 'קוד האתר בלבד', title: 'קוד האתר בלבד',
package: 'code',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
'עיצוב מותאם אישית', 'עיצוב מותאם אישית',
@@ -102,9 +102,9 @@
] ]
}, },
full: { full: {
url: 'https://pay.smartpay.co.il/v1/iframe/ec156279-f214-516e-fe3d-6d462a65',
price: '₪2,390', price: '₪2,390',
title: 'חבילה מלאה', title: 'חבילה מלאה',
package: 'hosting',
badge: 'החבילה המומלצת', badge: 'החבילה המומלצת',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
@@ -120,9 +120,9 @@
lang: 'he', lang: 'he',
plans: { plans: {
code: { code: {
url: 'https://pay.smartpay.co.il/v1/iframe/08e71a36-b51a-592f-7b9e-d2ef0668',
price: '₪1,490', price: '₪1,490',
title: 'קוד האתר בלבד', title: 'קוד האתר בלבד',
package: 'code',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
'עיצוב מותאם אישית', 'עיצוב מותאם אישית',
@@ -130,9 +130,9 @@
] ]
}, },
full: { full: {
url: 'https://pay.smartpay.co.il/v1/iframe/049867df-8717-5a0b-ca2c-5ae47d74',
price: '₪2,390', price: '₪2,390',
title: 'חבילה מלאה', title: 'חבילה מלאה',
package: 'hosting',
badge: 'החבילה המומלצת', badge: 'החבילה המומלצת',
features: [ features: [
'קוד מקור מלא של האתר', 'קוד מקור מלא של האתר',
@@ -145,6 +145,9 @@
} }
}; };
// Payment API endpoint - generates fresh SmartPay links
var PAYMENT_API_BASE = '/api/pay/go';
// DOM elements // DOM elements
var elements = { var elements = {
businessTitle: document.getElementById('businessTitle'), businessTitle: document.getElementById('businessTitle'),
@@ -154,12 +157,19 @@
planTitle: document.getElementById('planTitle'), planTitle: document.getElementById('planTitle'),
planPrice: document.getElementById('planPrice'), planPrice: document.getElementById('planPrice'),
planFeatures: document.getElementById('planFeatures'), planFeatures: document.getElementById('planFeatures'),
iframeContainer: document.getElementById('iframeContainer'), paymentAction: document.getElementById('paymentAction'),
iframeLoading: document.getElementById('iframeLoading'), payButton: document.getElementById('payButton'),
paymentFrame: document.getElementById('paymentFrame'),
errorState: document.getElementById('errorState') errorState: document.getElementById('errorState')
}; };
// Current checkout state
var currentCheckout = {
bizKey: null,
planKey: null,
business: null,
plan: null
};
// Parse URL parameters // Parse URL parameters
function getUrlParams() { function getUrlParams() {
var params = new URLSearchParams(window.location.search); var params = new URLSearchParams(window.location.search);
@@ -180,7 +190,7 @@
// Show error state // Show error state
function showError() { function showError() {
elements.planSection.style.display = 'none'; elements.planSection.style.display = 'none';
elements.iframeContainer.style.display = 'none'; elements.paymentAction.style.display = 'none';
elements.errorState.style.display = 'block'; elements.errorState.style.display = 'block';
elements.businessTitle.textContent = 'שגיאה'; elements.businessTitle.textContent = 'שגיאה';
elements.businessSubtitle.textContent = ''; elements.businessSubtitle.textContent = '';
@@ -195,11 +205,49 @@
return div.innerHTML; 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 // Render checkout page
function renderCheckout(bizKey, planKey) { function renderCheckout(bizKey, planKey) {
var business = BUSINESSES[bizKey]; var business = BUSINESSES[bizKey];
var plan = business.plans[planKey]; var plan = business.plans[planKey];
// Store current checkout state
currentCheckout.bizKey = bizKey;
currentCheckout.planKey = planKey;
currentCheckout.business = business;
currentCheckout.plan = plan;
// Update header // Update header
elements.businessTitle.textContent = 'רכישת אתר עבור:'; elements.businessTitle.textContent = 'רכישת אתר עבור:';
@@ -225,20 +273,8 @@
.map(function(feature) { return '<li>' + escapeHtml(feature) + '</li>'; }) .map(function(feature) { return '<li>' + escapeHtml(feature) + '</li>'; })
.join(''); .join('');
// Load iframe // Setup payment button
elements.paymentFrame.src = plan.url; elements.payButton.addEventListener('click', handlePayment);
// 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);
// Update page title // Update page title
document.title = 'רכישת אתר - ' + business.name + ' | Emaillion'; document.title = 'רכישת אתר - ' + business.name + ' | Emaillion';
+69 -37
View File
@@ -136,14 +136,10 @@ body {
animation: none; animation: none;
} }
.spinner { .button-spinner {
animation: none; animation: none;
opacity: 0; opacity: 0;
} }
.iframe-loading .loading-text {
display: block;
}
} }
.card-header { .card-header {
@@ -254,51 +250,86 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* Iframe Container */ /* Payment Action Section */
.iframe-container { .payment-action {
position: relative; padding: var(--space-xl);
min-height: 700px; background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
background: var(--color-bg); text-align: center;
} }
.iframe-loading { .pay-button {
position: absolute; display: inline-flex;
inset: 0;
display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--space-md); gap: var(--space-sm);
color: var(--color-text-muted); width: 100%;
font-size: 0.9375rem; max-width: 360px;
background: var(--color-bg); padding: var(--space-lg) var(--space-xl);
z-index: 1; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
transition: opacity var(--transition-base); 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 { .pay-button:hover:not(:disabled) {
opacity: 0; 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; pointer-events: none;
} }
.spinner { .pay-button-icon {
width: 40px; width: 24px;
height: 40px; height: 24px;
border: 3px solid var(--color-border); flex-shrink: 0;
border-block-start-color: var(--color-primary); }
.button-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-block-start-color: white;
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
flex-shrink: 0;
} }
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
#paymentFrame { .payment-note {
width: 100%; display: flex;
min-height: 700px; align-items: center;
border: none; justify-content: center;
display: block; 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 */ /* Error State */
@@ -411,12 +442,13 @@ body {
font-size: 1.5rem; font-size: 1.5rem;
} }
.iframe-container { .payment-action {
min-height: 700px; padding: var(--space-lg);
} }
#paymentFrame { .pay-button {
min-height: 700px; padding: var(--space-md) var(--space-lg);
font-size: 1rem;
} }
.footer { .footer {