Bitmonet

Step 1: Coinbase Settings

Go to Merchant Settings https://coinbase.com/merchant_settings
Fill in information (Most importantly, the "Company Name")
DEVELOPER Put in your homepage as your success URL Upon hitting the successURL, bitmonet.js will check for the callback parameters and give passes to the user.
Go to Account Settings https://coinbase.com/account
Fill in your name. This is important! After the user is done paying. There will be a button to say return to the [account name] that gets them back to your website.

Step 2: Setup Payment Keys

Go to Payment Pages https://coinbase.com/merchant_tools?link_type=hosted
Fill in information for each Pass type:
- Item Name: Article Pass, Hour Pass or Day Pass
- Item Description: How each pass works
- Amount: How much each pass costs
  Used later in setting up Bitmonet Javascript Prices
Click Generate Page Code For Each Pass
DEVELOPER Copy Each Pass' Payment Code
Later required for Bitmonet Javascript Payment Settings

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="/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",
	    logo: "my_logo.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,
	    pageCodes: [
	        '11111111111111111111',
	        '22222222222222222222',
	        '33333333333333333333'
	    ],

	    homeLink: "/index.html",
	};

DEVELOPER Set the Following Crucial 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.pageCodes	This is where you set the payment codes of your passes from coinbase. It is an array of strings. Get the code at the end of the href attribute of the anchor tag after the last `"/"`. The codes correspond respectively to the Article Pass, Hour pass and the Day Pass in order.	['', '', '']
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