0 Votes

Accept Hosted Description and Invoice Number too narrow on mobile

Status: Under Review
by on ‎04-23-2018 04:04 PM

When using Authorize.Net Accept Hosted in an iFrame, the "Description" and "Invoice Number" areas are too narrow to read easily.

For example, see this screenshot: https://monosnap.com/file/HFdx6i4XhyZhoflYF9iE5i6rOkUZPD#


We are working around this by forcing the iFrame's container to have a minimum width of 400px, which is sufficiently wide for the Description and Invoice number to look better, but it's not the ideal solution because then mobile users need to scroll left and right to read everything.


Ideally, if the iFrame's area is more narrow than 300 px or something, the contents of description should fall BELOW the title "Description", and likewise the invoice number would fall under the title "Invoice Number".


Eg, instead of



Description {contents-of-description}

Invoice Number {invoice-number}



on narrow screens, it should become





Invoice Number




This would make better use of the limited horizontal space.

And yes I realize you can customize the form however you like if you use Accept.js, but I think this is a pretty general issue (experienced by anyone who actually tests their payment form on a mobile device) so it would make sense to fix it on the hosted solution. Besides, the fix should only require a few CSS tweaks.



Status: Under Review
by Administrator Administrator
on ‎07-06-2018 12:46 AM
Status changed to: Under Review