Search code examples
htmlmediawikicssgoogle-checkout

MediaWiki:Secure_HTML and Google Checkout button formatting

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?

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.