Probably the easiest way to sell things online is using PayPal purchase buttons. PayPal buttons can be a good fit in cases when a complicated and full-featured e-commerce solution might be overkill—for example, if you have a very simple single product, like an e-book.

One thing you may not have realized is just how customizable your PayPal purchase buttons can be. This post outlines a few ways to safely customize your PayPal purchase buttons so that they match your needs for your site.

Creating the button on PayPal

to start, we’ll be creating a PayPal button, with options as captured in this screenshot:

The basic result

Markup

The options above lead to this HTML markup:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  <input type="hidden" name="cmd" value="_s-xclick" />
  <input type="hidden" name="hosted_button_id" value="BF7T6TS6G8LTW" />
  <table>
    <tbody>
      <tr>
        <td>
          <input type="hidden" name="on0" value="Purchase options" />Purchase options
        </td>
      </tr>
      <tr>
        <td>
          <select name="os0">
            <option value="Thank you">Thank you $5.00 USD</option>
            <option value="Thank you very much">Thank you very much $10.00 USD</option>
            <option value="Thank you so much! You guys are great">Thank you so much! You guys are great $20.00 USD</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
  <input type="hidden" name="currency_code" value="USD" />
  <input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif" />
  <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" />
</form>

Button

Pasting the above HTML into your site gives this button:

Purchase options

Thank you $5.00 USDThank you very much $10.00 USDThank you so much! You guys are great $20.00 USD

What can be modified

You can change the presentation and the text without affecting how the form works.

If you’re relatively new to HTML, the code block we pasted in above looks like a scary tangle of markup that works by magic. But it’s actually made of three interwoven elements:

1. An HTML form that submits itself to PayPal
2. Presentational HTML markup to make the form look a certain way (have a button, be a certain width, etc.)
3. Raw text that talks to the user

The cool part is this: You can change the presentation and the text without affecting in any way how the form (that is, the purchase) works. In other words:

You can’t change:

• Anything that tells the form what to do. Don’t change any of the following attributes anywhere: name, type, value, action, method, target.
• Anything that talks directly to PayPal. Leave alone anything with a https://... URL in it, with one exception: the URL for the button image.

You can change:

• Plain text anywhere, like the text in between the <option>...</option> tags.
• Presentational HTML elements, like the button image URL or <div> or <td> elements.
• The order in which sibling elements appear (but not the element hierarchy).

Our modifications

Here’s what we’ll be doing to our button:

No more table formatting

All the clunky table formatting (the table, trs, tds, etc.) is strictly presentational and can be removed.

We’re going to make the “Buy Now” button go next to (not below) its dropdown—something that would be really hard with table formatting. To do this, we’ll wrap everything in <table> elements that have display: inline-block styling. For demo purposes, I’ll do this with styles directly in the HTML, but the sensible thing on your own project would be to give the elements class names and control their styling using CSS.

Modifications to the text dropdown

If you’re like me, “$20.00 USD” feels way wordier than you want. You can change the text inside every tr tag to whatever you want—it doesn’t make a difference to the form you’ll need to submit to PayPal. So we’re going to remove the extra zeroes and add a pipe character (|) for visual grace.

New button image

PayPal only lets you choose “Pay Now” and “Buy Now” for your button text. That’s it, and you also can’t customize colors, fonts, or anything else. I know that the image you use for the “Buy Now” button is totally arbitrary—it doesn’t affect the form at all—so I’ve replaced it with my own.

I used a great free graphics generator that lets you design buttons. They have a ton of fonts, including a lot of “dingbats” (icon) fonts, so I’ve created a button that looks like a PayPal button, but whose only text is a smiley face. Once I created and downloaded the button, I uploaded it onto my own hosting, at https://pressupinc.com/wp-content/uploads/2014/03/smiley_button.png.

New colors, fonts, and background colors

I’ve prettied up the form and its elements with custom fonts and a new color scheme, and I’ve given the whole purchase form a background and border that’s compatible with the general styling of the page.

The modified markup

Here’s what our HTML markup looks like now.

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="padding: 10px; display: inline-block; background: #EEE; border: 1px #AAA solid;">
  <input type="hidden" name="cmd" value="_s-xclick" />
  <input type="hidden" name="hosted_button_id" value="BF7T6TS6G8LTW" />
  <div style="font-weight: bold; color: #333;">
    <input type="hidden" name="on0" value="Purchase options" />Purchase options:
  </div>
  <div style="display:inline-block; vertical-align: middle;">
    <select name="os0" style="background: #7B7979; color: #fff; font-family: 'Open Sans';">
      <option value="Thank you">Thank you | $5</option>
      <option value="Thank you very much">Thank you very much | $10</option>
      <option value="Thank you so much! You guys are great">Thank you so much! You guys are great | $20</option>
    </select>
  </div>
  <div style="display:inline-block; vertical-align: middle;">
    <input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://pressupinc.com/smiley_button.png" />
  </div>
  <div>
    <input type="hidden" name="currency_code" value="USD" />
    <img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" />
  </div>
</form>

Notice there are a ton of “style=” declarations all over the place. Those are custom styles I added; I included them for demo purposes, so you could see what was controlling which styles. To do it properly, you would give a class to each element you wanted to style, and control the styles in the CSS.

Also notice that I’ve removed everything that looks like a <div>, and wrapped most things in brand-new <div></div> elements. You’re free to do this; it doesn’t matter at all for the workings of the form.

The result

Here’s the new form.

Purchase options:

Thank you | $5Thank you very much | $10Thank you so much! You guys are great | $20

It works perfectly—in fact, if this post helped you, why not try it out? :-)

In conclusion…

A PayPal purchase button can be a really attractive and eye-catching part of your site, if you know what you’re doing. Hopefully this tutorial has given you some ideas!

If you have any thoughts or questions, please comment below, and, as always, feel free to get in touch!