The MtGox Checkout Button is a simple cross-browser checkout button that update in real-time based on the current bitcoin price and can be implemented very easily on a website.

Documentation

See the following files:

• src/less/mtgox.less (source)
• src/coffee/mtgox.coffee (source)

Building

To build the distribution files just run the following commands from the main folder

# install dependencies
[user@host]$ npm install
# build everything
[user@host]$ ./jake

To build only parts of the dist/doc, see ./jake --tasks and run ./jake taskname

Usage

The user needs to add 2 components in its page, a span using the class mtgox and three data- tags:

• data-id: The transaction id
• data-amount: The transaction amount
• data-currency: The transaction currency

The content of the span element is to the user discretion but it is recommended to provide an alternate button with the payment link statically provided inside.

Exemple of a recommended default:

<span class="mtgox" data-id="099e586b-b4e6-45d1-aaf8-fbe1e44462d8" data-amount="100" data-currency="BTC">
	<a href="https://payment.mtgox.com/099e586b-b4e6-45d1-aaf8-fbe1e44462d8" target="_blank">
		<img src="https://payment.mtgox.com/img/mtgox-checkout.png">
	</a>
</span>

Once that span is on the page, the user includes our javascript file and all tags will be automatically transformed

<script type="text/javascript" src="https://payment.mtgox.com/js/mtgox.js"></script>

Internal

This is the HTML generated by the javascript file:

<a class="mtgox-button">
	<div class="mtgox-button-amount">
		<span class="mtgox-button-btc">428.50 BTC</span>
		<br>
		<span class="mtgox-button-cur">US$ 2052.52</span>
		<span class="mtgox-button-logo">
			<img src="https://payment.mtgox.com/img/button-logo.png" width="88" height="33">
		</span>
	</div>
</a>