Component Name: i2cPaymentMethods¶

Last Updated: 2025-10-22 Source Code: .temp-staging-flows/force-app/main/default/lwc/i2cPaymentMethods/

API Name: c-i2cPaymentMethods Type: Form Component Target: lightning__FlowScreen

Business Purpose¶

The i2cPaymentMethods component provides a secure, interactive payment method management interface for AANP customers. It features a 3D-style credit card visualization that flips to show front/back details with live preview of entered data. The component handles both one-time payment collection and stored payment method updates for auto-renewal subscriptions, processing payments through the Chargent payment gateway with tokenization support.

User Interface¶

Visual Description¶

Layout: Two-column layout with interactive credit card visualization on left and input form on right
Key UI Elements:
Interactive SVG credit card with flip animation (front shows card number/name/expiry, back shows CVV)
Input fields for cardholder name, card number, expiration date (MM/YY), and CVV
Real-time card type detection icon (Visa, Mastercard, Discover, Amex)
Update/Save/Cancel/Submit Payment buttons depending on mode
Loading spinner during processing
Error messages displayed below each field
Alert banner for payment errors
Responsive: Stacks vertically on mobile, maintains card visualization proportions

Screenshots¶

Desktop view: Full-width card display with side-by-side form
Mobile view: Vertical stack with responsive card sizing

Component Structure¶

Files¶

i2cPaymentMethods.html - Template/markup with SVG credit card graphics
i2cPaymentMethods.js - JavaScript controller with payment logic
i2cPaymentMethods.css - Extensive styling for card animation and form
i2cPaymentMethods.js-meta.xml - Metadata configuration for Flow Screen

HTML Template Structure¶

<template>
    <div class="loadingContainer">
        <lightning-spinner lwc:if={loading}></lightning-spinner>
        <article class="slds-card">
            <div class="slds-card__header">
                <!-- Header with update button for stored cards -->
                <template lwc:if={paymentError}>
                    <!-- Error alert -->
                </template>
            </div>
            <div class="slds-card__body">
                <div class="container">
                    <div class="creditcard" onclick={handleFlip}>
                        <div class="front">
                            <!-- SVG credit card front -->
                        </div>
                        <div class="back">
                            <!-- SVG credit card back -->
                        </div>
                    </div>
                </div>
                <template lwc:if={editMode}>
                    <div class="form-container">
                        <!-- Input fields for name, card number, expiry, CVV -->
                    </div>
                </template>
            </div>
            <div class="slds-card__footer">
                <!-- Update/Save/Cancel or Submit Payment buttons -->
            </div>
        </article>
    </div>
</template>

Key Template Features: - Conditional rendering with lwc:if for edit/view modes - Complex SVG graphics for credit card visualization - Live data binding to display card details in real-time - Separate button layouts for stored payment updates vs. new payments

JavaScript Controller¶

Properties (API)¶

@api accountId¶

Type: String
Required: Yes (for stored payment mode)
Default: undefined
Description: Salesforce Account ID used to retrieve and store payment methods

Example Usage:

<c-i2c-payment-methods account-id="0011234567890ABC"></c-i2c-payment-methods>

@api cardNumber¶

Type: Integer
Required: No
Default: Empty string
Description: Credit card number (16 digits). When displaying stored cards, shows masked format (****1234)

@api cardholderName¶

Type: String
Required: No
Default: Empty string
Description: Full name as it appears on the credit card

@api expiryMonth¶

Type: Integer
Required: No
Default: undefined
Description: Card expiration month (1-12)

@api expiryYear¶

Type: Integer
Required: No
Default: undefined
Description: Card expiration year (2-digit format)

@api cvv¶

Type: Integer
Required: No
Default: Empty string
Description: Card verification value (3-4 digits depending on card type)

@api cardType¶

Type: String
Required: No
Default: undefined
Description: Card type (Visa, Mastercard, Discover, Amex). Must match Chargent Card Type picklist values

@api displayModifiedValues¶

Type: Boolean
Required: No
Default: false
Description: When true, renders component in edit mode with modified values instead of loading stored payment method

@api paymentOnly¶

Type: Boolean
Required: No
Default: false
Description: When true, component operates in payment collection mode rather than stored payment method management

