Skip to content

Component Name: i2cCheckoutPayment

Last Updated: 2025-10-22 Source Code: https://github.com/AANP-IT/I2C.Salesforce.Metadata/tree/STAGING/force-app/main/default/lwc/i2cCheckoutPayment

API Name: c-i2cCheckoutPayment Type: Form Component (Payment Processing) Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose

This component handles the complete checkout payment process for AANP's e-commerce platform, including credit card processing, billing address collection, and order conversion. It serves as the final step in the customer purchase journey, directly impacting revenue collection and customer satisfaction. The component integrates with Chargent payment gateway for secure credit card processing and supports both paid and zero-dollar checkout flows.

User Interface

Visual Description

  • Layout: Vertical single-column form with sections for payment and billing information
  • Key UI Elements:
  • Loading Spinner: Full-page overlay during initialization and payment processing
  • Error Alert: Red notification banner for payment failures (SLDS alert styling)
  • Card Information Section:
    • Card number input with dynamic card type icon (Visa, MasterCard, Discover, Amex)
    • Cardholder name input
    • Expiration date (mm/yy) and security code (CVV) in 2-column grid
    • Optional "Save this payment method for auto-renewals" checkbox
  • Billing Information Section:
    • Country dropdown (pre-filled from account)
    • Address line 1 & 2 inputs
    • City and State/Province in 2-column grid (state label dynamic based on country)
    • ZIP/Postal code input
  • Place Order Button: Full-width blue button at bottom (disabled during processing)
  • Hidden Elements:
    • Amount field (hidden but required by Chargent)
    • SCA iframe (Strong Customer Authentication, hidden but active during 3DS)
  • Responsive:
  • Single column layout optimized for all screen sizes
  • 2-column grids for card expiration/CVV and city/state fields
  • Full-width button for easy mobile interaction

Screenshots

  • Desktop view: Clean vertical form with clear sections and SLDS styling
  • Mobile view: Same layout, optimized for touch interaction
  • Loading state: Full-page spinner blocks interaction during processing
  • Error state: Red alert banner above form with error message
  • Zero-dollar state: Card information section hidden, only billing info shown

Component Structure

Files

  • i2cCheckoutPayment.html - Template/markup
  • i2cCheckoutPayment.js - JavaScript controller
  • i2cCheckoutPayment.css - Custom styling
  • i2cCheckoutPayment.js-meta.xml - Metadata configuration

HTML Template Structure

<template>
  <div class="checkout-container">
    <!-- Loading spinner -->
    <template lwc:if={loading}>
      <lightning-spinner />
    </template>

    <!-- Error message -->
    <template lwc:if={chargentErrorMessage}>
      <div class="slds-alert_error">...</div>
    </template>

    <!-- Card Information Section (hidden for zero-dollar) -->
    <div class="card-info-section">
      <!-- Card number with type icons -->
      <div lwc:dom="manual" data-id="cardNumber"></div>
      <div lwc:dom="manual" data-id="cardTypeImg"></div>

      <!-- Cardholder name -->
      <div lwc:dom="manual" data-id="nameOnCard"></div>

      <!-- Expiration and CVV (2-column grid) -->
      <div class="slds-grid slds-wrap">
        <div lwc:dom="manual" data-id="cardExp"></div>
        <div lwc:dom="manual" data-id="cardCVC"></div>
      </div>

      <!-- Save payment method checkbox (conditional) -->
      <template lwc:if={showSavePaymentMethod}>
        <lightning-input type="checkbox" />
      </template>
    </div>

    <!-- Billing Information -->
    <h4>Billing Info</h4>
    <div lwc:dom="manual" data-id="billingCountry"></div>
    <div lwc:dom="manual" data-id="billingAddressLine"></div>
    <div lwc:dom="manual" data-id="billingAddressLine2"></div>
    <div class="slds-grid">
      <div lwc:dom="manual" data-id="billingCity"></div>
      <div lwc:dom="manual" data-id="billingState"></div>
    </div>
    <div lwc:dom="manual" data-id="billingZip"></div>

    <!-- Hidden amount field -->
    <div lwc:dom="manual" data-id="amount" class="amount-container"></div>

    <!-- Place Order button -->
    <button data-button-type="ChargeButton">Place Order</button>
  </div>

  <!-- SCA Component (hidden, for 3DS authentication) -->
  <div lwc:if={loadSCAIframe} style="display:none">
    <chargentbase-sca-component lwc:ref="scaComponent" />
  </div>
