January 15

Integrate PayPal Button with Contact Form in WordPress

[UPDATE: 04/01/2015 Paypal re-direct revision. Added test form with auto-redirect after form submission.]
[UPDATE: 10/26/2013 Addition of the ‘on_set_ok’ action handler for the “Additional Settings” section.]

This is a tutorial I wrote to demonstrate how you can add a PayPal button to a WordPress site by integrating it with a contact form.

It works by allowing the visitor to submit a form and having the Paypal button appear automatically. The updated version, re-directs to your paypal payment page instead.

I’ve seen too many websites that offer a service with no request from the user and only a payment.  We know you want to get paid for your service, but most likely you need some input from a client. This is how to improve your payment process.

The requirements are: WordPress, Contact 7 form plug-in, and PayPal.

Here are the steps:
Install and activate the necessary plug-ins. Contact Form 7. Captcha for stopping BOTS and Contact Form to DB Extension are optional, but I strongly recommend them so you can track orders using the database.

plugins

1. The activated plug-ins will appear in the left column of the admin page.  Click on Contact and create  a new form with the “Add New” button.

2. Fill out the form with questions relevant to your service so your prospect feels you understand them from the get-go.  SAVE THE FORM.  Don’t forget this, because if you navigate to a different page, your changes will be lost.

contact form

3. Create your purchase button in PayPal and copy the code (this starts with the <form> tag).  Back in WordPress scroll to the section Messages and paste the PayPal button code.  Whatever content is here will appear after user clicks the “Send” button. Go to this link https://www.paypal.com/webapps/mpp/merchant-services-hub to create a paypal button.

4. Save the form again or in case you forgot to in step #2. (I usually don’t save when necessary)

5. Highlight and copy the short code after you save the form.  It starts with [contact-form-7 404 "Not Found"]

form messages

6. Go to the page you intend to have your order button and paste the short code.  Save and view that page.

paypal button

After a user submits the order form, the PayPal button shall appear.  Take note of the extra text I added to instruct the user if they don’t Pay their order will not be confirmed.

UPDATE (Tested in Chrome, Firefox, and IE11):
Alternatively you can add an automatic page re-direct to the Paypal payment page using the action handler ‘on_set_ok’.  This uses the unique id link provided from Paypal and loads that payment page, but it takes a few seconds. Add the following code to the ‘Additional Settings’ section of the Contact Form page as seen in the screenshot.  I collapsed several tabs above ‘Additional Settings’ so you can find it easier.

[code]on_sent_ok: “location.replace(‘https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&additional_params_from_your_button_go_here’);”[/code]

Get the specific parameter string from paypal by accessing merchant services:
merchant-services

merchant-services-2

paypal-button-code

Now that you have the entire link, paste in to the Additional Settings box like so:

advanced setting

Here is a functioning form with a re-direct to paypal, just enter your name and type yes:

Example Form

Email address

For more info regarding the additional settings, see the plugin’s documentation http://ideasilo.wordpress.com/2009/05/31/contact-form-7-1-10/  Since it takes a few seconds to load, you should replace the ‘Sent Message’ which I wrote in step 5 to something like “Please wait – You are being re-directed to the payment page.”

Another thing I recommend is adding two pages in WordPress for orders:  Payment Completed, and Order Incomplete. These will be good for “user friendliness”.   I hate trying to buy something online which takes me to a separate website with no design, because you lose a sense of security and cancel the order.  Another reason you will find studies showing “design is important”.

The completed page can notify and assure the “buyer” their order has been started immediately with a order reference number.  Whereas the order incomplete page can ask the user for feedback as what would they want improved since they cancelled.

If this tutorial helped you or you think something is missing, please write a comment below.


Tags: , , ,
Copyright 2017. All rights reserved.

Posted January 15, 2012 by Tom in category "Sales