[BUG] List of payments for OnlineBankingPL/Dotpay does not show icons inside `ListViewController`

[JAIRMG]

Describe the bug Hi, I am trying to migrate from Dotpay to OnlineBankingPL following the documentation. I noticed that once ListViewController is shown with the list of payment methods the icons are not being shown but the border is there.

To Reproduce Steps to reproduce the behavior:

1. Try to make a payment using OnlineBankingPL
2. Error: Icons of payment methods are not being shown

Expected behavior Expect to see icons or the list without borders

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 13 Pro Max
• OS: 15.5
• SDK Version 5.1.0

Additional context I tested DotPay method and it's not showing icons neither. Is this somehow related to this update? I noticed that icon URLs have a similar path to web images except for the extra path called small

Thanks in advance!

[descorp]

Hey @JAIRMG

Do you still facing the issue? Is this TEST or LIVE environment?

[JAIRMG]

Hi @descorp I am still facing the issue. They're not visible in both environments

[descorp]

I can't reproduce this on test with 5.1.0 - all icons are loaded. Can you see icons loaded on other components / DropIn?

UPD We are using URLSession.shared to load icons. Is it possible that something on your side prevent icons to be loaded?

[JAIRMG]

Yes, credit card icons are loaded without problem, just Dotpay and OnlineBankingPL icons are not being shown. I tested differente iOS version (16.0) and different device (iPhone 14) and same issue, dotpay use to work in previous versions, this started to happen on 5.0.0

[descorp]

Are you using Drop-In or standalone components? Can you debug SDK source code? How does URL look like if you make a breakpoint on line 43 ?

[JAIRMG]

Hi, I am using Drop-In component. After debugging, I'm getting receiving 404 response code, this is the data string data I receive:

The page you're looking for isn't here. It might have been moved or deleted, or perhaps it never existed.

I also tried to load one of the images in two different browsers and the result is the same

https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/small/scheme/144@3x.png

[descorp]

Hm, interesting. It supposed to be small/dotpay/###@3x.png not small/scheme/###@3x.png

https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/small/dotpay/44@3x.png

How does your "dotpay" JSON from \paymentMethods response looks like ?

[descorp]

What API version are you using? This does not look like /paymentMethods response

I assume your DotPay paymentMethod have wrong type. Main question: what does PaymentMethods object contain? Can you print it out?

[JAIRMG]

Here is how the response looks like