</template>

Key Template Features: - Extensive use of lwc:dom="manual" for Chargent library DOM manipulation (bypasses LWC security) - Conditional rendering for loading states, errors, and zero-dollar checkout - SLDS classes for consistent styling (alert, grid, form elements) - Manual DOM manipulation for all payment and billing fields - Hidden SCA iframe for 3D Secure authentication flows - Dynamic state/province label based on selected country

JavaScript Controller

Properties (API)

No public @api properties - this is a page component with no external configuration.

Tracked Properties

@track accountId

  • Type: String
  • Purpose: Stores the current user's Account ID
  • Updated When: Set from CartSummaryAdapter wire method

@track val

  • Type: Object
  • Purpose: Stores validation error messages for card fields
  • Updated When: Validation failures occur (currently not actively used)
  • Structure: 
    {
  cardNumError: '',
  cardNameError: ''
}

Non-Tracked Properties

orderId

  • Type: String
  • Purpose: Salesforce Order ID created from cart conversion
  • Updated When: Set after successful convertCartToOrder() call

cartId

  • Type: String
  • Purpose: Salesforce WebCart ID being checked out
  • Source: CartSummaryAdapter

webstoreId

  • Type: String
  • Purpose: Webstore ID for the current commerce site
  • Source: CartSummaryAdapter

showSpinner

  • Type: Boolean
  • Default: false
  • Purpose: Controls secondary spinner display (not actively used)

loadSCAIframe

  • Type: Boolean
  • Default: false
  • Purpose: Controls when to load the SCA (3D Secure) iframe
  • Updated When: Set to true after order creation, before payment processing

isChargeButtonDisabled

  • Type: Boolean
  • Default: false
  • Purpose: Disables Place Order button on payment failure
  • Updated When: Set to true if SCA response status is 403

selectedPaymentMethod

  • Type: String
  • Default: "Credit Card"
  • Purpose: Payment method type (currently only supports credit card)

grandTotal

  • Type: String
  • Default: '0.00'
  • Purpose: Cart total amount
  • Source: CartSummaryAdapter

chargentErrorMessage

  • Type: String
  • Purpose: Displays payment processing errors to user

loading

  • Type: Boolean
  • Default: true
  • Purpose: Controls main loading spinner display

saveMethod

  • Type: Boolean
  • Default: false
  • Purpose: User's choice to save payment method for auto-renewal

showSavePaymentMethod

  • Type: Boolean
  • Default: false
  • Purpose: Controls visibility of "Save payment method" checkbox
  • Logic: Shown if (Auto_Renew_Selected OR Auto_Renew) AND no existing payment method

autoRenew

  • Type: Boolean
  • Purpose: Account's auto-renewal setting
  • Source: Account.Auto_Renew__c field

subscriptionProductInCart

  • Type: Boolean
  • Purpose: Indicates if cart contains a renewal/subscription product
  • Source: isRenewalProductInCart() Apex call

account

  • Type: Object
  • Purpose: Stores full account record data
  • Source: getRecord wire adapter

STATES_BY_COUNTRY

  • Type: Object
  • Purpose: Stores state/province options by country
  • Source: Loaded from static resource via window.STATES_BY_COUNTRY

stateProvinceLabel

  • Type: String
  • Purpose: Dynamic label for state/province field ("State" or "Province/Region")

retryCount

  • Type: Number
  • Default: 0
  • Purpose: Tracks retry attempts for "custom checkout not enabled" error

Wire Adapters

@wire(CartSummaryAdapter)

@wire(CartSummaryAdapter)
setCartSummary({ data, error }) {
    if (data) {
        this.cartId = data.cartId;
        this.webstoreId = data.webstoreId;
        this.grandTotal = data.grandTotalAmount;
        this.accountId = data.accountId;
        // Check for subscription products
        isRenewalProductInCart({cartId: data.cartId})...
    }
}

