FAQs

Frontend

• Template Framework: Crafto Bootstrap 5 HTML (ThemeZaa)
• Languages: HTML5 / CSS3 / JavaScript (vanilla, Bootstrap)
• UX Enhancements: Animated loading overlay (loadingOverlay.show), Bootstrap modals for success confirmation, responsive vehicle cards & accordions, AJAX integration for CRM calls

Backend

• Stack: PHP 8+ (tested on XAMPP / Apache)
• Data Handling: $_POST payload validated and sanitized; bank response ($pre, $fin, $grid) mapped to PHP arrays; Session variables ($_SESSION['crm_lead']) store CRM-ready payload
• Security: CSRF protection for AJAX ($_SESSION['csrf_token']); no direct API credentials exposed client-side; HTTPS recommended for all production deployments

API Integrations

a) Bank API

• Endpoint: Secure HTTPS URL provided by WesBank.
• Headers: Authorization: Basic base64(username:password), x-api-key: [Bank Key]
• Request Payload: JSON with customer, income, and vehicle data.
• Response: JSON containing approval status, affordability, interest rates, and optional score grid.

b) Salesforce CRM

• Configurable modes (in config.php):
  1. Web-to-Lead (default): uses oid + retURL to post form data directly.
  2. REST API: supports OAuth Bearer token and object insertion (Lead).
• Payload Mapping: Standard fields: first_name, last_name, email, phone, lead_source, description. Description field aggregates pre-approval summary (affordability, rates, MM code, etc.). Optional custom fields can be mapped via SF Field IDs (Web-to-Lead) or API names (REST).

User → index.php → preapprove.php → WesBank API
                                  ↓
                            Response stored in $_SESSION
                                  ↓
                         User clicks “Contact Me”
                                  ↓
                     AJAX → crm_submit.php → Salesforce CRM
                                  ↓
                          Modal confirms success

• index.php – Main customer-facing form, pre-filled for testing, includes spinner logic.
• preapprove.php – Handles API submission to WesBank, parses results, and formats display.
• pdf_export.php – Generates downloadable PDF summary of pre-approval using ReportLab.
• crm_submit.php – Submits lead data to Salesforce (Web-to-Lead or REST API).
• config.php – Holds credentials and environment variables (API keys, Salesforce config).
• js/recommendations.render.js – Dynamically loads and filters recommended vehicles under user affordability limit.
• assets/ – Logos, vehicle images, and styling files.

• Affordability Logic: When $affordableAmount > 0, system dynamically filters vehicles from the recommendations JS array. Only vehicles ≤ affordable amount are displayed.
• Score Grid Logic: The full bank score grid is shown as an accordion. Each term (e.g., 36/48/60 months) is collapsible for better UX and reduced page length.
• Finance Summary Logic: Summarized as compact bullet-style lists with key metrics: monthly installment, term, deposit, balloon, etc.
• PDF Export: All fields (customer + finance + bank response) compiled into a clean PDF format. Useful for CRM uploads or offline reference.
• CRM Submit Trigger: Occurs only after user consent via “Contact Me.” No automatic background submission before consent.

• Bank Errors: If authentication or payload issues occur, system displays "Invalid authentication credentials" with logged response (in dev mode).
• CRM Errors: Modal shows fallback text: “We have your details and will still contact you.” Lead data remains in $_SESSION['crm_lead'] until session expiry.
• Session Timeout: On expiry, user must re-submit form. For production, session lifespan can be extended in php.ini or via cookies.

• Brand Scalability: Easily rebranded for Peugeot, Opel, Jeep, Fiat, Alfa Romeo by swapping theme assets and brand-specific configs.
• CRM Flexibility: Switch between Salesforce, CMS API, or Stellantis DMS with minimal endpoint changes.
• Testing Sandbox: Pre-filled test data supports API sandboxing for QA without impacting live systems.
• Vehicle Data Expansion: recommendations.render.js can pull from a JSON feed or API for automatic updates.
• Audit Trail: Optional MySQL logging can be enabled for compliance tracking (timestamped leads, status codes, and correlation IDs).

The user submits the pre-approval → preapprove.php handles API call and renders results. They click Contact me → modal opens, AJAX calls crm_submit.php. crm_submit.php retrieves stored session data and submits to Salesforce. Modal confirms success / fallback message. Even on API failure, data remains recoverable in the PHP session for manual follow-up.