Add the saved payment method row components 3/6 by saurabh-P9525 · Pull Request #1887 · braintree/braintree_ios

saurabh-P9525 · 2026-09-30T20:03:14Z

Part 3 of the View/Edit FI saved payment method component. Adds the SwiftUI rows the component is built from.

Part 3 of a 6-part split, rebased on view-edit-fi-beta-feature now that #1884 (1/6) and #1886 (2/6) have merged. It builds on its own and all unit tests pass.

Summary of changes

EditFIRow renders the brand mark (PayPal badge + label) and the funding-instrument pill: card art (or a card/bank fallback glyph) + masked last digits + edit pencil. Only regular cards and banks show ••last4; PayPal products (PayPal Credit, PayPal Debit, PayPal balance, Pay in 4, ...) show their label. It also covers the email-only and brand-only fallbacks. At large accessibility text sizes it stacks instead of truncating the last digits.
CreditMessagingRow renders the Pay Later message with an inline "Learn more" link. It takes the message, link text and URL as plain values and hands the tap back through onLearnMore, so the view model decides how the lander opens.
Card, bank and edit-pencil assets.
All sizes and spacing go through EditFIStyleGuard.fontSize / dimension, and fonts follow the view's Dynamic Type size.

Screenshots

The rows aren't on a screen until part 4, so these are rendered from the real EditFIRow and CreditMessagingRow views in a test.

Row states and merchant styling


Card + Pay Later message	Bank
Card with no art (fallback glyph)	PayPal product (label instead of digits)
Pay in 4 (no art)	Email only, editable
Email only, not editable	Brand only (no FI or email)
Merchant link color (no underline)	Large accessibility text (stacked)
Dark merchant theme	`showPayPalLogo: false`
`showPayPalLabel: false`	Both off

Notes for reviewers

CreditMessageContent moved to Add the saved payment method view model 2/6 #1886 (2/6) with the view model that builds it.
SavedPaymentMethodRenderTestCase holds the shared ImageRenderer helpers; the view's render tests in Add the BTPayPalSavedPaymentMethodView checkout component 4/6 #1888 (4/6) reuse it.

AI Usage

Which AI Agent Was Used?

Copilot
Claude
Other (Type Name Here)

How was AI used?
Used Claude to write the row components and their render tests, and to split this part out.

Estimated AI Code Contribution

less than 30%
30 - 60%
60 - 100%

Checklist

Added a changelog entry
Tested and confirmed payment flows affected by this change are functioning as expected

Authors

List GitHub usernames for everyone who contributed to this pull request.

@saurabh-P9525

Inner Source Process

Internal to PayPal contributors should fill out this section. All others can delete.

PR should follow these steps before codeowners review will begin:

Comment /inner source on this PR — this will automatically add the inner source and tech lead review required labels. Open the PR in a draft state.
PR should be reviewed by and approved by your team's technical lead, we do not allow LGTM reviews, there should be comments and feedback provided on all PR reviews
Once the above steps are completed, comment /ready on this PR — this will automatically remove the tech lead review required label. Move the PR to ready to review.
PR comments must be addressed within 24 hours, if you are unable to address within this timeframe, move the PR back to a draft state so our team knows not to review

Inner Source Checklist

Added all labels to the PR
Provide steps to test the flows changed, if applicable in the summary
Demo video of the functionality, if applicable
All upstream dependencies are merged in and this PR can be released at any time; PRs should not be opened until this is true
Unit tests and builds have been run locally and pass/compile as expected

rainaarya

Please update the PR description as per the new changes, if required.