@api paymentAmount¶

Type: Number
Required: No (but recommended when paymentOnly=true)
Default: undefined
Description: Amount to charge when processing one-time payment

Tracked Properties¶

loading¶

Type: Boolean
Purpose: Controls spinner visibility during async operations
Updated When: During payment processing, data loading, and API calls

editMode¶

Type: Boolean
Purpose: Controls whether input form is displayed
Updated When: User clicks Update button, or component initializes in payment-only mode

viewMode¶

Type: Boolean
Purpose: Controls whether Update button is displayed for stored payment methods
Updated When: Toggled when entering/exiting edit mode

paymentError¶

Type: String
Purpose: Stores error message to display in alert banner
Updated When: Payment processing fails or validation errors occur

cardNumberError, cvvError, expirationDateError, pastExpirationDateError, cardNameMissingError¶

Type: String
Purpose: Field-specific validation error messages
Updated When: User leaves field (onblur) or submits form

Wire Adapters¶

@wire(getPaymentMethod, { accountId: '$accountId' })¶

@wire(getPaymentMethod, {accountId: '$accountId'})
existingPayment({data, error}){
    // Loads stored payment method for account
}

Purpose: Retrieves existing tokenized payment method from Chargent for the account Apex Method: I2C_PaymentMethodController.getPaymentMethod Fields Retrieved: Card type, last 4 digits, expiration date, cardholder name Error Handling: Displays error in paymentError property

Public Methods¶

None - Component is designed for Flow integration and manages all interactions internally.

Event Handlers¶

handleNameChange¶

handleNameChange(event){
    this.cardholderName = event.target.value;
}

Triggered By: Name input field oninput event Event Type: input Event Detail: User-entered cardholder name Action: Updates cardholderName property and live preview on credit card

handleCardNumberChange¶

handleCardNumberChange(event){
    // Validates and formats card number
    // Detects card type
    // Updates display
}

Triggered By: Card number input field oninput event Event Type: input Event Detail: Raw card number input Action: Validates format, detects card type (Visa/MC/Amex/Discover), updates card icon, formats display with spaces

handleExpUpdate¶

handleExpUpdate(event){
    // Formats MM/YY with auto-slash insertion
}

Triggered By: Expiration date input field oninput event Event Type: input Event Detail: Expiration date in MM/YY format Action: Auto-inserts slash after month, validates format

handleCvvUpdate¶

handleCvvUpdate(event){
    this.cvv = event.target.value;
}

Triggered By: CVV input field oninput event Event Type: input Event Detail: CVV code (3-4 digits) Action: Updates CVV property and flips card to back

handleFlip¶

handleFlip(event){
    // Toggles card front/back
}

Triggered By: Click on credit card visualization Event Type: click Event Detail: none Action: Toggles CSS class to flip card between front and back views

handleCardHolderLeave, handleCardNumberLeave, handleExpLeave, handleCvvLeave¶

Triggered By: User leaving field (blur event) Event Type: blur Event Detail: none Action: Performs field validation and sets error messages if validation fails

handleFocusFront¶

handleFocusFront(event){
    // Flips card to front
}

Triggered By: Focus on name or expiration date fields Event Type: focus Event Detail: none Action: Ensures card is showing front side

handleFocusCardNumber¶

handleFocusCardNumber(event){
    // Selects card number field and flips to front
}

Triggered By: Focus on card number field Event Type: focus Event Detail: none Action: Flips to front and selects all text in field

handleFocusCvv¶

handleFocusCvv(event){
    // Flips card to back
}

Triggered By: Focus on CVV field Event Type: focus Event Detail: none Action: Flips card to show back with CVV field

updateCardClicked¶

Triggered By: Update button click in view mode Event Type: click Action: Switches from view mode to edit mode, enables form fields

handleCancelClicked¶

Triggered By: Cancel button click in edit mode Event Type: click Action: Reverts changes, returns to view mode, restores original values

handleSaveClicked¶

Triggered By: Save button click in edit mode (stored payment update) Event Type: click Action: Validates form, calls Apex to update stored payment method in Chargent

handleSubmitClicked¶

Triggered By: Submit Payment button click (payment-only mode) Event Type: click Action: Validates form, creates Chargent order, processes payment, captures transaction

