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 2 (2)

Liam
Shopify Staff
2873 312 820

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