InstantPro Google Checkout - Drop Down Item List
Adding a Drop Down List to your InstantPro makes it easier for your potential customer to navigate through your products and services, as well as keeping your web site clean and organised.
Please be advised that Freeola Limited is not affiliated in any way with Google or the Google Checkout service. We offer these tutorials purely for the convenience of our InstantPro customers.
For tutorials for how to integrate other Payment Processing Providers, you will need to visit the InstantPro Shop Integration home page.
This guide will show you how to implement your items into a drop down box for use with Google Checkout. The Freeola InstantPro service is an easy way to create a stylish web site in minutes! For only £3 per month you can have your own InstantPro web site, for more information please visit the Instant Sites page.
Before you start to use this tutorial, we suggest that you read the standard Google Checkout Buy Now Button Guide, so that you can familiarize yourself with the process and sign up for a Google account if needed.
Putting your Drop Down list HTML code together
1. You will first need to make note of your merchant code from your Google Checkout account. This can be found from the top right hand corner of your Google Checkout home page.
2. Now you can obtain the HTML code required to create your product drop down list. You can find this code by clicking here.
You will need to copy this code into a text editor on your computer such as Notepad, as we will need to make changes.
3. First of all, we will need to change the test Merchant ID from the code. The Merchant ID is located on the first and last line of the code.
On the first line you will see the following:
'action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/111111111111111" method="post"'
You will need to change the highlighted text to your own personal Merchant ID.
On the ninth line of code you will see the following:
'src="https://checkout.google.com/checkout/buttons/buy.gif?merchant_id=111111111111111&w=117&h=48&style=white&variant=text&loc=en_US"'
Again the highlighted text represents your merchant ID, you will need to change this to your personal merchant ID.
Adding your items to the drop down list
4. We now need to define the items that you are wanting to sell through your web site.
On the third line of code you will see:
'option value="1" selected="true">Small Freeola Printed T-Shirt £10'
The blue text indicates an identifier for the item, you will need to increase this as you add items. It also represents the order in which the items will appear in the list.
The red text is the description of your item, this is how the item will appear in your drop down list.
As you can see in the example, I have 4 items in my drop down list, you simply just repeat the line of code, amending it with your products' details.
5. Now that you have your items on your drop down list, you need to make sure that Google Checkout is able to process your items.
Change your Item Name
You will see that the 3rd to 6th lines of code look like this:
input name="item_option_name_1" type="hidden" value="Small Freeola Printed T-Shirt"
The blue text indicates the identifier of each item, this will need to relate to the number you have given the item above in the drop down box.
The red text is the name of your item, this is how the item will appear on the Google Checkout page.
Change your Item Value
input name="item_option_price_1" type="hidden" value="10.0"
The blue text indicates the identifier of each item, this will need to relate to the number you have given the item above in the drop down box.
The red text is the value of the item, this is how much Google Checkout will charge the user.
Change your Item Description
input name="item_option_description_1" type="hidden" value="Red T-Shirt with Freeola printed emblem"
The blue text indicates the identifier of each item, this will need to relate to the number you have given the item above in the drop down box.
The red text is the description of the item, this is an additional value which will be displayied next to the Item name on the Google Checkout page.
Change your Item Quantity
input name="item_option_quantity_1" type="hidden" value="1"
The blue text indicates the identifier of each item, this will need to relate to the number you have given the item above in the drop down box.
The red text is the quantity of the item, this will determine how many of your item will be added into the Google Checkout.
Change your Item Currency
input name="item_option_currency_1" type="hidden" value="GBP"
The blue text indicates the identifier of each item, this will need to relate to the number you have given the item above in the drop down box.
The red text is currency that will be set for this item, generally we would recommend to set this to "GBP" however the alternatives are: "AUD", "CAD", "EUR", "HKD", "JPY", "USD".
You can see how I have set this, and I have repeated the code for more items. You can see this by looking at the example.
Adding the Google Checkout Drop Down List to your InstantPro site
6. Now that you have your completed code, your ready to place this into your InstantPro builder.
From the Site Overview, click the 'Page Manager' button. You will now be shown the pages of your Instant Site, you can add your button to an existing page or you can create a new page.
7. Once you have selected your page, you will need to use the 'HTML' tool from the InstantPro Toolbar.
Click image to view full-size
8. You will now see the HTML view of your web site, this is where you can enter in the code we have put together.
We are aware that some previous versions of Firefox may have problems when trying to paste HTML code into the builder, if you encounter this problem we suggest to either update your Firefox installation to version 3 (or above) or use a different browser.
Click image to view full-size
We would suggest that for the time being you paste the button below all of your HTML code, you can move the Button once it has been added by using the InstantPro Editor, rather than the HTML Editor. Once you are happy that you have entered in the HTML code, press the 'Update' button.
11. Your list and button will now be displayed in your InstantPro Editor.
Click image to view full-size
You can now save your page. (Please note that if you move your button or drop down list before pressing save, you will likely need to amend the HTML code.)
Click image to view full-size
Adding multiple Drop Down lists to your InstantPro site
If you wish to add more items to your InstantPro web site, you simply need to follow the tutorial through again and ensure that on line 1 of the example code you change the form name and ID to something different to any forms you have already created, for example:
'form name="BB_MysecondBuyButtonForm" id="BB_MysecondBuyButtonForm"'
Once this has been done, you can then just add your completed HTML code underneath all of your existing code.
Click image to view full-size
