לדלג לתוכן הראשי

הטמעת ה-UI של Open Finance ב-iframe

איך מטמיעים את תהליך החיבור או התשלום של Open Finance בתוך iframe, כולל אירועי postMessage.

נכתב על ידי Eliron Giny

אפשר להטמיע את ה-UI המתארח של Open Finance (חיבור או תשלום) בתוך iframe באתר שלך, במקום להפנות את המשתמש לעמוד חיצוני.


הפעלה

בעת יצירת הקישור, הוסף iframe=true ל-query params של ה-URL (למשל ה-payUrl שמתקבל מ-/v2/payments), והצב אותו ב-src של ה-iframe.


אתחול ואירועים

התקשורת בין העמוד שלך לבין ה-iframe נעשית דרך postMessage. הגדר callbacks:

openFinance.init({ onApprove, onAbort, onFailed })
openFinance.start(connectUrl)

סוגי האירועים

  • success – המשתמש השלים את התהליך והתחבר לבנק.

  • fail – אירעה שגיאה בתהליך.

  • close – המשתמש סגר את התהליך בשלב מסוים.

  • redirectToBank – המשתמש מופנה לבנק.

כל אירוע כולל payload כמו userId, connectionId, connectionStatus, פרטי שגיאה, והשלב שבו אירע.


תצוגה

בדוגמה ב-docs, ה-iframe מעוצב ללא גבולות ובתוך container במיקום קבוע (modal) עם רקע שקוף, לתצוגת מסך מלא.


תיעוד מלא וקוד לדוגמה

האם קיבלת תשובה לשאלתך?