Adding a Payment Button

Spanglefish allows you to add a Paypal Shop very easily. However, sometimes you may just want to add a simple button that allows your users to make a single payment or donation.

This is most easily done by ‘embedding’ a payment button into one of yoru site pages using a ‘code string’ provided by the payment processor - e.g. Paypal. Something like this . . 

The first thing you will need to get is the button code string from the payment processor you have chosen to use. The example here has used the Paypal Button Maker to configure and build the button code illustrated here. As you can see, Paypal then provides you with a 'copy to clipboard' facility so you can copy the code, paste into a text document and store on your computer for future use.

Here is the Paypal code for our finished donations button . . 

Once you have the button code string safely saved on your computer, the next thing is to add the code to the the chosen page on your site.

**IMPORTANT** when adding the button code to your page you *must* add it in code view editor *not* wysiwyg view editor. If you simply paste the code into your standard page editor the button will not work and the code will be visible on the published page.

Go to the page on your site where you want to past the code. Because you will be adding the code to the page in code view, and that can be quite visually confusing if you are not familiar with HTML code, it's a good idea to add placeholder text in WYSIWYG view (**HERE** in the example below) as a guide to where you want the button to go, like this . . 

Then when you click on the 'Source' button in your text editor toolbar (shown above) to show the page code, the text placeholder you added shows where the button code must be pasted . . 

Highlight the placeholder text with your cursor, then paste your button code in its place . . 

Then click on the 'Source' button on your editor toolbar to revert to the WYSIWYG editor view of your page  to show the button in place.

In this case the red outline and grey markers below the button indicate the Paypal code, but will not be visible to the public. If you are happy with how this looks, then click on the UPDATE button at the bottom of your text editor to confirm and publish the page complete with the Paypal button.

Your page will now look something like this . .

You can now test it by trying to make an online donation, though you may want to stop at the last payment stage so as to not make an actual donation ;0)

** NOTE: using this process you can embed the payment button into multiple pages of your site if you want. You are not limited to adding it to only one page.