MS-503: Add properties to the SDK theme, PaymentItem

[vscmaster]

MS-503: Add properties to the SDK theme, PaymentItem

[vscmaster]

@claude review

[claude]

Claude finished @vscmaster's task in 1m 16s —— View job

---

Code Review: MS-503 — Add properties to the SDK theme, PaymentItem

• Read changed files and gather context
• Review Dart layer (checkout_theme.dart, checkout_theme.g.dart)
• Review Android layer (CustomerTheme.kt, CheckoutView.kt)
• Review iOS layer (CustomerTheme.swift, CheckoutPlatformView.swift)
• Review Sample app changes (theme_customization_screen.dart)
• Post final review

---

Summary: This PR adds three new payment-item theme properties — paymentItemBorderColor, paymentItemBorderWidth, and paymentItemCornerRadius — across the Dart, Android, and iOS layers. The overall structure is correct and consistent. One functional bug found.

---

Critical Bug — Android appearanceDark is missing the new properties

File: android/src/main/kotlin/com/ottu/flutter/checkout/CheckoutView.kt

The three new fields are correctly mapped in appearanceLight (lines ~322–324):

paymentItemBorderColor = paymentItemBorderColor?.toCheckoutColor(),
paymentItemBorderWidth = paymentItemBorderWidth,
paymentItemCornerRadius = paymentItemCornerRadius,

But they are not present in the appearanceDark block (lines ~334–363). On Android, the dark-mode appearance will silently ignore paymentItemBorderColor, paymentItemBorderWidth, and paymentItemCornerRadius.

All other recently added payment-item properties (paymentItemBackgroundColor, paymentItemDescriptionTextColor) also appear to be missing from appearanceDark (pre-existing gap), but these new fields should not compound that pattern.

Fix this →

---

Minor — iOS property name divergence (informational)

File: ios/.../CheckoutPlatformView.swift:420–432

The Flutter-side names (paymentItem*) are mapped to differently-named native iOS SDK properties (selectPaymentMethod*). This is consistent with the existing paymentItemDescriptionTextColor → selectPaymentMethodDescriptionTextColor pattern, but Android uses paymentItem* directly. This cross-platform naming divergence is a latent confusion risk — worth an explicit comment in CheckoutPlatformView.swift or a note in CLAUDE.md.

---

Minor — Dart copyWith indentation regression

File: lib/src/checkout_theme.dart:103–104, 119–123, 371–372, 406–407

Several continuation lines lost indentation in the diff (e.g. selectPaymentMethodHeaderText ??, selectPaymentMethodHeaderBackgroundColor ??, paymentItemDescriptionTextColor ??). These are now flush to the left margin of the expression, inconsistent with the 6-space continuation indent used elsewhere. Running dart format lib/ would fix this.

---

Good Changes

• checkout_theme.g.dart is correctly regenerated — paymentItemBorderWidth/paymentItemCornerRadius use (... as num?)?.toDouble() which safely handles both int and double JSON values.
• CustomerTheme.kt and CustomerTheme.swift are symmetric and both correctly declare the new fields.
• Sample app _numberModifier: adding onChanged: onTextChanged alongside onFieldSubmitted is a good UX fix — the value now updates on each keystroke, not just on keyboard submit.
• Equatable.props is correctly updated to include the three new fields.

---

Summary

Severity	Issue	Location
🔴 Bug	New fields missing from appearanceDark block	CheckoutView.kt:334–363
🟡 Informational	iOS vs Android property naming divergence	CheckoutPlatformView.swift:420–432
🟢 Style	dart format needed for copyWith indentation	checkout_theme.dart