Private Methods¶

displayCardNumber¶

Purpose: Formats card number with spaces for display (4444 5555 6666 7777) Called By: Card number change handler

firstDigits¶

Purpose: Returns appropriate placeholder digits based on card type (4 for Visa, 5 for Mastercard, etc.) Called By: Wire adapter when loading stored payment

validateForm¶

Purpose: Runs all field validations before submission Called By: handleSaveClicked, handleSubmitClicked

validateCardNumber¶

Purpose: Validates card number format and detects card type Called By: handleCardNumberLeave, validateForm

validateCvv¶

Purpose: Validates CVV is 3-4 digits depending on card type Called By: handleCvvLeave, validateForm

validateExpiration¶

Purpose: Validates MM/YY format and ensures date is not in the past Called By: handleExpLeave, validateForm

processPayment¶

Purpose: Creates and completes Chargent order for payment processing Called By: handleSubmitClicked (async)

Events¶

Events Dispatched¶

FlowNavigationNextEvent¶

const navigateNextEvent = new FlowNavigationNextEvent();
this.dispatchEvent(navigateNextEvent);

Purpose: Advances Flow to next screen after successful payment or save When Fired: After successful payment capture or stored payment method update Event Detail: None (standard Flow navigation event) Handled By: Salesforce Flow framework

Events Handled¶

None - Component handles all internal events

Styling (CSS)¶

CSS Variables Used¶

None - Uses hardcoded colors and SLDS classes

Custom CSS Classes¶

.creditcard: Credit card container with 3D transform
.front, .back: Front and back card faces with backface-visibility
.flipped: Applied when card shows back side
.form-container: Form layout with flexbox
.field-container: Individual field wrapper
.card-number-input-section: Card number with inline icon
.ccicon: Credit card type icon
.custom-brand-save-btn, .custom-brand-cancel-btn: Styled action buttons
.card-no-outline: Removes card outline

SLDS Classes¶

slds-card, slds-card__header, slds-card__body, slds-card__footer
slds-grid, slds-col, slds-wrap
slds-notify, slds-theme_error
slds-align_absolute-center
slds-m-left_x-small
slds-text-body_small, slds-text-color_error

Responsive Breakpoints¶

Mobile (<768px): Form stacks vertically, card maintains aspect ratio
Tablet (768-1024px): Side-by-side layout begins
Desktop (>1024px): Full side-by-side layout with max-width constraints

Dependencies¶

Lightning Web Components (Base)¶

lightning-spinner: Loading indicator
lightning-button: Action buttons (in standard payment mode)

Custom LWC Components¶

None

Apex Classes¶

I2C_PaymentMethodController.getPaymentMethod(): Retrieves stored payment method
I2C_PaymentMethodController.getChargentOrder(): Gets Chargent order details
I2C_PaymentMethodController.completeChargentOrder(): Processes payment through Chargent
I2C_PaymentMethodController.captureAuthorizedTransaction(): Captures authorized payment

Salesforce Objects & Fields¶

Account: Record to associate payment method
ChargentBase__Gateway__c: Payment method token storage
ChargentBase__First_Name__c
ChargentBase__Last_Name__c
ChargentBase__Card_Type__c
ChargentBase__Card_Last_4__c
ChargentBase__Card_Expiration_Month__c
ChargentBase__Card_Expiration_Year__c
ChargentBase__Order__c: Payment order records
ChargentBase__Gateway_Transaction__c: Transaction records

Static Resources¶

None

Labels¶

None - All text is hardcoded

Configuration¶

Component Meta XML¶

<targets>
    <target>lightning__FlowScreen</target>
</targets>

Available On: - Flow Screen

Design Properties¶

<property name="accountId" label="Account Id" type="String" />
<property name="cardNumber" label="Card Number" type="Integer"/>
<property name="cardholderName" label="Cardholder Name" type="String"/>
<property name="cardType" label="Card Type"  type="String" />
<property name="cvv" label="CVV" type="Integer"/>
<property name="expiryMonth" label="Expiry Month" type="Integer"/>
<property name="expiryYear" label="Expiry Year" type="Integer"/>
<property name="displayModifiedValues" label="Display Modified Values?" type="Boolean" default="false"/>