{ "groups": [ { "name": "Credit Card", "types": [ "amex", "bcmc", "cartebancaire", "diners", "discover", "maestro", "mc", "visa" ] } ], "paymentMethods": [ { "brands": [ "amex", "bcmc", "cartebancaire", "diners", "discover", "maestro", "mc", "visa" ], "details": [ { "key": "encryptedCardNumber", "type": "cardToken" }, { "key": "encryptedSecurityCode", "type": "cardToken" }, { "key": "encryptedExpiryMonth", "type": "cardToken" }, { "key": "encryptedExpiryYear", "type": "cardToken" }, { "key": "holderName", "optional": true, "type": "text" } ], "name": "Credit Card", "supportsRecurring": true, "type": "scheme" }, { "name": "SEPA Bank Transfer", "supportsRecurring": true, "type": "bankTransfer_IBAN" }, { "brands": [ "bcmc", "maestro", "visa" ], "details": [ { "key": "encryptedCardNumber", "type": "cardToken" }, { "key": "encryptedExpiryMonth", "type": "cardToken" }, { "key": "encryptedExpiryYear", "type": "cardToken" }, { "key": "holderName", "optional": true, "type": "text" } ], "name": "Bancontact card", "supportsRecurring": true, "type": "bcmc" }, { "name": "Boku", "supportsRecurring": true, "type": "boku" }, { "name": "Online bank transfer.", "supportsRecurring": true, "type": "directEbanking" }, { "details": [ { "items": [ { "id": "66", "name": "Bank Nowy S.A." }, { "id": "92", "name": "Bank Spółdzielczy w Brodnicy" }, { "id": "11", "name": "Bank transfer \/ postal" }, { "id": "74", "name": "Banki Spółdzielcze" }, { "id": "73", "name": "BLIK" }, { "id": "90", "name": "BNP Paribas - płacę z Pl@net" }, { "id": "59", "name": "CinkciarzPAY" }, { "id": "87", "name": "Credit Agricole PBL" }, { "id": "81", "name": "Idea Cloud" }, { "id": "7", "name": "ING Corporate customers" }, { "id": "93", "name": "Kasa Stefczyka" }, { "id": "44", "name": "Millennium - Płatności Internetowe" }, { "id": "10", "name": "Millennium Corporate customers" }, { "id": "68", "name": "mRaty" }, { "id": "1", "name": "mTransfer" }, { "id": "91", "name": "Nest Bank" }, { "id": "45", "name": "Pay with Alior Bank" }, { "id": "36", "name": "Pekao24Przelew" }, { "id": "70", "name": "Pocztowy24" }, { "id": "6", "name": "Przelew24" }, { "id": "46", "name": "Płacę z Citi Handlowy" }, { "id": "38", "name": "Płacę z ING." }, { "id": "2", "name": "Płacę z Inteligo" }, { "id": "4", "name": "Płacę z iPKO" }, { "id": "75", "name": "Płacę z Plus Bank" }, { "id": "51", "name": "Płać z BOŚ" }, { "id": "55", "name": "Raty z Alior Bankiem PLN" }, { "id": "89", "name": "Santander" }, { "id": "76", "name": "VeloBank PBL" }, { "id": "83", "name": "EnveloBank" }, { "id": "50", "name": "Pay Way Toyota Bank" }, { "id": "52", "name": "SkyCash" } ], "key": "issuer", "type": "select" } ], "name": "Local Polish Payment Methods", "supportsRecurring": true, "type": "dotpay" }, { "name": "Finnish E-Banking", "supportsRecurring": true, "type": "ebanking_FI" }, { "name": "Lastschrift (ELV)", "supportsRecurring": true, "type": "elv" }, { "details": [ { "key": "bic", "type": "text" } ], "name": "GiroPay", "supportsRecurring": true, "type": "giropay" }, { "details": [ { "items": [ { "id": "1121", "name": "Test Issuer" }, { "id": "1154", "name": "Test Issuer 5" }, { "id": "1153", "name": "Test Issuer 4" }, { "id": "1164", "name": "SNS" }, { "id": "1152", "name": "Test Issuer 3" }, { "id": "1163", "name": "Ideal bridge test issuer" }, { "id": "1151", "name": "Test Issuer 2" }, { "id": "1162", "name": "Test Issuer Cancelled" }, { "id": "1161", "name": "Test Issuer Pending" }, { "id": "1160", "name": "Test Issuer Refused" }, { "id": "1159", "name": "Test Issuer 10" }, { "id": "1158", "name": "Test Issuer 9" }, { "id": "1157", "name": "Test Issuer 8" }, { "id": "1156", "name": "Test Issuer 7" }, { "id": "1155", "name": "Test Issuer 6" } ], "key": "issuer", "type": "select" } ], "name": "iDEAL", "supportsRecurring": true, "type": "ideal" }, { "details": [ { "items": [ { "id": "181", "name": "BLIK" }, { "id": "154", "name": "BLIK - PSP" }, { "id": "31", "name": "Płacę z iPKO (PKO BP)" }, { "id": "243", "name": "mBank - mTransfer" }, { "id": "112", "name": "Pay with ING" }, { "id": "20", "name": "Santander-Przelew24" }, { "id": "65", "name": "Bank PEKAO S.A." }, { "id": "85", "name": "Bank Millennium" }, { "id": "88", "name": "Pay with Alior Bank" }, { "id": "143", "name": "Banki Spółdzielcze" }, { "id": "26", "name": "Pay with Inteligo" }, { "id": "33", "name": "BNP Paribas Poland" }, { "id": "144", "name": "Bank Nowy S.A." }, { "id": "45", "name": "Credit Agricole" }, { "id": "99", "name": "Pay with BOŚ" }, { "id": "119", "name": "Pay with CitiHandlowy" }, { "id": "131", "name": "Pay with Plus Bank" }, { "id": "64", "name": "Toyota Bank" }, { "id": "153", "name": "VeloBank" }, { "id": "141", "name": "e-transfer Pocztowy24" } ], "key": "issuer", "type": "select" } ], "name": "Online Banking PL", "supportsRecurring": true, "type": "onlineBanking_PL" }, { "details": [ { "key": "sepa.ownerName", "type": "text" }, { "key": "sepa.ibanNumber", "type": "text" } ], "name": "SEPA Direct Debit", "supportsRecurring": true, "type": "sepadirectdebit" }, { "name": "Trustly", "supportsRecurring": true, "type": "trustly" } ] }

[descorp]

Hey @JAIRMG

According to this JSON - it should work as expected. Do you have similar issue with iDEAL or onlineBanking_PL ?

[JAIRMG]

Yes, same behavior in both iDEAL and onlineBanking_PL

[descorp]

What version of Adyen API your backend is using?

[JAIRMG]

Hi @descorp they are connected to Adyen API v68

[JAIRMG]

Hi @descorp any updates about this issue?

[descorp]

Hey @JAIRMG

Apologies for a delay.

I don't see anything wrong with the /paymentMethods response you have shared above. I wasn't able to reproduce icon issue with it on v5.1.0 or v4 - it is generating correct path for icons:

Code sample:

let JSON = """
### here goes json ###
"""
let paymentMethods = try? JSONDecoder().decode(PaymentMethods.self, from: JSON.data(using: .utf8)!)
guard let paymentMethod = paymentMethods?.paymentMethod(ofType: IssuerListPaymentMethod.self) else { return }
let component = DotpayComponent(paymentMethod: paymentMethod,
                               apiContext: apiContext)
// present component.viewController

Icon URL: https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/small/dotpay/90@3x.png

My only assumption - something is modifying /paymentMethods response on your side. Could be parsing issue between your backend and client?

[descorp]

Hey @JAIRMG

How is it going? Were you able to resolve/find cause of the problem?

[JAIRMG]

Hi @descorp sorry I didn't follow up, I was ooo, we found the solution. The issue was on our side 🙇‍♂️ so basically when we create IssuerListComponent we were sending scheme as the type instead of the actual payment method, therefore the url was

https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/small/scheme/144@3x.png

now, after sending onlineBanking_PL or whatever method we are using the images are loaded properly. Thanks!