-
-
+
+
+
+
+ תועבר/י לדף תשלום מאובטח של SmartPay
+
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 = 'מעבר לתשלום...';
+
+ // 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 '
' + escapeHtml(feature) + ''; })
.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 {