Purpose: Retrieves current cart information Fields Retrieved: - cartId - WebCart ID - webstoreId - Commerce webstore ID - grandTotalAmount - Cart total - accountId - Buyer account ID

Error Handling: Logs to console on error

Side Effects: Triggers Apex call to check for renewal products in cart

@wire(getRecord, { recordId, fields })

@wire(getRecord, {
    recordId: '$accountId',
    fields: [AUTO_RENEW, AUTO_RENEW_SELECTED, AUTO_RENEW_PAYMENT_METHOD,
             MAILING_COUNTRY_FIELD, MAILING_STREET_COUNTRY_FIELD, ...]
})
wiredAccount({ data, error }) {
    if (data) {
        this.account = data;
        this.showSavePaymentMethod = ...;
        this.saveMethod = this.showSavePaymentMethod;
        this.autoRenew = data.fields.Auto_Renew__c.value;
        this.loadStates();
        this.configureChargent();
        // Hide card info for zero-dollar orders
    }
}

Purpose: Retrieves account data for billing and auto-renewal settings Fields Retrieved: - Auto_Renew__c - Auto-renewal enabled flag - Auto_Renew_Selected_In_Membership_Wizard__c - User selected auto-renewal in wizard - Auto_Renewal_Payment_Method__c - Existing saved payment method - PersonMailingCountry - Billing country - PersonMailingStreet - Billing address line 1 - PersonMailingCity - Billing city - PersonMailingState - Billing state/province - PersonMailingPostalCode - Billing ZIP/postal code

Error Handling: Logs to console on error

Side Effects: - Calls loadStates() to load state/province data - Calls configureChargent() to initialize payment form - Hides card info section if grandTotal is 0

Public Methods

None - component has no @api methods.

Event Handlers

handleCustomCheckoutOperation(event)

handleCustomCheckoutOperation(event){
    const operation = this.getOperationType(event);
    this.handleCheckoutOperation(operation);
}

Triggered By: Click on "Place Order" button Event Type: Click event Event Detail: event.target.dataset.buttonType contains 'ChargeButton' Action: Determines operation type and delegates to handleCheckoutOperation()

handleCheckoutOperation(operation)

Triggered By: handleCustomCheckoutOperation() or retry logic Parameters: operation ('Charge') Action: - If grandTotal > 0: 1. Validates payment form via chargentFields.buildPayForm() 2. Converts cart to order via Apex 3. Sets payment payload with order ID and amount 4. Loads SCA iframe and initiates payment - If grandTotal = 0: 1. Calls closeCart() Apex method 2. Redirects to order confirmation page

handleSCAResponse(event)

handleSCAResponse(event){
    let eventResponse = JSON.parse(event.detail)
    // Handle success (200), failure, or retry logic
}

Triggered By: SCA component after payment processing Event Type: Custom event 'response' from chargentbase-sca-component Event Detail: JSON string with { status, message } from Chargent Action: - Status 200 (Success): Delete cart, navigate to order confirmation - Status 403 (Failure): Disable charge button - "Custom checkout not enabled" error: Retry up to 15 times - Other errors: Display error message to user

handleSaveMethodToggle(event)

handleSaveMethodToggle(event){
    this.saveMethod = event.target.checked;
}

Triggered By: User toggling "Save payment method" checkbox Event Type: Click event on lightning-input checkbox Event Detail: event.target.checked - boolean Action: Updates saveMethod property for passing to convertCartToOrder()

Private Methods

loadStates()

Purpose: Loads state/province data from static resource Called By: wiredAccount() Implementation: Uses loadScript() to load States_by_Country static resource, assigns to window.STATES_BY_COUNTRY Error Handling: Logs to console on failure

configureChargent()

Purpose: Initializes Chargent payment form with all field configurations Called By: wiredAccount() Implementation: - Loads Chargent CSS and JavaScript via platformResourceLoader - Calls chargentFields.createPayform() with extensive configuration - Pre-fills billing address from account data - Maps Salesforce country names to Chargent format - Sets up country change listener for state/province updates - Calls overrideStateCountryOptions() to populate states

