Skip to content

Fix CVV validation error state #1822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
buzzamus merged 1 commit into from
Jun 18, 2026
Merged

Fix CVV validation error state #1822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions Sources/BraintreeUIComponents/CardFields/CVVField/CVVFieldViewModel.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ class CVVFieldViewModel: ObservableObject {

func updateExpectedLength(_ length: Int?) {
validator.expectedLength = length
guard !value.isEmpty else { return }

let result = validator.validate(value)
validationState = result == .validating ? .invalid("CVV is invalid") : result
}

func updateValue(_ newValue: String) {
Expand Down Expand Up @@ -85,9 +89,7 @@ class CVVFieldViewModel: ObservableObject {
Task {
try? await Task.sleep(for: .seconds(1))
guard let index = characters.firstIndex(where: { $0.id == characterID }) else { return }
withAnimation(.easeInOut(duration: 0.3)) {
characters[index].isMasked = true
}
characters[index].isMasked = true
}
}
}
2 changes: 1 addition & 1 deletion Sources/BraintreeUIComponents/CardFields/CardFields.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ public struct CardFields: View {
apiClient.sendAnalyticsEvent(UIComponentsAnalytics.cardFieldsPresented)
onValidityChange?(viewModel.isFormValid, submitAction)
}
.onChange(of: viewModel.isFormValid) { _, isValid in
.onReceive(viewModel.formValidityPublisher) { isValid in
onValidityChange?(isValid, submitAction)
}
}
Expand Down
8 changes: 8 additions & 0 deletions Sources/BraintreeUIComponents/CardFields/CardFieldsViewModel.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@ final class CardFieldsViewModel: ObservableObject {

@Published private(set) var isFormValid: Bool = false

// Debounced so rapid delete+retype coalesces — never delivers an intermediate invalid state.
lazy var formValidityPublisher: AnyPublisher<Bool, Never> = $isFormValid
.dropFirst()
.removeDuplicates()
.debounce(for: .milliseconds(50), scheduler: DispatchQueue.main)
.eraseToAnyPublisher()

// MARK: - Private Properties

private let cardClient: BTCardClient
Expand Down Expand Up @@ -40,6 +47,7 @@ final class CardFieldsViewModel: ObservableObject {

Publishers.CombineLatest3(cardValid, expValid, cvvValid)
.map { $0 && $1 && $2 }
.removeDuplicates()

@agedd agedd Jun 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

curious why we added this check here 👀

@buzzamus buzzamus Jun 18, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ignores duplicates of the same validity, so for example if the form is valid, more typing occurs, and the form is still valid it does not have to re-render the view, which avoids stuttering issues for the CVV masking

.assign(to: &$isFormValid)
}

Expand Down
33 changes: 33 additions & 0 deletions UnitTests/BraintreeUIComponentsTests/CVVFieldViewModelTests.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,39 @@ import XCTest
XCTAssertEqual(viewModel.characters.map { $0.value }, ["4", "5", "6"])
}


// MARK: - updateExpectedLength

@agedd agedd Jun 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice unit tests! 🚀


func testUpdateExpectedLength_validCVVBecomesTooShort_showsError() {
viewModel.updateExpectedLength(3)
viewModel.updateValue("123")
XCTAssertEqual(viewModel.validationState, .valid)

viewModel.updateExpectedLength(4)

XCTAssertEqual(viewModel.validationState, .invalid("CVV is invalid"))
}

func testUpdateExpectedLength_invalidCVVBecomesValid_clearsError() {
viewModel.updateValue("1234")
XCTAssertEqual(viewModel.validationState, .valid)

viewModel.updateExpectedLength(3)
XCTAssertEqual(viewModel.validationState, .invalid("CVV is invalid"))

viewModel.updateExpectedLength(4)

XCTAssertEqual(viewModel.validationState, .valid)
}

func testUpdateExpectedLength_emptyField_doesNotShowError() {
XCTAssertEqual(viewModel.value, "")

viewModel.updateExpectedLength(3)

XCTAssertEqual(viewModel.validationState, .valid)
}

// MARK: - Masking Timer

func testMaskingTimer_characterMasksAfterDelay() {
Expand Down
Loading