accountId: Identifies which account's payment method to manage
cardNumber: Pre-populate card number (for editing)
cardholderName: Pre-populate cardholder name
cardType: Pre-populate card type (must match Chargent picklist)
cvv: Pre-populate CVV (not recommended for security)
expiryMonth: Pre-populate expiration month
expiryYear: Pre-populate expiration year
displayModifiedValues: Start in edit mode with provided values

User Interactions¶

Actions Available to Users¶

View Stored Payment Method: See masked card details
Trigger: Component loads with accountId
Result: Displays card ending in last 4 digits with masked format
Update Payment Method: Edit stored card details
Trigger: Click "Update" button
Result: Form becomes editable, can change all card details
Enter Payment Information: Provide credit card details
Trigger: Type in form fields
Result: Live preview on animated card, card type auto-detected
Flip Card: View card back (CVV side)
Trigger: Click on card or focus CVV field
Result: Card animates to show back side
Save Updated Payment Method: Store new card details
Trigger: Click "Save" button after editing
Result: Validates, saves to Chargent, returns to view mode
Cancel Editing: Discard changes
Trigger: Click "Cancel" button
Result: Reverts to original values, returns to view mode
Submit One-Time Payment: Process payment
Trigger: Click "Submit Payment" button
Result: Creates Chargent order, processes payment, advances Flow

Validation & Error Handling¶

Client-Side Validation: - Card Number: Required, 13-19 digits, valid format, type detection - Cardholder Name: Required, not empty - Expiration Date: Required, MM/YY format, not in past - CVV: Required, 3-4 digits depending on card type

Error Messages: - Invalid card number: "Please enter a valid card number" - Missing cardholder name: "Cardholder name is required" - Invalid expiration: "Please enter expiration in MM/YY format" - Past expiration: "Card expiration date has passed" - Invalid CVV: "Please enter a valid CVV code" - Payment processing errors: Displayed in alert banner

Loading States: - Spinner shown during: Initial load, payment processing, Apex callouts

Data Flow¶

Input Data Flow¶

Flow Screen / Parent Component
    ↓
@api accountId property
    ↓
@wire getPaymentMethod
    ↓
Loads stored payment from Chargent
    ↓
Displays masked card details in view mode

Output Data Flow¶

User enters/edits card details
    ↓
Real-time validation and display update
    ↓
User clicks Save/Submit
    ↓
Apex controller processes through Chargent
    ↓
Success: FlowNavigationNextEvent dispatched
    ↓
Flow advances to next screen

Performance Considerations¶

Render Optimization: - Complex SVG graphics may impact render time - Card flip animation uses CSS transforms (GPU-accelerated) - Conditional rendering reduces DOM when in view mode

Data Volume: - Loads single payment method per account - No pagination needed - Minimal data transfer

API Call Optimization: - Wire adapter caches payment method data - Imperative Apex calls for save/submit only - No unnecessary re-renders

ARIA Labels: - Missing aria-label on SVG credit card graphic - Missing aria-live regions for dynamic card updates - No screen reader announcements for card flip animation

Keyboard Navigation: - Tab order: Natural field progression - No keyboard shortcut for card flip - Buttons accessible via keyboard

Screen Reader Support: - Form labels properly associated with inputs - Error messages not associated with aria-describedby - Card visualization not accessible to screen readers - Interactive card flip not keyboard accessible

Color Contrast: - White text on colored SVG card backgrounds - Error messages use standard SLDS red (passes WCAG AA) - Custom buttons need contrast verification

Testing¶

Jest Tests¶

Test File: Not found in source Coverage: 0%

Test Scenarios Needed: - Component renders correctly in view mode - Component renders correctly in edit mode - Component renders correctly in payment-only mode - Wire adapter loads payment method correctly - Card number validation works - Expiration date validation works - CVV validation works - Card type detection works (Visa, MC, Amex, Discover) - Card flip animation triggers correctly - Update button switches to edit mode - Cancel button reverts changes - Save button calls Apex correctly - Submit button processes payment - Error handling displays messages - Loading states show/hide correctly - FlowNavigationNextEvent fires on success

Manual Testing Checklist¶

