Advanced Skills‎ > ‎

PayPal

PayPal can be added into a Google Site for purchasing items, making donation, etc.

This page includes a basic example along with setup instructions.  
  • Other PayPal variations can also be implemented in a Google Site, such as 'Purchase', 'Donate' and 'Add to Cart' buttons followed later by a 'Checkout' button.
  • Although Google Sites is NOT an e-commerce platform, it can accommodate a variety of sales transactions when used in conjunction with PayPal or alternative tools.

Setup

To summarize… Starting in the PayPal account create the item for purchase, and copy it's HTML code.  Then at Google Sites, insert an HTML box object holding the HTML from PayPal.  Finally edit the Google Site to add any additional desired information that may not appear in the PayPal HTML.

Prepare the PayPal Item

These instructions are high-level, and assume the reader is familiar with using the merchant area of a PayPal account.
  1. Sign into the PayPal account.
  2. Go to the Merchant Services tab.
  3. Create a new item - and configure it.
  4. Find the link to view the HTML, then copy the HTML into the clipboard.

Google Sites Page Editing

Now we add the PayPal elements into the web page.
  1. At Google Sites go to the desired page, enter edit mode and position the cursor in the desired place.
  2. Insert an HTML Box: Insert -> Gadgets -> HTML box
  3. Past the HTML code from PayPal into the HTML box.
  4. Save Site page to review the appearance.
  5. Edit page further to adjust layout and to add additional desired information to the page (such as an item name that was not in the PayPal HTML).
  6. Note if you are experienced with editing HTML, you may also decide to make some adjustments to the PayPal HTML.
  7. Test.
Note: there may be alternate methods for integrating PayPal into a Google Site.

Example

In this example a school is hosting a kids movie night.  Parents purchase tickets online in advance.  The red markings were added to show the extent of the HTML box.

Sample Page Content

Movie Night!
Advance Tickets $7 - purchase online here (credit card/PayPal), or by dropping off the order form (bottom of flyer) to the school office.
  • Buy tickets in advance until 8:00pm on DATE, the night before the show.
  • Pick up your tickets at the Will Call Table at the entrance.
----before HTML box-----
----after HTML box----
* If you wish to purchase more than 5 tickets, leave the drop down set to 1 and click on Add to Cart. On the checkout page you can adjust the quantity to your desired amount.

Notes:
  • This example does NOT go to a real PayPal account, (Pushing the button results in an error message.)  For a live account, clicking would provide a PayPal screen where the visitor can pay by using their PayPal account or by using a credit card.
  • When the transaction completes, the merchant's PayPal account has a data entry showing the transaction including any data provided in the webpage form.  The PayPal merchant can download all the data into a spreadsheet.  So the PayPal volunteer provides an 'advanced ticket sales' spreadsheet printout to the Will Call Table.

Sample HTML

This is the PayPal-provided HTML used in the above HTML box:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="THIS-IS-A-FAKE-VALUE">
<table>
<tr><td><input type="hidden" name="on0" value="Select the Number of Tickets">Select the Number of Tickets</td><td><select name="os0">
 <option value="1 Ticket">1 Ticket $7.00 USD</option>
 <option value="2 Tickets">2 Tickets $14.00 USD</option>
 <option value="3 Tickets">3 Tickets $21.00 USD</option>
 <option value="4 Tickets">4 Tickets $28.00 USD</option>
 <option value="5 Tickets">5 Tickets $35.00 USD</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Student Name(s)">Student Name(s) <i>(comma separated)</i></td><td><input type="text" name="os1" maxlength="200"></td></tr>
<tr><td><input type="hidden" name="on2" value="Parent or Guardian Name(s)">Parent or Guardian Name(s)</td><td><input type="text" name="os2" maxlength="200"></td></tr>
<tr><td><input type="hidden" name="on3" value="Emergency Contact Number">Emergency Contact Number</td><td><input type="text" name="os4" maxlength="200"></td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="PayPal Button image" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>