Error Handling: Promise rejection (not explicitly caught)

overrideStateCountryOptions()

Purpose: Dynamically populates state/province dropdown based on selected country Called By: configureChargent(), country change event listener Implementation: - Uses setTimeout(300ms) to wait for DOM updates - Gets selected country from dropdown - Updates stateProvinceLabel ("State" vs "Province/Region") - Retrieves options from STATES_BY_COUNTRY - Sorts options alphabetically - Clears and rebuilds state dropdown - Pre-selects matching value from account or first option

Side Effects: Direct DOM manipulation of select element

getOperationType(event)

Purpose: Maps button click to operation type string Called By: handleCustomCheckoutOperation() Parameters: event with dataset.buttonType Returns: 'Charge' string Implementation: Switch statement (only handles 'ChargeButton' case)

connectedCallback()

Not implemented - initialization handled via wire adapters.

Events

Events Dispatched

None - this component does not dispatch custom events.

Events Handled

response (from chargentbase-sca-component)

Source: Chargent Base SCA Component Purpose: Receive payment processing results Handler: handleSCAResponse(event) Event Detail: JSON string with status code and message

Styling (CSS)

CSS Variables Used

  • --dxp-g-spacing-xsmall - Spacing for input icons (fallback 0.5rem)

Custom CSS Classes

  • html { overflow: hidden; } - Prevents page scrolling during checkout
  • .card-input-label - Full width, no pointer events (Chargent manages clicks)
  • .slds-icon - 2rem x 2rem icon sizing
  • .slds-icon.slds-input__icon.slds-input__icon_left - 1.5rem x 1rem for input icons
  • .dynamic-card-image - 32px x 32px for card type logo
  • .hide - display: none utility class
  • .slds-has-error - Red border for invalid fields (!important override)
  • .billing-info-title - 22px font size for section header
  • .hidden - display: none utility class
  • body.loading { display: none; } - Hides body during load

SLDS Classes

  • slds-form-element - Form field wrapper
  • slds-form-element__label - Form labels
  • slds-form-element__control - Input control wrapper
  • slds-required - Required field indicator (*)
  • slds-grid, slds-wrap, slds-gutters - Grid layout system
  • slds-col, slds-size_1-of-2 - Column sizing
  • slds-button, slds-button_brand, slds-button_stretch - Button styling
  • slds-notify, slds-notify_alert, slds-alert_error - Error alert
  • slds-text-body_small, slds-text-color_error - Text utilities
  • slds-icon_container, slds-assistive-text - Icon and accessibility

Responsive Breakpoints

  • Component uses SLDS grid system with natural responsiveness
  • 2-column grids collapse to single column on small screens automatically
  • No explicit media queries in component CSS

Dependencies

Lightning Web Components (Base)

  • LightningElement - Base class
  • api, track, wire - Decorators
  • NavigationMixin - For post-payment navigation
  • lightning-spinner - Loading indicator
  • lightning-input - Checkbox for save payment method
  • platformResourceLoader (loadStyle, loadScript) - Static resource loading

Custom LWC Components

  • chargentbase-sca-component - Strong Customer Authentication iframe component

Apex Classes

  • I2C_PaymentCheckoutController:
  • convertCartToOrder(cartId, saveFutureMethod) - Converts cart to order, returns orderId and orderName
  • isRenewalProductInCart(cartId) - Checks if cart contains subscription products
  • deleteCart(webcartId) - Deletes cart after successful payment
  • ZeroDollarCheckout.closeCart(userId) - Processes zero-dollar orders, returns order number

Salesforce Objects & Fields

  • Account:
  • Auto_Renew__c - Auto-renewal enabled flag
  • Auto_Renew_Selected_In_Membership_Wizard__c - User selected auto-renewal
  • Auto_Renewal_Payment_Method__c - Existing payment method ID
  • PersonMailingCountry - Billing country
  • PersonMailingStreet - Billing address
  • PersonMailingCity - Billing city
  • PersonMailingState - Billing state/province
  • PersonMailingPostalCode - Billing ZIP/postal
  • Order: Created from cart conversion
  • WebCart: Source cart for checkout