Once the reviews are done or PR-2 (#1886) gets merged, please rebase this PR on top of the previous PR.

saurabh-P9525 · 2026-10-06T16:26:25Z

/inner source

rvmondeti-svg · 2026-10-12T15:11:58Z

Approving. Earlier feedback is addressed and the rows look good.

Please check the pill’s tap height against the 44pt guideline, since the whole pill is the edit button. Also add the changelog entry, then /ready.

Juan219 · 2026-10-13T17:23:22Z

+    private func fiAccessibilityLabel(for summary: PayPalSavedPaymentMethod) -> String {
+        guard let lastDigits = lastDigits(for: summary) else {
+            return summary.label ?? ""
+        }
+        // Spaced so VoiceOver reads each digit instead of one number.
+        let spokenDigits = lastDigits.map(String.init).joined(separator: " ")
+        return [summary.label, "ending in \(spokenDigits)"].compactMap { $0 }.joined(separator: ", ")
+    }


Non-blocking: I don’t see anything wrong with this implementation—I like that it spaces the last
digits so VoiceOver reads them individually. Could we add coverage for the expected accessibility-
label output to prevent regressions?

For example:

// CARD, label: "Visa", lastDigits: "1234"
"Visa, ending in 1 2 3 4"

// PAYPAL_CREDIT, label: "PayPal Credit", lastDigits: "1234"
"PayPal Credit"

This could be covered by making this helper testable within the module, or by asserting the button’s
accessibility label through an accessibility/UI test.

I made fiAccessibilityLabel(for:) internal for testing and added a table-driven test covering card, bank, PayPal Credit, missing digits and a missing label.

Juan219

Added a Non-blocking comment, please check before requesting review from BT team.

saurabh-P9525 · 2026-10-14T15:42:37Z

/ready

buzzamus

I am not sure if this is hooked up and able to yet, but is there any way to show some screenshots of what these new views look like?

buzzamus · 2026-10-14T19:20:11Z

+    /// Internal for testing.
+    func fiAccessibilityLabel(for summary: PayPalSavedPaymentMethod) -> String {
+        guard let lastDigits = lastDigits(for: summary) else {
+            return summary.label ?? ""


Will this empty text cause issues for accessibility features if the label is actually empty?

An empty label is now treated as missing, and if there's no label and no digits, VoiceOver reads "Saved payment method" instead of an empty string. Added test cases for both.

buzzamus · 2026-10-14T19:24:47Z

+                Spacer(minLength: 0)
+            }
+            HStack(spacing: 0) {
+                fiCluster


stackedLayoutSpacing is 6, so if fiCluster renders an empty view I think this will add an extra gap spacing here won't it?

Yes, it did. The stacked layout now leaves out the FI row for brand-only (and the brand row when it's hidden), so no spacing is added

agedd · 2026-10-14T20:19:35Z

+        var text = AttributedString(message)
+        text.foregroundColor = style.resolvedTextColor
+
+        guard let learnMoreText, let url = learnMoreURL else {


it looks like the guard only checks learnMoreText != nil, not non-empty. can we add something like this:

Suggested change

guard let learnMoreText, let url = learnMoreURL else {

guard let learnMoreText, !learnMoreText.isEmpty, let url = learnMoreURL else {

Thanks, applied

agedd · 2026-10-14T20:21:26Z

+        )) {
+            if style.showPayPalLogo {
+                Image("PayPalBadge", bundle: .payPalSavedPaymentMethod)
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: logoSide, height: logoSide)
+                    .accessibilityLabel("PayPal")
+                    // The label already reads "PayPal", so the logo only speaks when the label is hidden.


if a merchant sets both showPayPalLogo and showPayPalLabel to false, the brand cluster renders nothing — visually or for accessibility — leaving the pill looking orphaned.

should PayPalSavedPaymentMethodViewStyle guard against/disallow this combination

I’ve kept hiding both as a supported merchant option, consistent with the JS alpha—for example, when merchants use their own PayPal header. I also fixed the orphaned pill spacing and VoiceOver label. In Part 4, brand-only with both flags off now hides the component entirely.

EditFIRow, CreditMessagingRow and PayPalBrandCluster, with the card, bank and pencil assets and their render tests. Rebased onto view-edit-fi-beta-feature after braintree#1886 merged.

…en the brand mark is hidden, and ignore empty Learn more text

saurabh-P9525 · 2026-10-15T10:40:49Z

I am not sure if this is hooked up and able to yet, but is there any way to show some screenshots of what these new views look like?

These rows aren't wired into a screen until PR4, so I rendered the real views in a test and added a Screenshots section to the description covering each row state, a dark theme, large accessibility text and the logo/label settings.

jaxdesmarais · 2026-10-15T13:40:22Z

@saurabh-P9525 this PR is missing a XO Tech Lead review and is being moved back to draft

saurabh-P9525 · 2026-10-15T13:45:46Z

@saurabh-P9525 this PR is missing a XO Tech Lead review and is being moved back to draft

XO tech lead - @Juan219 has reviewed , and has approved the PR. @jaxdesmarais

vkspune · 2026-10-15T15:38:51Z

Approved

agedd · 2026-10-16T14:01:30Z

+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel(label)
+        .accessibilityAddTraits(.isButton)
+        .accessibilityHint("Change payment method")


it looks like this accessibility hint also applies to "PayPal" / "Saved payment method" / "ending in" nearby so should these VoiceOver strings be localized, or is that planned in a later PR in the stack?

The SDK doesn't localize strings today, and PayPalButton and the card fields hard-code their accessibility text in English too, so I've kept these consistent with them

agedd · 2026-10-16T14:08:07Z

+
+    /// The whole pill is the tap target, not just the pencil: a 20pt glyph is well under the 44pt
+    /// minimum and is the only affordance the buyer has to change what will be charged.
+    private func editable(label: String, @ViewBuilder _ content: () -> some View) -> some View {


minor: could we give this trailing closure a parameter label (e.g. content:) instead of _? slightly more readable at call sites and matches the labeled style used elsewhere in this file

Done, editable now takes content:, and I made the same change to fiPill so both helpers match.

agedd · 2026-10-19T15:19:59Z

+import UIKit
+
+/// The inline credit (Pay Later) messaging line rendered below the FI row.
+///


nit: can remove the empty line

Done, thanks.

agedd

thanks for making these changes, looks good!

buzzamus

Approved and re-ran the failing integration test CI that appears to be due to some backend flakiness

The public view, skeleton row and shimmer, edit loader, Learn more lander and LoadingSpinner asset, with render tests. Rebased onto view-edit-fi-beta-feature after braintree#1887 merged.

This was referenced Sep 30, 2026

Add the saved payment method view model 2/6 #1886

Merged

Add the BTPayPalSavedPaymentMethodView checkout component 4/6 #1888

Open

saurabh-P9525 changed the title ~~3/6 Add the saved payment method row components~~ Add the saved payment method row components 3/6 Sep 30, 2026

saurabh-P9525 force-pushed the feature/saved-pm-3-components branch from 6ee40a9 to 7deb3d1 Compare October 5, 2026 20:32

rainaarya reviewed Oct 6, 2026

View reviewed changes

rainaarya mentioned this pull request Oct 6, 2026

Add a style-configurable Demo screen for the saved payment method component #1891

Draft

5 of 13 tasks

github-actions Bot added inner source This PR is internal to PP but external to the mobile SDK team tech lead review required labels Oct 6, 2026

saurabh-P9525 requested a review from rainaarya October 8, 2026 08:56

github-actions Bot removed the tech lead review required label Oct 12, 2026

rainaarya approved these changes Oct 12, 2026

View reviewed changes

Juan219 reviewed Oct 13, 2026

View reviewed changes

Juan219 approved these changes Oct 13, 2026

View reviewed changes

saurabh-P9525 marked this pull request as ready for review October 14, 2026 15:42

saurabh-P9525 requested a review from a team as a code owner October 14, 2026 15:42

buzzamus reviewed Oct 14, 2026

View reviewed changes

agedd reviewed Oct 14, 2026

View reviewed changes

Add the saved payment method row components

054af26

EditFIRow, CreditMessagingRow and PayPalBrandCluster, with the card, bank and pencil assets and their render tests. Rebased onto view-edit-fi-beta-feature after braintree#1886 merged.

saurabh-P9525 force-pushed the feature/saved-pm-3-components branch from 2d2c91c to 054af26 Compare October 15, 2026 07:14

Never read an empty FI label, drop empty stacked rows, name PayPal wh…

ae7eb4e

…en the brand mark is hidden, and ignore empty Learn more text

saurabh-P9525 requested review from agedd and buzzamus October 15, 2026 10:58

jaxdesmarais marked this pull request as draft October 15, 2026 13:40

saurabh-P9525 marked this pull request as ready for review October 15, 2026 16:06

agedd reviewed Oct 16, 2026

View reviewed changes

Label the content closures of the editable and pill helpers

6ed215d

saurabh-P9525 requested a review from agedd October 16, 2026 17:09

balamaninayard mentioned this pull request Oct 19, 2026

feat(PayPalSavedPaymentMethod): add the PayPalSavedPaymentMethodView Compose component braintree/braintree_android#1729

Draft

4 of 12 tasks

agedd reviewed Oct 19, 2026

View reviewed changes

Join the CreditMessagingRow doc into one paragraph

3200596

saurabh-P9525 requested a review from agedd October 19, 2026 15:31

agedd approved these changes Oct 19, 2026

View reviewed changes

buzzamus approved these changes Oct 19, 2026

View reviewed changes

jaxdesmarais merged commit 4364b8c into braintree:view-edit-fi-beta-feature Oct 19, 2026
22 of 24 checks passed

	guard let learnMoreText, let url = learnMoreURL else {
	guard let learnMoreText, !learnMoreText.isEmpty, let url = learnMoreURL else {

Conversation

saurabh-P9525 commented Sep 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of changes

Screenshots

Notes for reviewers

AI Usage

Checklist

Authors

Inner Source Process

Inner Source Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rainaarya left a comment

Choose a reason for hiding this comment

Uh oh!

saurabh-P9525 commented Oct 6, 2026

Uh oh!

rvmondeti-svg commented Oct 12, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Juan219 left a comment

Choose a reason for hiding this comment

Uh oh!

saurabh-P9525 commented Oct 14, 2026

Uh oh!

buzzamus left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

saurabh-P9525 Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

saurabh-P9525 commented Oct 15, 2026

Uh oh!

jaxdesmarais commented Oct 15, 2026

Uh oh!

saurabh-P9525 commented Oct 15, 2026

Uh oh!

vkspune commented Oct 15, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

agedd left a comment

saurabh-P9525 commented Sep 30, 2026 •

edited

Loading

saurabh-P9525 Oct 15, 2026 •

edited

Loading