How to configure website icon on payment sheet using Apple Pay JS API

According to the documentation provided in https://developer.apple.com/design/human-interface-guidelines/technologies/apple-pay/checkout-and-payment/#customize-the-payment-sheet under Displaying a website icon section, we can use icon configured for bookmarks or URL fields to display on the payment sheet but if the developer need to explicitly configure the icon using Apple Pay JS or any other way to display in summary view on payment sheet.

Answered by DTS Engineer in 803304022

Hi @appsfromdiscounttire,

You can display the website icon on the Apple Pay payment sheet by setting the apple-touch-icon HTML property on the presenting page in the header section. See Configuring Web Applications to learn more about the HTML property,

For example:

<link rel="apple-touch-icon" sizes="48x48" href="/icons/icon.png”/>

Follow the specs outlined in the "Displaying a website icon” section from the Human Interface Guidelines for Apple Pay.

Cheers,

Paris X Pinkney |  WWDR | DTS Engineer

Hi @appsfromdiscounttire,

You can display the website icon on the Apple Pay payment sheet by setting the apple-touch-icon HTML property on the presenting page in the header section. See Configuring Web Applications to learn more about the HTML property,

For example:

<link rel="apple-touch-icon" sizes="48x48" href="/icons/icon.png”/>

Follow the specs outlined in the "Displaying a website icon” section from the Human Interface Guidelines for Apple Pay.

Cheers,

Paris X Pinkney |  WWDR | DTS Engineer

How to configure website icon on payment sheet using Apple Pay JS API
 
 
Q