template variables in links is broken with hyperlinking

Using $creditCardLink I'm trying to create the following link with the following behavior inside hyperlinked text.
It works fine just pasted, but ugly. What I'd like to be able to do, is have the behavior for hyperlink to be similar to "long form", so to speak.



Clicking on add link in the toolbar and pasting the variable above creates something like this. I am unable to remove the http:// part as the UI keeps readding it. Also, https// looks broken

My next attempt is to modify the content through raw, and I put it like so. However, now $creditcardlink does not load at all.