Buy my book, baby, and I'll drop down for ya.

February 20, 2012 12:22 AM

I would like to add a paypal 'Buy Now' button for a single item to a self-hosted wordpress website, with a drop-down selection list. I've created the button in Paypal but the code becomes messed once the html is inserted in the wordpress page - the options are all visible as if in a table, not in a drop-down. I've googled but can't find the solution.

A friend has published a non-fiction, softcover book that he wants to sell directly from his website. Some non-profits engaged in related issues want to promote the book for him and, in return, he wants to give a portion of the sales back to the groups. We figured the way to do this was to have a "referring organisation" drop down tied in with the paypal buy now button (much like 'small, medium, large as if selling t-shirts). When the order comes in, he'll keep track of how many referrals came from organisation 1, org 2, and so on.

However, the code gets messed up once it's pasted into the (html) section of the wordpress page. This appears to be a known problem but all the solutions I've tried (via google) don't work. It would work if we ignored the drop-down but that means we don't know who to give a percentage to which is important to him.

I see that there are wordpress paypal plug-ins - I've tried a couple but they don't seem to have the drop-down selection option that the paypal button has.

So I am seeking advice, a work-around or recommendation of a plug-in. We are only selling one item so don't need a shopping cart however, if that is the way to go, then so be it.

tl;dr Need a work around to add a paypal buy-now button with a drop-down select list to a self-hosted wordpress website.

posted by Kerasia to computers & internet (10 answers total)

You could try tracking visitors going through the site with Google Analytics, and seeing how many check-outs come from the various referral sites.

Or, if they're real-world referrals rather than online ones, you could give each referring organisation a unique voucher code they can hand out. Various ecommerce platforms (like woocommerce, for example) can handle that easily.
posted by tvaughan at 12:48 AM on February 20, 2012

Thanks tvaughan. Is woocommerce integrate with wordpress or is it a standalone shop/cms? The website provides a lot more than the book sale, that's just one part (albeit a major one, for the author). The rest of it is free information for people interested in the topic and wordpress is perfect for that part.
posted by Kerasia at 12:51 AM on February 20, 2012

Woocommerce is a Wordpress plugin, so it would work with an existing WP site. You'll probably have to spend some money; Woocommerce itself is free, but there are a whole lot of associated plugins that go with it (including one that offers codes, I believe) which cost.
posted by tvaughan at 1:00 AM on February 20, 2012

Insert the button as a simple linked image - details here.
posted by bullox at 4:39 AM on February 20, 2012

Apologies, clicked post too early. Paypal allows you to specify 'versions' e.g. sizes, in their checkout process. This would provide the same functionality, but at their end. Instructions.
posted by bullox at 4:42 AM on February 20, 2012

Perhaps you should create a shortcode for the button, so all the PayPal, code is in a functions.php file instead? That way you can just put [paypal] in your editor window, and the shortcode converts it for you.

Lots of examples of Shortcodes here.
posted by backwards guitar at 5:04 AM on February 20, 2012

http://en.support.wordpress.com/paypal/

Note Step 6:
You will see two (2) sets of code: html code Website and a link for Email. Believe it or not, you do not want the code for websites. WordPress.com does not let users put post web forms so the website code would be stripped. You must use the code found in Link for Emails. This is the link that you want to attach to your actual button image.


I've done this a number of times for a client and it works quite well. Link to a static image and you're good to go. Your code will end up looking like this:

{a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YPFWSA76PLGZY"}{img src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" alt="" /}{/a}

Only, you know, not with curly brackets. And the static image can be anywhere you like, not just at PayPal.
posted by Guy_Inamonkeysuit at 6:40 AM on February 20, 2012

I solve this for a client of mine by creating a shortcode for her. She can place [paypal_form] on any blog post or page and this code turns it into a form. Very lightweight, works great. You can see there's a width on the hidden field, just change "hidden" to "text" and you have a working form. Holler if you have any questions about this code.

<?php
// if you already have a "functions.php" file
// in your theme, add the code below to the end of it
// otherwise, save this as functions.php and place it in
// your theme's folder
function paypal_form() {
ob_start();
?>
<div class="form_paypal">
	<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
		<input type="hidden" name="item_number" value="item-number-here">
		<input type="hidden" name="cmd" value="_xclick">
		<input type="hidden" name="no_note" value="1">
		<input type="hidden" name="business" value="[e-mail]">
		<input type="hidden" name="currency_code" value="USD">
		<input type="hidden" name="return" value="http://www.example.com/thank-you-page/">
		<input type="hidden" name="item_name" value="Non-refundable Deposit" size="45">
		<input type="hidden" name="amount" size="45" value="150.00">
		<input type="submit" name="Submit" value="Pay Deposit via PayPal" class="submit">
	</form>
</div>
<?php
$form = ob_get_clean();
return $form;
}

add_shortcode('paypal_form', 'paypal_form');

posted by artlung at 8:01 AM on February 20, 2012

Many thanks to artlung. From CA, USA to NSW, AUS metafilter comes to the rescue
posted by Kerasia at 1:27 PM on February 21, 2012

Update: I ended up using the ultra-simple paypal plugin. It allows me to have a drop-down selection, a shipping component and a side widget cart. It can also allow a three-step process (add to cart, fill out form & submit, go to checkout) which may be useful for some folk. Artlung likes it too!
posted by Kerasia at 3:59 PM on February 29, 2012 [1 favorite]