[ ] Desktop browser (Chrome, Firefox, Safari)
[ ] Mobile browser (iOS Safari, Android Chrome)
[ ] Tablet view
[ ] Card flip animation smooth on all devices
[ ] All card types detected correctly
[ ] Validation messages display correctly
[ ] Stored payment method loads correctly
[ ] Update saves successfully
[ ] One-time payment processes successfully
[ ] Error scenarios handled gracefully
[ ] Screen reader testing (card accessibility)
[ ] Keyboard-only navigation
[ ] High-contrast mode
[ ] Slow network (loading states)

Usage Examples¶

In App Builder¶

Not applicable - Flow Screen only

In Flow¶

Flow Screen: "Enter Payment Information"
├── i2cPaymentMethods component
│   ├── accountId: {recordId}
│   ├── paymentOnly: true
│   ├── paymentAmount: {!totalAmount}
│   └── Output: Advances to next screen after payment

Updating Stored Payment Method in Flow¶

Flow Screen: "Update Your Payment Method"
├── i2cPaymentMethods component
│   ├── accountId: {!User.AccountId}
│   └── (No other inputs - loads existing payment)

Pre-populating Values in Flow¶

Flow Screen: "Confirm Payment Details"
├── i2cPaymentMethods component
│   ├── accountId: {recordId}
│   ├── cardNumber: {!cardNumberVar}
│   ├── cardholderName: {!nameVar}
│   ├── expiryMonth: {!monthVar}
│   ├── expiryYear: {!yearVar}
│   └── displayModifiedValues: true

Changes & History¶

No version history available in source code.

Pre-Go-Live Concerns¶

CRITICAL - Fix Before Go-Live¶

Accessibility Violations: SVG credit card interface lacks ARIA labels, screen reader support, and keyboard navigation for card flip
Security Validation: Client-side validation only - needs server-side validation in Apex controller
Error Handling: Generic error handling doesn't distinguish between network errors, validation errors, and payment gateway errors
Missing Tests: No Jest tests found - critical payment functionality needs comprehensive test coverage
Hardcoded Text: All UI text hardcoded instead of using Custom Labels (i18n not possible)

HIGH - Address Soon After Go-Live¶

Browser Compatibility: Complex SVG animations and 3D transforms may not work in older browsers or accessibility modes
Card Type Detection: Logic may not handle all international card types correctly
Loading State Management: Limited feedback during multi-step payment processing
Payment Error Recovery: No retry mechanism or detailed guidance when payment fails
Mobile UX: Card flip animation may be confusing on touch devices

MEDIUM - Future Enhancement¶

Component Size: Very large component (2000+ lines of JS/CSS) should be refactored into smaller components
Code Maintainability: Complex card manipulation logic needs refactoring and documentation
Validation Logic: Duplicate validation code should be centralized
CSS Organization: Extensive CSS should be modularized
Input Masking: Add input masking library for better UX (auto-format card numbers, dates)

LOW - Monitor¶

Visual Design: Card styling could be updated to match modern card designs
Animation Performance: Monitor card flip performance on low-end devices
Card Type Coverage: May need additional card types for international customers
Console Logging: Review and remove debug statements for production

Maintenance Notes¶

Complexity: High - Complex payment processing with interactive UI, SVG manipulation, and Chargent integration Recommended Review Schedule: Quarterly due to payment processing criticality

Key Maintainer Notes: - This component is critical for payment processing - any changes require thorough testing - Card type detection relies on first digit patterns (4=Visa, 5=MC, 6=Discover, 3=Amex) - The component has two distinct modes: stored payment update and one-time payment collection - Payment processing is asynchronous - ensure proper loading states and error handling - SVG credit card is purely decorative - consider accessibility alternatives - Chargent integration requires active Chargent package and gateway configuration - This component is used in multiple Flows - coordinate changes across all implementations - Card flip animation uses CSS 3D transforms - may not work in all accessibility modes

Browser Compatibility: - Chrome: Latest - Firefox: Latest - Safari: Latest - Mobile: iOS 12+, Android 8+ - Accessibility Mode: SVG card may not render, form still functional

Dependencies to Monitor: - Chargent package updates may affect API behavior - Flow framework changes may affect navigation - SLDS updates may affect styling