Getting Started Center
Adding a PayPal Button to Your Website
In order for customers to use your newly created payment button, you will need to add the HTML code for the button into the HTML code for your website.
This article will show you how to add your PayPal button onto your website. However, how you paste the button code onto a web page depends on the application you use to create and edit your website. Keep in mind that while many website editors offer similar options for adding the code, some of the steps shown may be slightly different with your specific type and version of web editing software.
Starting from when you click Create Button, click Select Code to highlight the button code.
Right click on the highlighted code and select “Copy.” (or press Ctrl+C for Windows, or Cmd+C for Apple systems).
In this example we will show you how to enter the code into Dreamweaver. You can also paste the code into a simple text editor such as NotePad (for Windows) or TextEdit (for Mac) to save it until you are able to add it to your site. It is a good idea to avoid higher end programs such as Word, as it may automatically format or spellcheck parts of the code, which will prevent the button from working properly when the code is pasted onto your site. The code should remain exactly as written in order to work correctly.
In Dreamweaver, open the HTML file on which you want to display the PayPal button.By default, Dreamweaver opens the page in the Design view. The Design view shows how your page will display in a browser and does not show the HTML code that creates the page.
Many other programs will also display this kind of view for easier editing and layout of content and images, but you will not be able to add the HTML code for your button when using this kind of view.
To add your button code you’ll now need to access the HTML view.
In Dreamweaver, click on the displayed page in the location where you want your PayPal button to appear.
For other site-editing tools you may need to choose a particular section, widget or module to edit or add a new one. If you aren’t sure how to view HTML in your tool, contact the support team for the tool you are using.
On the Dreamweaver toolbar, click the "Split" button; Dreamweaver displays the HTML Code view in one pane and the Design view (what the website looks like) in the other pane. The cursor point will display at the same spot in the Code as where it is placed in the Design view to help ensure correct placement.
If you are using a program other than Dreamweaver, make sure you are using a mode that views and edits the HTML directly. If you can see HTML code for other parts of the page, you are most likely in the right place.
The button code should still be copied. To paste it into your web page click “Edit” and then choose “Paste” (or press Ctrl+V for Windows systems, or Cmd+V for Apple systems).
Check the Design view (or your editing tool’s equivalent). Your page should display the PayPal button and you should be able to see the image of the button and any dropdown fields that you added. If the button correctly displays in the Design view, go ahead and save your changes.
You can also use the Preview function to better see how the button will look when you upload your page to your website. In Dreamweaver, you can see the Preview by clicking on the small globe in the toolbar, as shown below.
If your button does not appear, and only shows up as HTML code in your preview, it means that you have not pasted the code into the actual HTML of the site. Go back to your editing area and double-check that you are editing the HTML itself.
You can delete and re-add the code as needed to get the look and placement you need.
Once the page has the look and feel you want, Save and Publish/Upload the code to your site. If you are not sure how to publish your new page you will need to contact the support team for your hosting company to get these details.
Additional Info and Frequently Asked Questions
Although editing web pages is beyond the scope of this short guide, this section describes some common pitfalls you might encounter while pasting your button code onto your web pages.
Make sure the code you paste onto your web page (or into an e-mail message) exactly matches the code that was generated when you clicked “Create Button”. Pasted code may not match the generated code for the following reasons:
- You did not copy all of the generated code.
- Your editing tool might have special areas for pasting HTML code and different areas for pasting URLs or display text. Be sure you paste the generated code into a field that accepts HTML code.
- Your editing tool might change some characters in the pasted code. For example, your editor might add numbers to some of the code or replace a special character (e.g. & or $) when you paste code (this is known as enumerating form variables). If you feel comfortable reviewing the code you can remove this manually. If not, you will want to contact your software’s support group for more information on how to keep the software from changing the code in this way.
Depending on your settings, Dreamweaver may automatically add numbers or replace special characters. To turn off this feature in Dreamweaver:
- Click Edit > Preferences on the menu bar, then choose the Code Rewriting category.
- Clear the Rename For Items when Pasting check box (when enabled, this option ensures you don't have duplicate names for form objects).
- Click OK to save your changes.