Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How to add image to Additional detail payment method in checkout extensibility

How to add image to Additional detail payment method in checkout extensibility

quandev
Shopify Partner
2 0 0

I want to customize adding the image QR code in additional details payment method

Screenshot 2024-07-04 170448.png

Before using checkout.liquid:

Screenshot 2024-07-04 171201.png

After coding in checkout.liquid to add image QR code 

Screenshot 2024-07-04 171624.png

But in the future the checkout.liquid will be removed and switched to checkout extensibility so I need to migrate checkout.liquid to checkout extensibility
I read the document about checkout extensibility but I can't find the solution to add image into additional detail payment method. 
After researching I see Shopify provides the payment customize function to hide and rename payment method but does not have a way to customize (add image) the additional field payment method

Please help me in this case!
Thank you very much

 
Replies 3 (3)

Liam
Community Manager
3108 344 904

Hi Quandev,

 

You should be able to add images (in your case a QR code) to checkout with a checkout UI extension using the Image component

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

quandev
Shopify Partner
2 0 0

I know your idea but I really want to add an image to the exact Additional Details field of the payment method instead of creating a new image component like you said

meiem
Shopify Partner
4 0 3

I also have the exact same problem. Can someone please help?