SIM hosted checkout page not applying x_header_html_payment_form HTML anymore

[andyman]

For SIM, the hosted checkout page isn't applying the html supplied in the x_header_html_payment_form field anymore. Instead, it is just displaying the raw HTML as text. The code used to work right, but now has stopped working properly.

Here's a screenshot:

No idea why this doesn't work anymore. My code has not changed for a few months.

I've tried a few variants, and it doesn't matter whether I send the x_header_html_payment_form as a hidden input or a textarea, nor whether the angled brackets are escaped or not. It still just displays the raw HTML as text rather than applying it.

[andyman]

This issue doesn't seem to be an issue with my code, as I can reproduce it through the account settings. It is perhaps a bug on in Authorize.net's side. Even if I change the header via the account settings page, it still displays the raw html in the preview as text rather than applying it.

Here is the preview:

[mitchchase]

I have the exact same problem. The html code in both the header and footer of my payment form stopped rendering, and instead displays all of the code on the payment form, same as your example.

I know the html in my payment forms was working about 1-2 months ago. I have not changed the code or edited my payment forms in several months.

I'm guessing that Authorize.net may have changed the way it handles payment forms, but I can't find any information that indicates that they've made changes.

Anyone have any answers?

[RaynorC1emen7]

Look like they move the page within a iframe and post the URL with the x_header_html,etc  as param.  They probably forgot to decode it before displaying.

[ddspringle1]

Getting the same issue as noted above - none of the styles being sent to the hosted payment form through the x_header... and x_footer... are being applied - the HTML appears to be being encoded (<, >, etc.) instead of being implemented as actual code.

<div id="divMerchantHeader2" class="Header2">&lt;style type="text/css" media="all"&gt;

[colt1911]

I sent a message to support -- they said they're aware of the problem and are working on it...

[Michelle]

Hey everyone,

Just to confirm, yes there is an issue with the payment form right now. We are aware of it and are working on it. We'll post to this thread once everything's fixed.

Thanks,

Michelle

Developer Community Manager

[Michelle]

Hey everyone,

This issue has been fixed. Everything should be working normally again. Thanks for your patience!

Michelle

Developer Community Manager

[juesch]

Michelle,

The issue isn't completely resolved, it seems.

While we're seeing styles being applied to the original payment form, they are not being applied when there's a transaction error and the form is re-displayed. Custom HTML is being output but the styles are not being applied.

Can we get this fixed please?

Thanks,

Juergen

[mfarrukh]

I am facing the same issue. It was working fine few days back, but now it's not working any more.

when i pass the input like that authorized.net just displaying the css as plain text and not applying css to my hosted page.

<input type="hidden" name="x_header_html_payment_form"
value="<style type='text/css' media='all'>* { font-family:Arial;} .HeaderFooter1 { display:none; } .Page { padding:0; max-height:90%; overflow:hidden; overflow-y:auto; } .Page form { float:left; }
TD{ font-size:11px; color:#000000;margin-left:1px;} .SectionHeadingBorder { margin:0 !important; background-color:#231f20; color: white;}
.SectionHeadingBorder .Label { color: white; } #tdRequiredFields { color: #fcc; } INPUT{font-family:Arial,Verdana, Trebuchet,Helvetica,Geneva,sansserif;
font-size:11px;color: #000000;margin-left:1px;} #tableLineItems th { background-color: #404040; padding:3px; text-align:center; } #tableLineItems td {background-color: #f3f2f0; padding:3px; } #tableLineItems th .Label { color:#fff; } #divSubmit { background-color:#231f20; color: white; margin-top:10px; padding:0 0 10px; } #divSubmit hr { display:none; } #tableButtons td:first-child { width:1px !important; } #divSubmit input { padding:3px 6px; margin:0 10px; width: 140px; text-align:center; margin-left:-50px; border:1px solid #666; border-radius:4px !important; color:#404040; background-color:#ddd; box-shadow:0 0 4px 2px rgba(0, 0, 0, 0.1); font-size:14px; cursor:pointer;} #divSubmit #lnkCancel{ padding:5px 6px; text-decoration:none; margin:0 0 0 5px; display:block; width: 100px; text-align:center; border:1px solid #666; border-radius:4px !important; color:#404040; background-color:#ddd; box-shadow:0 0 4px 2px rgba(0, 0, 0, 0.1); font-size:14px; cursor:pointer; } </style>" >