Static Resources

  • ChargentBase__ChargentCustomCheckout - Chargent payment form library (CSS & JS)
  • ChargentBase__AppFrontier_Assets - Card type images and assets
  • States_by_Country - State/province options by country

Labels

All text hardcoded (no custom labels): - "Card Number", "Card Holder Name", "mm/yy", "Security Code" - "Save this payment method for auto-renewals" - "Billing Info", "Country", "Address Line 1", "Address Line 2", "City", "State", "Province/Region", "ZIP" - "Place Order" - Error messages

Community Services

  • @salesforce/community/basePath - Base URL for order page navigation
  • @salesforce/user/Id - Current user ID

Commerce APIs

  • commerce/cartApi (CartSummaryAdapter) - Cart data retrieval

Third-Party Libraries

  • Chargent Payment Gateway:
  • chargentFields.createPayform() - Initialize payment form
  • chargentFields.buildPayForm() - Validate and build payment payload
  • Global window object manipulation

Configuration

Component Meta XML

<targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>

Available On: - Experience Builder pages - Community/Portal pages

Design Properties

None - no configurable properties in App Builder.

User Interactions

Actions Available to Users

  1. Enter Credit Card Information
  2. Trigger: Type in card fields (number, name, expiration, CVV)

  3. Result: Real-time validation by Chargent, card type auto-detection, visual feedback

  4. Select/Change Billing Country

  5. Trigger: Select from country dropdown

  6. Result: State/Province dropdown updates with country-specific options, label changes ("State" vs "Province/Region")

  7. Enter Billing Address

  8. Trigger: Type in address fields

  9. Result: Data captured for payment processing, fields pre-filled from account

  10. Toggle "Save Payment Method"

  11. Trigger: Check/uncheck checkbox (only visible if eligible)

  12. Result: Payment method saved to account for future auto-renewals if checked

  13. Place Order

  14. Trigger: Click "Place Order" button
  15. Result:
    • Loading spinner displayed
    • Payment validated
    • Cart converted to order
    • Payment processed via Chargent
    • 3D Secure authentication if required
    • Navigate to order confirmation on success
    • Error message displayed on failure

Validation & Error Handling

Client-Side Validation: - Card Number: Format validation, card type detection, Luhn algorithm check (via Chargent) - Cardholder Name: Required field - Expiration Date: Format validation (MM/YY), future date check - CVV: Length validation based on card type (3-4 digits) - Billing Address: All fields required except Address Line 2 - Country: Required selection - State/Province: Required selection (dynamically loaded options) - ZIP/Postal Code: Required field

Error Messages: - Missing/Invalid Payment Data: "Missing or invalid data entered" (console only, no user message) - Payment Processing Failure: Specific message from Chargent displayed in red alert banner - Custom Checkout Not Enabled: "There was a problem processing your payment. Please try again later." (after 15 retry attempts) - General Error: Chargent error message displayed verbatim

Loading States: - Initial Load: Full-page spinner while configuring Chargent - Payment Processing: Loading spinner blocks interaction during conversion and payment - Button Disabled: Place Order button disabled on failure (status 403)

Data Flow

Input Data Flow

CartSummaryAdapter
    ↓
Cart data (cartId, total, accountId)
    ↓
getRecord (Account)
    ↓
Account data (billing address, auto-renewal settings)
    ↓
configureChargent()
    ↓
Chargent form pre-filled with account data
    ↓
User enters/modifies payment data

Output Data Flow

User clicks Place Order
    ↓
chargentFields.buildPayForm() validates input
    ↓
convertCartToOrder() Apex call
    ↓
Order created in Salesforce
    ↓
Payment payload built with order ID
    ↓
SCA component processes payment with Chargent
    ↓
handleSCAResponse() receives result
    ↓
Success: deleteCart() → Navigate to order page
Failure: Display error message

State/Province Dynamic Loading Flow

