MediaWiki:Secure_HTML and Google Checkout button formatting

StackOverflow https://stackoverflow.com/questions/14625187

Question

I'm using the MediaWiki:Secure_HTML extension, and trying to render a Google Checkout button I generated.

The button code is this:

<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/XXXXXXXXX" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm" target="_top">
<table cellpadding="5" cellspacing="0" width="1%">
    <tr>
        <td align="right" width="1%">
            <select name="item_selection_1">
                <option value="1">$80.00 - Freeside Membership Dues (Standard)</option>
                <option value="2">$40.00 - Freeside Membership Dues (Starving Hacker)</option>
                <option value="3">$65.00 - Freeside Membership Dues (Joint-MIC)</option>
            </select>
            <input name="item_option_name_1" type="hidden" value="Freeside Membership Dues (Standard)"/>
            <input name="item_option_price_1" type="hidden" value="80.0"/>
            <input name="item_option_description_1" type="hidden" value=""/>
            <input name="item_option_quantity_1" type="hidden" value="1"/>
            <input name="item_option_currency_1" type="hidden" value="USD"/>
            <input name="item_option_name_2" type="hidden" value="Freeside Membership Dues (Starving Hacker)"/>
            <input name="item_option_price_2" type="hidden" value="40.0"/>
            <input name="item_option_description_2" type="hidden" value=""/>
            <input name="item_option_quantity_2" type="hidden" value="1"/>
            <input name="item_option_currency_2" type="hidden" value="USD"/>
            <input name="item_option_name_3" type="hidden" value="Freeside Membership Dues (Joint-MIC)"/>
            <input name="item_option_price_3" type="hidden" value="65.0"/>
            <input name="item_option_description_3" type="hidden" value=""/>
            <input name="item_option_quantity_3" type="hidden" value="1"/>
            <input name="item_option_currency_3" type="hidden" value="USD"/>
        </td>
        <td align="left" width="1%">
            <input alt="" src="https://checkout.google.com/buttons/buy.gif?merchant_id=XXXXXXXXX&amp;w=121&amp;h=44&amp;style=white&amp;variant=text&amp;loc=en_US" type="image"/>
        </td>
    </tr>
</table>
</form>

I am able to get the button to show up on my page edit just fine - however, the formatting is completely off. It appears that the <input type="hidden"> items for each of my drop-down options is being rendered, which is adding a lot of whitespace. The items aren't visible, but in the generated Secure HTML it appears like this, more or less:

the HTML as rendered by Secure_HTML

I'm hoping to either use some CSS to correct the mess, or maybe there's another extension that's more appropriate or handles <input> better?

Was it helpful?

Solution

Turns out putting in whitespace may generate artifact <pre> tags via the Markdown, so there's some bugs with respect to formatting the code within the <shtml>. Removing a lot of the whitespace in code that gets hashed by the Secure_HTML resolves the problems.

OTHER TIPS

Wrap the chunk of hidden inputs in a block element. To neaten up a bit you can move that block to the top of the form -above the table. Since the input tags will still be inside a block-level element (the fieldset tags) it will remain valid XHTML.

<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/XXXXXXXXX" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm" target="_top">
<fieldset style=”display: none”>
    <input name="item_option_name_1" type="hidden" value="Freeside Membership Dues (Standard)"/>
    <input name="item_option_price_1" type="hidden" value="80.0"/>
    <input name="item_option_description_1" type="hidden" value=""/>
    <input name="item_option_quantity_1" type="hidden" value="1"/>
    <input name="item_option_currency_1" type="hidden" value="USD"/>
    <input name="item_option_name_2" type="hidden" value="Freeside Membership Dues (Starving Hacker)"/>
    <input name="item_option_price_2" type="hidden" value="40.0"/>
    <input name="item_option_description_2" type="hidden" value=""/>
    <input name="item_option_quantity_2" type="hidden" value="1"/>
    <input name="item_option_currency_2" type="hidden" value="USD"/>
    <input name="item_option_name_3" type="hidden" value="Freeside Membership Dues (Joint-MIC)"/>
    <input name="item_option_price_3" type="hidden" value="65.0"/>
    <input name="item_option_description_3" type="hidden" value=""/>
    <input name="item_option_quantity_3" type="hidden" value="1"/>
    <input name="item_option_currency_3" type="hidden" value="USD"/>
</fieldset>
<table cellpadding="5" cellspacing="0" width="1%">
   <tr>
       <td align="right" width="1%">
           <select name="item_selection_1">
               <option value="1">$80.00 - Freeside Membership Dues (Standard)</option>
               <option value="2">$40.00 - Freeside Membership Dues (Starving Hacker)</option>
               <option value="3">$65.00 - Freeside Membership Dues (Joint-MIC)</option>
           </select>
       </td>
       <td align="left" width="1%">
           <input alt="" src="https://checkout.google.com/buttons/buy.gif?merchant_id=XXXXXXXXX&amp;w=121&amp;h=44&amp;style=white&amp;variant=text&amp;loc=en_US" type="image"/>
       </td>
   </tr>
</table>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top