Easy HTML hacks to customize your PayPal purchase buttons


PayPal logo | setting custom PayPal purchase buttons

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:
PayPal options screen

The basic result

Markup

The options above lead to this HTML markup:

<form action="//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="//www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif" />
  <img alt="" src="//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

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 //... 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 //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="//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="//pressupinc.com/smiley_button.png" />
  </div>
  <div>
    <input type="hidden" name="currency_code" value="USD" />
    <img alt="" src="//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:

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!

10 thoughts on “Easy HTML hacks to customize your PayPal purchase buttons

  1. Claire DiCola

    Great Post! Is there a way to change the style of the only some words of the drop down text. So in your example, would it be possible to bold or strike-out the words THANK YOU?

    Reply
  2. Nicole Burke

    Hey! I don’t mind how our drop down and add to cart buttons are, but the drop down is super wide and running into the next block’s drop down. Wondering how to code the drop down as is to be shorter in width. It’s on this page: //goldenwellapiaries.com/csa/
    Thanks so much!!

    Reply
  3. Nicole Burke

    So, I figured it out! How about centering the text, drop down and add to cart buttons instead of them being left justified? Thank you!!!

    Reply
  4. Phil

    Hi there,

    Is there any way to combine this with a ‘mouseover’ and ‘mouseup’ Javascript code so that the button works more interactively?

    Reply
  5. Brandon

    Hi there,

    I have been using an <a class="button" href "paypal_email_button_link" format in order to allow me to use my website's generic button style. But I just recently found out I needed to start using the html code instead because of an affiliate plugin I am using.

    My question is, do you know how I can still use my theme’s generic button style like i was, But still have all of the html form behind it so that i can achieve the same thing still?

    Thanks for any help!

    Brandon

    Reply
  6. Scott

    Hello Fred. Thank you for the post,. I know it’s from a while ago but I am currently running into a similar issue. Like in your example, where the “thank You |$5” is followed by a lot of space to the left, my Option Value field does not adjust to the size of the choice with the maximum number of characters. Instead it stays the same width and runs off the page. I’ve tried specifying table width and row width, nothing seems to work. Any suggestions?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *