חיבור סליקה תקבול ל-Lovable AI

מה נבנה במדריך הזה

1. כפתור “לתשלום” במסך Checkout ב-Lovable.
2. פתיחת חלון קופץ (Popup/Modal) שמכיל iframe לדף התשלום של תקבול.
3. הוספת מאזין message שמטפל ב-2 סוגי הודעות מה-iframe:
• תוצאת תשלום — event.data.message === "paymentreplay"
• גובה iframe — כאשר event.data הוא מספר
4. במקרה הצלחה (InternalCode === 0) — סגירת הפופאפ וניווט לעמוד תודה.

דרישות מוקדמות

• גישה לתיעוד APIary: takbull.docs.apiary.io
• הגדרה של PostProcessMethod: 1 (iframe postMessage flow)
• מסכי Checkout ו-Thank You בפרויקט Lovable
• מומלץ: להכיר את דף ה-API המלא של תקבול

המדריך מתמקד בזרימת iframe + postMessage. אם אתם מעדיפים Redirect, זו זרימה אחרת.

שלב 1: יצירת Popup עם iframe ב-Lovable

בנו Modal/Popup שמציג iframe עם מזהה קבוע: id="takbull_iframe". מומלץ להגדיר גובה התחלתי (למשל 700px), ולהתאים אותו דינמית לפי הודעות מה-iframe.

מבנה HTML מומלץ לפופאפ

<div class="takbull-modal" role="dialog" aria-modal="true" aria-label="תשלום מאובטח - תקבול">
  <button type="button" aria-label="סגירת חלון תשלום" class="takbull-close">✕</button>

  <iframe
    id="takbull_iframe"
    title="תשלום מאובטח - Takbull"
    src="<TAKBULL_PAYMENT_URL>"
    style="width:100%; height:700px; border:0;"
    allow="payment"
  ></iframe>
</div>

נגישות: title ל-iframe, כפתור סגירה עם aria-label, ו-role="dialog" ל-Modal משפרים משמעותית שימושיות לקוראי מסך.

שלב 2: טעינת URL תשלום של תקבול בתוך iframe

לפי ה-API של תקבול אתם מייצרים/מקבלים URL לדף התשלום ומטעינים אותו בתוך ה-iframe. בבקשה/פרמטרים חייבים לכלול:

• PostProcessMethod = 1

חשוב: ודאו שאתם שומרים אצלכם מזהה הזמנה/ייחודי (למשל uniqId) כדי לדעת לאיזה Order לשייך את התשלום.

שלב 3: מאזין postMessage — טיפול בתוצאה ובגובה iframe

מקרה 1: תוצאת תשלום (paymentreplay)

תקבול שולחת הודעה כאשר: event.data.message === "paymentreplay" וה-JSON נמצא בתוך event.data.value.

מבנה תגובה לדוגמה

{
  "InternalCode": 0,
  "InternalDescription": "Success",
  "transactionInternalId": "transaction_123",
  "uniqId": "unique_order_id",
  "CreditCard": {
    "CardExternalToken": "tok_abc123",
    "Last4Digits": "1234",
    "CardTokenExpirationMonth": 12,
    "CardTokenExpirationYear": 2026
  }
}

מקרה 2: שינוי גובה iframe

אם event.data הוא מספר, זה גובה חדש ל-iframe. אתם מעדכנים: document.getElementById('takbull_iframe').style.height = event.data + 'px'

קוד מלא ל-listener (להטמעה ב-Lovable)

// מצב פתיחת/סגירת הפופאפ (ב-Lovable תנהלו State/Ref בהתאם למסגרת שלכם)
let isTakbullPopupOpen = false;

function openTakbullPopup(paymentUrl) {
  isTakbullPopupOpen = true;
  // כאן Lovable יפתח modal ויטעין iframe עם src = paymentUrl
  // ודאו של-iframe יש id="takbull_iframe"
}

function closeTakbullPopup() {
  isTakbullPopupOpen = false;
  // כאן Lovable יסגור את ה-modal
}

function goToThankYouPage(uniqId) {
  // ניווט לעמוד תודה
  window.location.href = `/thank-you?order=${encodeURIComponent(uniqId || "")}`;
}

function takbullMessageHandler(event) {
  // מומלץ בפרודקשן: לבדוק origin מול הדומיין שממנו נטען iframe של תקבול
  // if (event.origin !== "https://<takbull-domain>") return;

  // CASE 1: Payment result
  if (event && event.data && event.data.message === "paymentreplay") {
    const resp = event.data.value;

    if (resp && resp.InternalCode === 0) {
      closeTakbullPopup();
      goToThankYouPage(resp.uniqId);
    } else {
      const desc = (resp && resp.InternalDescription) ? resp.InternalDescription : "Payment failed";
      console.error("Takbull payment failed:", resp);
      alert(desc);
    }
    return;
  }

  // CASE 2: iframe height
  if (typeof event.data === "number") {
    const iframe = document.getElementById("takbull_iframe");
    if (iframe) iframe.style.height = event.data + "px";
  }
}

// רישום המאזין
window.addEventListener("message", takbullMessageHandler);

// אם זה בתוך קומפוננטה (React/וכו') — להסיר בעת unmount:
// window.removeEventListener("message", takbullMessageHandler);

אבטחה: בפרודקשן מומלץ להפעיל בדיקת event.origin כדי לקבל הודעות רק מה-iframe של תקבול.

איך להסביר את זה ל-Lovable (Prompt מוכן)

העתיקו את הטקסט הבא ל-Lovable כדי שייצר לכם את החיבור:

Add Takbull payment gateway integration based on https://takbull.docs.apiary.io
Use PostProcessMethod=1 iframe postMessage flow
Create a popup/modal with an iframe id="takbull_iframe" that loads the Takbull payment URL
Add window.addEventListener('message', handler)
Handle two message cases:
1) if event.data.message === 'paymentreplay':
   - resp = event.data.value (JSON)
   - if resp.InternalCode === 0: close popup and navigate to /thank-you?order=<resp.uniqId>
   - else show error using resp.InternalDescription
2) if typeof event.data === 'number': set iframe height:
   document.getElementById('takbull_iframe').style.height = event.data + 'px'
Cleanup listener on component unmount

רוצים להתחיל לבנות? הכניסה ל-Lovable כאן: https://lovable.dev/