Strange Issue Setting Stripe Logo Image

Set the stripe checkout logo image:

I print the url to the image it resolves correctly, using the same code directly or in a variable it somehow gets transformed:

Code Sample:

# Printing this code works, the image url resolves correctly when pasted into a browser as expected:
print(anvil.server.get_app_origin()+'/_/theme/'+self.charge_icon)
#returns: https://imh3yzldwoa6usbq.anvil.app/debug/VTNGDGFY355I35GMZIN7H37F7BN7KD2Q%3DVWYAJCGQXWRQFBDZV5EDSPRU/_/theme/summarai_bob_icon.png

# However, assigning it in the stripe checkout, in the same way, the url is tranformed, and image doesnt render
icon_url=anvil.server.get_app_origin()+'/_/theme/'+self.charge_icon
#If I right click the broken image in the stripe checkout, and 'copy address', the url has 2 digits added a 2 and a 5, after the % symbol:
#returns: https://imh3yzldwoa6usbq.anvil.app/debug/VTNGDGFY355I35GMZIN7H37F7BN7KD2Q%253DVWYAJCGQXWRQFBDZV5EDSPRU/_/theme/summarai_bob_icon.png

#Good url: ----->> %3DVWYAJCGQXWRQFBDZV5EDSPRU/_/theme/summarai_bob_icon.png
#Failing url: ----->> %253DVWYAJCGQXWRQFBDZV5EDSPRU/_/theme/summarai_bob_icon.png

Has anyone run into a similar issue to this?

Seems worth noting as well, that even using a straight hard coded string, fails in the same way:

icon_url='https://imh3yzldwoa6usbq.anvil.app/debug/VTNGDGFY355I35GMZIN7H37F7BN7KD2Q%3DVWYAJCGQXWRQFBDZV5EDSPRU/_/theme/summarai_bob_icon.png'
#The image icon is broken in the stripe checkout and right click, 'Copy image Address' returns:
#https://imh3yzldwoa6usbq.anvil.app/debug/VTNGDGFY355I35GMZIN7H37F7BN7KD2Q%253DVWYAJCGQXWRQFBDZV5EDSPRU/_/theme/summarai_bob_icon.png

Finally, also seems worth noting, using an image url outside of anvil, works just fine in the checkout:

icon_url='https://sapphire-giant-butterfly-891.mypinata.cloud/ipfs/QmYg6bhzjMChttps://www.youtube.com/watch?v=fUSE-_P5QO4bNiz8D1G9SkMhmijQqW2uxAu73PCoCuMZ1t'
#The above sets the image correctly

I could solve the issue by just using an external image, but it would be less ideal.

[Admin note: moved to existing topic]

I am having a strange issue when trying to set the stripe logo. The url somehow gets transformed when assigned to the stripe checkout, if I print out the url, and paste it into the browser, the image resolves successfully as I would expect:

print(anvil.server.get_app_origin()+‘/_/theme/’+self.charge_icon)

However, when the same code used to set the icon:

icon_url=anvil.server.get_app_origin()+‘/_/theme/’+self.charge_icon

It fails, if I right click, ‘copy image address’ for the broken image, the url it gives me, has 2 digits added: 25, after the % symbol

https://imh3yzldwoa6usbq.anvil.app/debug/VTNGDGFY355I35GMZIN7H37F7BN7KD2Q%253DVWYAJCGQXWRQFBDZV5EDSPRU/_/theme/summarai_bob_icon.png

I’ve tried a few different ways, even assigning a variable that prints correctly, it somehow gets transformed, always adding those digits. Has anyone run into a similar issue, or maybe I’m missing something?

Thanks for reporting. It looks like the url is being encoded twice. For more context you can look up url encoding.

I’ve moved to bug reports and we’ll get that fixed.

For now you can try using a relative url instead of the full url - _/theme/….


icon_url = '_/theme/' + self.charge_icon

This is likely to be a problem only when running the app in the ide and should work fine in the published app.

3 Likes