User selects country
    ↓
Country change event fires
    ↓
overrideStateCountryOptions() called
    ↓
STATES_BY_COUNTRY[selectedCountry] retrieved
    ↓
Options sorted alphabetically
    ↓
State dropdown rebuilt with new options
    ↓
Matching account state pre-selected

Zero-Dollar Checkout Flow

grandTotal = 0 detected
    ↓
Card info section hidden via CSS
    ↓
User fills billing info only
    ↓
Place Order clicked
    ↓
closeCart() Apex bypasses payment
    ↓
Navigate to order page with order number

Performance Considerations

Render Optimization: - Uses conditional rendering to hide/show sections - Manual DOM manipulation (lwc:dom="manual") for Chargent fields - SCA iframe loaded only when needed (after order creation)

Data Volume: - Single cart checkout, minimal data - Account record loaded once via wire - Static resource loaded once per session

API Call Optimization: - Wire adapters provide caching for cart and account data - Imperative Apex calls for order conversion and cart deletion - Retry logic for race conditions (up to 15 attempts) - Consideration: Multiple setTimeout calls could impact performance on slow devices

Resource Loading: - Chargent CSS and JS loaded asynchronously - States static resource loaded separately - SVG icons inline in template (no additional requests)

Accessibility (a11y)

ARIA Labels: - Form labels use SLDS label classes - Required fields marked with <abbr class="slds-required">* </abbr> - Card type icons have slds-assistive-text for screen readers - Gap: Manual DOM fields lack proper ARIA attributes

Keyboard Navigation: - All inputs keyboard accessible (managed by Chargent) - Tab order: Natural DOM order through form fields - Button keyboard accessible - Gap: Manual DOM manipulation may break keyboard navigation for payment fields

Screen Reader Support: - Labels associated with fields (via SLDS patterns) - Loading spinner has alternative-text="Loading" - Error messages in alert role container - Gap: Dynamic state dropdown changes not announced - Gap: SCA iframe interactions not screen reader friendly

Color Contrast: - SLDS components meet WCAG AA standards - Error red border color provides sufficient contrast - Button color (SLDS brand) meets contrast requirements - Passes WCAG AA: Likely yes for SLDS components, manual fields need audit

Focus Management: - No explicit focus management - Gap: Focus not moved to error messages on validation failure - Gap: Focus not returned to form after SCA authentication

Testing

Jest Tests

Test File: Not present in repository Coverage: 0% - No tests found

Recommended Test Scenarios: - [ ] Component renders correctly with cart data - [ ] Account data loads and pre-fills billing fields - [ ] Card info section hidden for zero-dollar orders - [ ] State dropdown updates when country changes - [ ] Save payment method checkbox visibility logic - [ ] Payment validation triggers on Place Order - [ ] Cart converts to order on valid payment - [ ] SCA component receives correct payload - [ ] Success navigation to order page - [ ] Error messages display correctly - [ ] Retry logic for "custom checkout not enabled" - [ ] Zero-dollar checkout bypasses payment - [ ] Country mapping (US, UK) works correctly

Manual Testing Checklist

  • [ ] Desktop browser (Chrome, Firefox, Safari)
  • [ ] Mobile browser (iOS Safari, Android Chrome)
  • [ ] Tablet view
  • [ ] Valid credit card payment flow
  • [ ] Invalid card number rejection
  • [ ] Expired card rejection
  • [ ] CVV mismatch handling
  • [ ] 3D Secure authentication flow
  • [ ] Zero-dollar checkout flow
  • [ ] All countries in dropdown
  • [ ] State/province options for US, Canada, UK
  • [ ] Save payment method checkbox scenarios
  • [ ] Pre-filled billing address from account
  • [ ] Modified billing address saves correctly
  • [ ] Error message display and dismissal
  • [ ] Button disabled state after failure
  • [ ] Navigation to order confirmation
  • [ ] Cart deletion after successful payment

Usage Examples

In Experience Builder

  1. Drag "[I2C] Custom Checkout Payments" component to checkout payment page
  2. Component has no configuration properties
  3. Ensure page is part of checkout flow (after cart review)
  4. Save and activate page

