Building a bitcoin price ticker with the LUXSTACK Javascript SDK

Bitcoin-enable your apps with LUXSTACK

LUXSTACK is a great way to build bitcoin apps. You can make apps for many platforms, including the web browser.

This post will show the steps to add a bitcoin price ticker on your site, updated every 10 minutes with price data taken from the LUXSTACK platform.

Step 1: Get your access keys

First you will need to get your access keys which will allow your browser application to connect to the LUXSTACK platform.

Sign up to LUXSTACK, and click “Settings” on the dashboard. This page contains your application’s ID as well as a secret key your application will use.

The application ID:

We’ll also need a key, like a password, for the app to connect to the service. For this example, we are creating a Javascript browser application, so let’s use use that key.

The application secret for browser Javascript:

Step 2: Allow access for your site’s web address

You must add your website address on the settings page. This is a security feature to ensure that only a site you choose can use your app.

Just add the domain name. If your web page is at http://example.com/files/index.html, you can use http://example.com.

The app’s website:

Step 3: Add the code to your web site

Now it’s time to add code to your your website. Copy the code below, and don’t forget to replace appId and appSecret with your keys.

http://example.com/index.html
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<script src="razrbit.min.js"></script>

<div><span id="bitcoinPrice">###</span> USD</div>

<script>
	var Razrbit = require("razrbit");

	var client = new Razrbit(
		"YOUR_APP_ID",
		"YOUR_BROWSER_SDK_APP_SECRET");

	var tenMinutesinMilliseconds=1000*60*10;
	setInterval(updatePrice, tenMinutesinMilliseconds);
	
	updatePrice(); //Initial display
	
	function updatePrice(){
		client.markets.price("USD", function (err, price) {
			$("#bitcoinPrice").html(price);
		});	
	}
</script>

Step 4: Add razrbit.js to the folder

You must also add razrbit.min.js to the same folder as the web page. Download the Javascript SDK, and copy razrbit.min.js from the /dist folder to the correct folder on your web site.

Step 5: Enjoy

Load your web page. If all is well, you should see the bitcoin price on your site, updating every 10 minutes with fresh data.