Skip to content

Fix vending card art by fixing pre-caching image #6338

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

Open
wooj-stripe wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix vending card art by fixing pre-caching image #6338

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f7463e
Fix vending card art by fixing pre-caching image
wooj-stripe Apr 14, 2026
0ab1643
Update per review
wooj-stripe Apr 15, 2026
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
1 change: 1 addition & 0 deletions StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/CustomerSheet/CustomerSheet.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,7 @@ extension CustomerSheet {
guard let matchingPaymentMethod = paymentMethods.first(where: { $0.stripeId == paymentMethodId }) else {
return nil
}
matchingPaymentMethod.preloadCardArtImage(cardArtEnabled: configuration.appearance.cardArtEnabled)
Copy link
Copy Markdown
Collaborator

@yuki-stripe yuki-stripe Apr 14, 2026

Choose a reason for hiding this comment

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

I thought the idea was to block this on downloading the card art, since it's already async?

Copy link
Copy Markdown
Collaborator Author

@wooj-stripe wooj-stripe Apr 14, 2026

Choose a reason for hiding this comment

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

Doing so would slow down this function as well as be inconsistent with the behavior of payment sheet, so I ultimately decided against doing this.

return CustomerSheet.PaymentOptionSelection.paymentMethod(matchingPaymentMethod)
default:
return nil
Expand Down
2 changes: 1 addition & 1 deletion ...eet/StripePaymentSheet/Source/PaymentSheet/CustomerSheet/CustomerSheetConfiguration.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ extension CustomerSheet {
/// Create a PaymentOptionSelection for a saved payment method.
public static func paymentMethod(_ paymentMethod: STPPaymentMethod) -> PaymentOptionSelection {
let paymentMethodIcon = paymentMethod.makeIcon()
let image = paymentMethod.cardArtImage(cardArtEnabled: _cardArtEnabled) ?? paymentMethodIcon
let image = paymentMethod.cachedCardArtImage(cardArtEnabled: _cardArtEnabled) ?? paymentMethodIcon
let data = PaymentOptionDisplayData(image: image, label: paymentMethod.paymentSheetLabel)
return .paymentMethod(paymentMethod: paymentMethod, paymentOptionDisplayData: data)
}
Expand Down
25 changes: 22 additions & 3 deletions StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentOption+Images.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ extension PaymentOption {
if let linkedBank = paymentOption?.instantDebitsLinkedBank {
return PaymentSheetImageLibrary.bankIcon(for: PaymentSheetImageLibrary.bankIconCode(for: linkedBank.bankName), iconStyle: iconStyle)
} else {
let cardArtImage = paymentMethod.cardArtImage(cardArtEnabled: cardArtEnabled)
let cardArtImage = paymentMethod.cachedCardArtImage(cardArtEnabled: cardArtEnabled)
return cardArtImage ?? paymentMethod.makeIcon(iconStyle: iconStyle)
}
case .new(let confirmParams):
Expand Down Expand Up @@ -149,8 +149,8 @@ extension STPPaymentMethod {
}
}

func cardArtImage(cardArtEnabled: Bool, downloadManager: DownloadManager = DownloadManager.sharedManager) -> UIImage? {
guard cardArtEnabled, let cardArtURL = cardArtCDNURL(height: 28) else {
func cachedCardArtImage(cardArtEnabled: Bool, downloadManager: DownloadManager = DownloadManager.sharedManager) -> UIImage? {
guard let cardArtURL = vendedCardArtURL(cardArtEnabled: cardArtEnabled) else {
return nil
}
let placeholder = downloadManager.imagePlaceHolder()
Expand All @@ -161,6 +161,25 @@ extension STPPaymentMethod {
)
return image == placeholder ? nil : image.roundedWithBorder(radius: 3)
}

func preloadCardArtImage(cardArtEnabled: Bool, downloadManager: DownloadManager = DownloadManager.sharedManager) {
guard let cardArtURL = vendedCardArtURL(cardArtEnabled: cardArtEnabled) else {
return
}
let updateHandler: ((UIImage) -> Void)? = { _ in }
_ = downloadManager.downloadImage(
url: cardArtURL,
placeholder: nil,
updateHandler: updateHandler
)
}

func vendedCardArtURL(cardArtEnabled: Bool) -> URL? {
guard cardArtEnabled, let cardArtURL = cardArtCDNURL(height: 26) else {
return nil
}
return cardArtURL
}
}

extension STPPaymentMethodParams {
Expand Down
6 changes: 6 additions & 0 deletions StripePaymentSheet/StripePaymentSheet/Source/PaymentSheet/PaymentSheetLoader.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,12 @@ final class PaymentSheetLoader {
elementsSession: elementsSession,
defaultPaymentMethod: elementsSession.customer?.getDefaultPaymentMethod()
)

// Pre-fetch card art without waiting for this to finish
Copy link
Copy Markdown
Collaborator

@yuki-stripe yuki-stripe Apr 14, 2026

Choose a reason for hiding this comment

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

I think you said pre-loading payment option images in general was broken, is that still true?

Copy link
Copy Markdown
Collaborator Author

@wooj-stripe wooj-stripe Apr 14, 2026

Choose a reason for hiding this comment

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

Correct in FlowController.swift, _ = flowController.paymentOption does not seem to have any effect.

if let defaultPaymentMethod = paymentOptionsViewModels.stp_boundSafeObject(at: defaultSelectedIndex),
case .saved(let stpPaymentMethod) = defaultPaymentMethod {
stpPaymentMethod.preloadCardArtImage(cardArtEnabled: configuration.appearance.cardArtEnabled)
}
loadTimings.logEnd("makeViewModels")

// Send load finished analytic
Expand Down
14 changes: 7 additions & 7 deletions ...PaymentSheet/StripePaymentSheetTests/PaymentSheet/STPPaymentMethod+CardArtImageTest.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,32 +29,32 @@ final class STPPaymentMethodCardArtImageTest: APIStubbedTestCase {

func testCardArtImage_returnsNilWhenCardArtDisabled() {
let pm = STPPaymentMethod._testCardWithCardArt()
XCTAssertNil(pm.cardArtImage(cardArtEnabled: false, downloadManager: downloadManager))
XCTAssertNil(pm.cachedCardArtImage(cardArtEnabled: false, downloadManager: downloadManager))
}

func testCardArtImage_returnsNilWhenNoCardArt() {
let pm = STPPaymentMethod._testCard()
XCTAssertNil(pm.cardArtImage(cardArtEnabled: true, downloadManager: downloadManager))
XCTAssertNil(pm.cachedCardArtImage(cardArtEnabled: true, downloadManager: downloadManager))
}

func testCardArtImage_returnsNilWhenImageNotCached() {
let pm = STPPaymentMethod._testCardWithCardArt()
XCTAssertNil(pm.cardArtImage(cardArtEnabled: true, downloadManager: downloadManager))
XCTAssertNil(pm.cachedCardArtImage(cardArtEnabled: true, downloadManager: downloadManager))
}

func testCardArtImage_returnsImageWhenCached() {
let pm = STPPaymentMethod._testCardWithCardArt()
let cardArtURL = pm.cardArtCDNURL(height: 28)!
let cardArtURL = pm.cardArtCDNURL(height: 26)!

// Pre-seed the URL cache so downloadImage returns the real image
let imageData = generateUIImage(size: CGSize(width: 100, height: 28)).pngData()!
let imageData = generateUIImage(size: CGSize(width: 100, height: 26)).pngData()!
seedURLCache(url: cardArtURL, data: imageData)

let result = pm.cardArtImage(cardArtEnabled: true, downloadManager: downloadManager)
let result = pm.cachedCardArtImage(cardArtEnabled: true, downloadManager: downloadManager)
XCTAssertNotNil(result)

// The returned image should be the same as the one we created
XCTAssertEqual(result?.size, CGSize(width: 100, height: 28))
XCTAssertEqual(result?.size, CGSize(width: 100, height: 26))
}

// MARK: - Helpers
Expand Down
Loading