In Parent Component

Not designed for embedding - standalone checkout component.

Programmatic Access

Not applicable - no public @api methods.

Changes & History

Current Implementation Notes: - Class name "CustomCheckoutExample" is misleading (production code) - Uses Chargent Base package for payment processing - Implements retry logic for race condition errors - Hardcoded company name "AANP" in payment payload - Country mapping for US and UK to match Chargent format

⚠️ Pre-Go-Live Concerns

CRITICAL - Fix Before Go-Live

  • Security Vulnerability: Extensive use of lwc:dom="manual" bypasses Lightning's XSS protection and security features - requires thorough security review
  • PCI Compliance: Manual DOM manipulation with payment data may violate PCI DSS requirements - verify with compliance team
  • Hard-coded Company Name: "AANP" hardcoded on line 288 - should be configurable or derived from org settings
  • Error Handling Gap: No comprehensive error handling for Apex failures - users see generic errors or blank screen
  • Race Condition Masking: Retry logic (15 attempts) for "custom checkout not enabled" masks underlying configuration issues

HIGH - Address Soon After Go-Live

  • Accessibility Violations: Manual DOM manipulation breaks WCAG compliance for payment fields - no ARIA support
  • Loading State Confusion: Multiple loading indicators (loading, showSpinner, isChargeButtonDisabled) could confuse users
  • Browser Compatibility: Heavy reliance on external Chargent JavaScript may not work consistently across all browsers
  • Payment Method Validation: Limited client-side validation could allow invalid payment data submission
  • Testing: No automated tests - critical payment component is completely untested
  • Internationalization: All text hardcoded - no support for multiple languages

MEDIUM - Future Enhancement

  • Code Organization: 369-line component should be broken into smaller, focused components (card info, billing info, payment processing)
  • State Management: Consider using Lightning Data Service for better data consistency
  • Performance: Multiple setTimeout calls (300ms, 2000ms) create unnecessary delays
  • Error Messages: Externalize to custom labels for easier maintenance
  • Country Mapping: countryMap should be in configuration or custom metadata
  • Class Naming: Rename "CustomCheckoutExample" to reflect production usage
  • Unused Properties: showSpinner property never set to true

LOW - Monitor

  • Console Logging: Production code contains console.log and console.error statements
  • CSS Dependencies: External Chargent CSS loading could cause styling inconsistencies
  • Magic Numbers: Hardcoded timeouts (300ms, 2000ms) and retry count (15) should be constants
  • Component Naming Inconsistency: File name uses camelCase, class uses PascalCase

Maintenance Notes

Complexity: High - Complex payment processing with multiple integration points Recommended Review Schedule: Monthly security and compliance review

Key Maintainer Notes: - CRITICAL: This component handles payment data - any changes require security review - PCI compliance depends on Chargent hosted fields implementation - Changes to Account mailing address fields will break pre-fill logic - Chargent library updates must be tested thoroughly before deployment - Cart to order conversion depends on I2C_PaymentCheckoutController Apex class - SCA iframe component from Chargent Base package must remain compatible - States_by_Country static resource must be kept up to date - Country dropdown options come from Chargent, not Salesforce - Auto-renewal logic depends on multiple Account fields - Zero-dollar checkout uses completely different flow (ZeroDollarCheckout Apex)

Browser Compatibility: - Chrome: 90+ - Firefox: 88+ - Safari: 14+ - Mobile: iOS 14+, Android 10+ - Requires JavaScript enabled - Requires iframe support (for 3D Secure)

Security Considerations: - CRITICAL: Regular security audits required due to payment data handling - Monitor for Chargent security advisories and patches - Ensure PCI DSS compliance maintained - Review manual DOM manipulation for XSS vulnerabilities - Rate limiting should be implemented at Apex level - Monitor for payment fraud patterns - Ensure SSL/TLS certificates valid - Review Chargent tokenization implementation

Dependency Management: - Chargent Base package version must be monitored - Salesforce Commerce Cloud API compatibility - Static resources must be version controlled - Test thoroughly with Salesforce seasonal releases