Cybersource Developer Community Cybersource Developer Community

hendra · ‎05-16-2013

Hi again guys.

My customer is requesting me to customize the header of her hosted payment form with a logo which leads to her homepage. I think the following little piece of code should fit nicely there:

<div style="text-align:right;">
	<a href="http://mysite.com" title="Home">
		<img src="http://mysite.com/images/logo.png" alt="" />
	</a>
</div>

However, if I'm going to put that as the value of this statement (to request hosted payment form):

<input type="hidden" name="x_header_html_payment_form" value=""/>

it might work, but that would be violating the validity of HTML, right?

So I tried to convert that header code into something like this:

&lt;div style=&quot;text-align:right;&quot;&gt;&lt;a href=&quot;http://mysite.com&quot; title=&quot;Home&quot;&gt;&lt;img src=&quot;http://mysite.com/images/logo.png&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/div&gt;

and put that code as the value of that <input> statement. And it works!

The question is, is this legal/ allowed by Authorize.net? I failed to find a documentation or a thread here discussing this conversion.

Thank you.

Hendra

RaynorC1emen7 · ‎05-16-2013

I would pick the second one. easier to read.

View solution in original post

RaynorC1emen7 · ‎05-16-2013

There is a example here

http://developer.authorize.net/guides/SIM/wwhelp/wwhimpl/js/html/wwhelp.htm#href=SIM_Submitting_tran...

Search on "Including a Style Sheet in the HTML Form POST"

hendra · ‎05-16-2013

Thanks Raynor.

Yes I've read that too.

But let me apply the example into an over-simplified fake request page, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>request</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
</head>
<body>
<form action="https://test.authorize.net/gateway/transact.dll" method="post">
<p>
<input type="hidden" name="x_header_html_payment_form" value="<style type='text/css' media='all'> TD{font-family: arial, verdana,trebuchet,helvetica,geneva,sans-serif;font-size:11px; color:#000000;margin-left:1px;}INPUT{font-family:Arial,Verdana, Trebuchet,Helvetica,Geneva,sans-serif;font-size:11px;color: #000000;margin-left:1px;}</style> Please enter your payment and shipping information." />
</p>
</form>
</body>
</html>

So if I bring that page to w3c validator, it would fail. They would report a couple errors like:

Unescaped '<' not allowed in attributes values
attributes construct error

The only way to pass w3c validation is by converting those less-than, greater-than, and double-quotes into HTML character entities i.e. < > and " respectively.

RaynorC1emen7 · ‎05-16-2013

does it works if you post it to authorize.net ?

hendra · ‎05-16-2013

I didn't test the example from Authorize.net documentation, but for my logo with link... yes. As the input value, either this one:

&lt;div style=&quot;text-align:right;&quot;&gt;&lt;a href=&quot;http://mysite.com&quot; title=&quot;Home&quot;&gt;&lt;img src=&quot;http://mysite.com/images/logo.png&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/div&gt;

Or this one:

<div style='text-align:right;'><a href='http://mysite.com' title='Home'><img src='http://mysite.com/images/logo.png' alt='' /></a></div>

would work well. Oh I guess I'm just making my own dilemma:)

Which one would you chose anyway?

RaynorC1emen7 · ‎05-16-2013

I would pick the second one. easier to read.

hendra · ‎05-17-2013

I appreciate your pick, Raynor.

But I decide to take the risk with the 1st.

Will report back here (hopefully not) whenever my method doesn't work any longer.

Cybersource Developer Community Cybersource Developer Community

Valid x_header_html_payment_form ?