PayPal - Add a PayPal Button in Sandvox

« Pagelet - Photo Link Opens New Window
HowTo
PDF Documents Add to Sandvox Site »

Aligning the Button

Alignment of the button in a Raw HTML Pagelet is controlled by the chosen Sandvox design. On my site the button is centre aligned automatically without me doing anything.

An easy way to make it centred without troubling with CSS is to paste the PayPal HTML code into a Rich Text pagelet and center align the paragraph e.g.:





Find your PayPal button code and copy the text. Don't copy anything else:

1. In Sandvox: On the Toolbar, click Pagelets > Rich Text

2. Click into the latin-like text of the Untitled Text pagelet.

3. Select All [Command+A] (Leave the text selected)

4. From the Sandvox Menus, click
Edit > Paste HTML into Text. You should see a little white ? on a blue square replace all the text. (I'm guessing aligned to the left of your pagelet.)

5. With the 'eye-beam' cursor blinking to the right of the blue square, from the Sandvox Menus, click
Format > Alignment > Center
(Align Left | Align Right)

The blue square should now be centre aligned.

When you publish your site the blue square will be replaced by the PayPal button.

This is a test for inserting a PayPal button. You need Sandvox Pro to be able to do this because you need to have access to the Edit Raw HTML feature.

My step-by-step tutorial is here:

[Sandvox - PayPal Button]

...which has been ['Tweeted' about by Karelia]

On the far right is a Raw HTML Pagelet with the Pay Now Button code from PayPal pasted in. Below this text, a Buy Now Button code has been pasted into a Rich Text page. This can be done either by left-click in the text where the button is to go and clicking Edit > Paste HTML into Text or by right-clicking on the text and choosing to Edit Raw HTML..., then pasting in the PayPal Button code, as shown below:

To make the button work:
The PayPal button won't work from within Sandvox. When you publish the page the button will work.

If you don't want to publish the page 'live' without testing the button first, you can export your site to a folder. From within Sandvox:
1. Click Site > Export Site...
2. In the Save As: field, type in a name for the folder (e.g. MySiteName) into which the site will be created on you hard drive and choose where to save this folder e.g. Documents. The folder will be created by Sandvox.
3. Click Save
4. In the Finder, navigate to the page in your site that has the PayPal button and double click on the file e.g. pay_now_page.html. This page should open in your default browser. Note that the web address will look something like:
"file:///Users/ username/ Documents/MySiteName/pay_now_page.html"
5. Clicking on your PayPal button in the browser will take you to the PayPal site.

To see the button image in Sandvox:
If the Button just shows as an outline containing a little blue square and white question mark within Sandvox, you can turn-on live feed for a moment to allow Sandvox to download the button image. In Sandvox:

1. Click Sandvox > Preferences...
2. Below General, Tick Show "live" data feeds and pages (may slow down page loading)

The Button images should be displayed. I have found that I need to click on to a different page in the site outline then back to the page with the buttons on, for them to be displayed. Once they are cached, you can untick live feeds.

18 Sep 2008 22:23

Powered by Sandvox | Web hosting by A2 Hosting | Site by Neil Boyd cc by-nc-sa 2010