AI update: תיקון דחוף לדף התשלום המשותף: כרגע כשנכנסים לדף עם פרמטרי biz ו-plan, מוטמע iframe עם קישור SmartPay קבוע (hardcoded) שפ
This commit is contained in:
+14
-10
@@ -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;">
|
||||||
|
|||||||
@@ -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';
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user