Bitmonet

Step 1: BitPay API Key

Go to the BitPay API key settings https://bitpay.com/api-keys
Get an API Key
Save your API key
This will be used later to authenticate with BitPay to create/check invoices.
Check out how to use the API Key

Step 2: Setup Backend API Wrapper
Note: This step requires writting code!

Choose an URL where the bitmonet client will query to make a BitPay Invoice and another to check it's status.
Example:
http://www.[your_domain].com/[create_invoice_method]
http://www.[your_domain].com/[check_invoice_method]
These will be used to setup Bitmonet
Receive the Create Invoice URL chosen above.

The bitmonet JavaScript file will reach this URL with some information to direct your server to create a BitPay invoice.
Both request URLs must be received as GET requests

This method on your server must post to the the BitPay URL with your API Key See Previous Step
Example:
https://[your_api_key]:@bitpay.com/api/invoice
This must be a POST request, and must post the Price and Currency.

These parameters will be included in the GET request sent to this method as such:
http://www.[your_domain.com]/[create_invoice_method]?price=1&currency=[USD]&callback=[some_callback_method]

The return from BitPay from this POST request will be a JSON object.

The return from your server method should wrap this JSON object as a JSONP object.
This is just the JSON data from the BitPay return value wrapped by the callback method passed by the GET request from bitmonet to this method:
[some_callback_method]([bitpay_return_value]);

Click to see an example in Ruby on Rails
```
def create_invoice
	api_key = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
	postdata = {:price => params[:price], :currency => params[:currency]}

	response = RestClient.post "https://" + api_key + ":@bitpay.com/api/invoice", postdata, :content_type => :json, :accept => :json

	render :json => response.body, :callback => params[:callback]
end
```
Receive the Check Invoice URL chosen above.

The bitmonet JavaScript file will reach this URL with some information to direct your server check a specific BitPay invoice's status.
Remember, both request URLs must be received as GET requests

This method on your server will also post to the the BitPay URL with your API Key See Previous Step
You will send a GET request to BitPay to check the invoice:
https://[your_api_key]:@bitpay.com/api/invoice/[some_invoice_id]
This must include the invoice ID that will be passed to you from bitmonet:
http://www.[your_domain.com]/[check_invoice_path]?id=[some_invoice_id]&callback=[some_callback_method]

The return from BitPay from this GET request will also be a JSON object.

The return from your server method should also wrap this JSON object as a JSONP object.
This is just the JSON data from the BitPay return value wrapped by the callback method passed by the GET request from bitmonet to this method:
[some_callback_method]([bitpay_return_value]);

Click to see an example in Ruby on Rails
```
def check_invoice
	api_key = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'

	response = RestClient.get "https://" + api_key + ":@bitpay.com/api/invoice/" + params[:id]

	render :json => response.body, :callback => params[:callback]
end
```
For more information on BitPay's API, visit their webpage:
https://bitpay.com/bitcoin-payment-gateway-api

Step 3: Include Bitmonet Files

DEVELOPER Include Jquery on your webpage
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
DEVELOPER Include Bitmonet on your webpage
<script type="text/javascript" src="/bitpay/bitmonet.min.js"></script>

Step 4: Setup Bitmonet

DEVELOPER Set bitmonet object and initialize it
```
bitmonet = new bitmonetDialog(params);

bitmonet.initialize();
```
Note: How to setup params will be shown in the next step

DEVELOPER Create a parameter object. Example:

var params = { 
    company: "My Company Name",
    logo: "my_logo_path.png",

    optionData: [ 
        {
            name: "Article Pass",
            description: "Read just this article",
            price: "10&cent;",
            value: 10,
        },
        {
            name: "Hour Pass",
            description: "1 hour of unlimited access",
            price: "50&cent;",
            value: 50,
        },
        {
            name: "Day Pass",
            description: "All-you-can-read news, all day",
            price: "$1;",
            value: 100,
        }
    ],

    numberClickedNeedBuy: 2,
    
    bitpayCreatePath: "http://my_website.com/create_invoice",
    bitpayCheckPath: "http://my_website.com/check_invoice",

    homeLink: "/index.html"
};

DEVELOPER Set the Following Required Paramters:
bitmonet.js will not work without these set!

Parameter	Explanation	Default
params.company	Your Company Name	null
params.logo	Your Logo Image URL	null
params.optionData	This is where you set the descriptions of your pass options for the dialog. It is an array of optionData Objects	see here
params.numberClickedNeedBuy	Number of articles user has to click before the BitMonet dialog box is shown.	15
params.bitpayCreatePath	This is where bitmonet.js will query for data to create the BitPay invoice. You should have created a function here. It is a string.	null
params.bitpayCheckPath	This is where bitmonet.js will query for data to check the BitPay invoice. You should have created a function here. It is also a string.	null
params.homeLink	What your home page is. Any users who try to access an article without paying will be redirected here.	"/index.html"

optionData Object:
Each optionData object is the data for a pass. Defaults are shown for the Article Pass in this table

Parameter	Explanation	Default
name	Name of the pass	"Article Passs"
description	How your pass behaves	"Read just this article"
price	How you display the price to the user	"5¢"
value	This is how much your pass is worth in cents.	5
note	This is a little write-up to the user after they have purchased their pass. Any warnings such as not clearing cookies should be put here.	"We hope you enjoy your article. Remember not to clear your cookies!"
class	To match the custom type with on the payment pages page. Currently unused.	"articlePass"

There are 3 optionData objects and set them to params. Anything you do not set will be overriden by the defaults. If you wish to not set one of the passes' data, use undefined. Example:

	params = {
		optionData: [
			{
				price: "10¢",
				value: 10
			},
			undefined,
			{ 	
				name: "24 Hour Pass"
				price: "$1",
				value: 100
			} ],
	};

This is the default optionData object:

	optionData = [ 
		{ 
			name: "Article Pass",
			description: "Read just this article",
			price: "10¢",
			value: 10,
			note: "We hope you enjoy your article. Remember not to clear your cookies!",
			class: "articlePass" 
		},
		{ 
			name: "Hour Pass",
			description: "1 hour of unlimited access",
			price: "$1",
			value: 100,
			note: "Please remember not to clear your brower's cookies during this time.",
			class: "hourPass" 
		},
		{ 
			name: "Day Pass",
			description: "All-you-can-read news, all day",
			price: "$3",
			value: 300,
			note: "Please remember not to clear your brower's cookies during this time.",
			class: "dayPass" 
		}
	]

Step 5: Set Articles Meta Tags

DEVELOPER On Each page that is an article, set this tag in the head tag:
<meta name="bitmonet-article" content="bitmonet-article" bitmonet-articleId="homepage"/>

Parameter	Explanation	Default
name	This is to identify the tag as the one bitmonet.js will check. In the future, this will be allowed to be customized in the parameters when creating the bitmonet object.	bitmonet-article
content	This is also to identify the tag. This will also be customizable in the future.	bitmonet-article
bitmonet-articleId	For multi-page articles this comes in use, as we track all the articles visited. This allows the use of the tag for multi-page articles without making it count as separate visits for each page.	""

You will need to set a different bitmonet-articleId for each article in the meta tag.

Step 6: Support Mobile Devices

DEVELOPER On Each page you would like to be responsive with bitmonet, insert this tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" user-scalable="yes">
This is a very standard tag on most responsive sites. This allows the page to actually go to the size of the mobile screen.

How to Setup and Use Bitmonet