OPEN FIELDS

קוד לדוגמא - צד לקוח
https://github.com/CardCom/OpenFields-FrontEnd

קוד לדוגמא - צד שרת
https://github.com/CardCom/OpenFields-Backend-Node

🔐 מדריך לשילוב מודול Open Fields של CardCom

🖥️ צד לקוח (Frontend)

מודול זה מאפשר לשלב את שדות האשראי של CardCom בטופס שלכם בצורה מאובטחת.

מה המודול מאפשר:

1. לשלב את שדות כרטיס האשראי וה-CVV של CardCom בתוך הטופס שלך.

2. לעצב את שדות הקלט לפי העדפותיך (CSS מותאם אישית).

3. לבצע תשלום מאובטח בהתאם לתקן PCI.

4. להשתמש במודול 3D Secure לאימות נוסף.

שלבי עבודה:

1. יצירת עסקה מסוג LowProfile

   בכל פעם שתשלח טופס תשלום, יש ליצור עסקה חדשה מסוג LowProfile. זהו מזהה ייחודי (lowProfileCode) שילווה את התשלום.

2. האזנה להודעות מה-iFrame

   המודול משתמש ב-PostMessage לצורך תקשורת בין הדף שלך ל-iFrame. כל הודעה מכילה שם פעולה (action name). הודעות ללא שם פעולה הן חלק מתהליך 3D Secure ויש להתעלם מהן.

סוגי פעולות (Actions):

• מהמשתמש:

  • init – לאתחול ה־iframe. יש לשלוח את lowProfileCode, CSS מותאם, ואת האלמנט שבו יופיע שדה הקלט (בתוך איזה אלמנט HTML בדף שלך למקם את ה-iFrame של השדה).

  • doTransaction – שליחת התשלום בפועל. יש לצרף: CVV, תוקף, תשלומים, ופרטי משתמש (שם, כתובת וכו').

• מהמערכת:

  • HandleSubmit – מכיל מידע על ביצוע התשלום.

  • HandleError – מחזיר שגיאות.

📌 שמות מזהי iframe חובה:

• CardComMasterFrame

• CardComCardNumber

• CardComCvv

• CardComCaptchaIframe

🛠️ צד שרת (Backend)

שרת Node.js פשוט לדימוי יצירת עסקת LowProfile.

דרישות:

• NodeJS (המדריך נכתב עם v18.15.0)

שלבים:

1. התקנת תלויות:

   npm install
   

2. הרצת הקובץ הראשי:

   node example
   

הערות:

• בקובץ config.json מוגדר ברירת מחדל למסוף בדיקות של CardCom (ללא חיוב בפועל).

• לפני העלאה לפרודקשן:

  • שלבו את הלוגיקה הזו בצד השרת שלכם.

  • החליפו למסוף האמיתי שלכם (production terminal).

📱 אינטגרציה עם Google Pay (ארנקים דיגיטליים)

תהליך התשלום

• Google Pay מבצע את הרכישה ומפנה אוטומטית ל-Cardcom.

• התשובה חוזרת באותה צורה כמו תשלום בכרטיס אשראי רגיל.

• אין צורך לבצע קריאה ל-doTransaction – לאחר קבלת הפרטים מגוגל, התהליך נמשך אוטומטית מול Cardcom.

• על מנת שהגוגל פיי יעבוד כראוי חייב לעדכן את פרטי בעל הכרטיס כפי שכתוב בלשונית "עדכון פרטי בעל הכרטיס (חייב)"

ניהול תגובות

• יש לטפל בתשובה דרך הפונקציות:

  • handleSubmit

  • handleError

עדכון פרטי בעל הכרטיס (חייב)

• על מנת שתהליך החיוב של GOOGLE PAY & 3D Secure יצליח, נדרשים פרטים ש-Google Pay לרוב לא מספק:

  • שם בעל הכרטיס

  • טלפון

  • אימייל

עדכון הפרטים לפני התשלום (חייב):

יש להשתמש בפונקציה הבאה לשם עדכון הנתונים בשביל 3DS ב-iframe:

iframe.contentWindow.postMessage({ action: 'setCardOwnerDetails', data }, '*')                                                     על מנת לעדכן פרטים אלו טרם התשלום בגוגל פיי. אין צורך לפנות ל doTransaction, לאחר קבלת הפרטים מגוגל התהליך ימשיך אוטומטי ויפנה לקארדקום להשלמת העסקה.

עיצוב CSS  ב 3 דרכים :