cf7 paypal menu
cf7 paypal menu

In the first step you should configure the Plugin settings. Therefore navigate to your admin panel and go to Contact -> PayPal. Or copy this URL: https://www.yourdomain.com/wp-admin/admin.php?page=Wordpress_Contact Form 7_Paypal_options_options. Make sure the required Plugins are installed!

Setup PayPal

We are going to use PayPal’s sandbox first in order to test the functionality. Therefore you need a Developer Account and your PayPal Identity. To get an developer Account simply login with your normal PayPal login here: https://developer.paypal.com. Then go to the Accounts Page and create a Business and a Buyer Account.

Next is to get your PayPal Identity. So go ahead and login with the just created Sandbox Business Account here: https://www.sandbox.paypal.com or visit directly this link: https://sandbox.paypal.com/businessmanage/preferences/website. Make sure you check all required options inside this Panel:

  1. Activate Automatic Return (do not forget to put a URL there!)
  2. Activate the Payment data transfer. Then you will see your Identity below.
  3. Save it!

General Plugin Settings

After Paypal is set up, go back to the plugin settings and:

  1. Enable the Plugin
  2. Enable the Sandbox Mode
  3. Enter your Sandbox Account (the Business, not the Buyer)
  4. Enter your PayPal Identity
cf7 paypal general settings
cf7 paypal general settings

PayPal Payment Option

Now we have to configure the payment options inside the 2nd Settings tab (see screenshot below). Here you have to …

  1. Set your Country
  2. Set your Currency
  3. Set your Locale
  4. Set your Fixed Tax
  5. Set your Tax Rate
  6. Set your Return URL
    Make sure you have enabled the redirect inside your PayPal Business Account
  7. Set your Cancel URL
    Make sure you have enabled the redirect inside your PayPal Business Account
paypal for cf7 payment options
paypal for cf7 payment options

 

Create the Contact Form

After we have set up the Plugin Settings we can create our first Contact Form. Let us first say, that PayPal offers a huge amount of input fields, that can be added to your Contact Form. A full reference can be found here. But we will cover only the most important ones.

Customer Details

If you do not want to use the Customer Informations from the Buyers PayPal account you can override them with custom fields. For example the first name, lastname or the address. See the following example:

<h2>Your Contact</h2>
<p >Your First Name*<br />
    [text* first_name] </p>
<p>Your Email*<br />
    [text* email] </p>
<p>Your Address*<br />
    [text* address] </p>

The Products you want to sell

Next we will configure the product(s), that we want to sell. Because we use the PayPal Cart functionality we can setup unlimited items. One Item always consists of the following fields. XX always stands for the current ID of your product (e.g. 1 or 2).

  1. Item Name (item_name_XX) | Example: <input type=”hidden” name=”item_name_1″ value=”Product 1″>
  2. Item Number / SKU (item_number_XX) | Example: <input type=”hidden” name=”item_number_1″ value=”product-1-999″>
  3. Item Amount / Price (amount_XX) | Example: <input type=”hidden” name=”amount_1″ value=”10″>
  4. Item Quanitity (quantity_XX) | Example:
<h2>Your Order</h2>

<input type="hidden" name="item_name_1" value="Product 1">
<input type="hidden" name="item_number_1" value="999">
<input type="hidden" name="amount_1" value="10">

<p >Quantity*<br />
[number quantity_1 min:1 class:fw max:10 "1"] </p>

The PayPal Button

After youhave set up the “Data” we have to create the Buttons. Our Plugin is the only one that supports both Buttons: Either the normal “send just the formular”-Button (submit) or the “Pay with PayPal”-Button (paypal). In our example we will add both buttons. The normal submit button should be clear, so we skip this. The PayPal Button can be found in the tags bar (see Screenshot below).

cf7 paypal button
cf7 paypal button

When you click on the Button you will get the Tag Generator Modal:

  1. Label (Button text) | Example: “Pay with PayPal”
  2. Paypment successfull Redirect URL (this overrides the Global URL) | Example: “https://www.yourdomain.com/custom-success-url/”
  3. Paypment cancelled Redirect URL (this overrides the Global URL) | Example: “https://www.yourdomain.com/custom-cancel-url/”
  4. Class attribute | Example: “paypal-button”
create cf7 paypal tag
create cf7 paypal tag

Then we insert the tag and get the following Contact Form buttons

[paypal "Pay with Paypal"]

We have added some divs and a product image to make the order form look a bit better. So here is the full contact form:

<input type="hidden" name="item_name_1" value="Product 1">
<input type="hidden" name="item_number_1" value="999">
<input type="hidden" name="amount_1" value="10">

<h2>Your Contact</h2>
<p >Your First Name*<br />
[text* first_name] </p>
<p>Your Email*<br />
[text* email] </p>
<p>Your Address*<br />
[text* address] </p>

<p >Quantity*<br />
[number quantity_1 min:1 class:fw max:10 "1"] </p>

[paypal class:fw "Pay with Paypal"]<div style="margin-bottom:10px;display:block;"></div>
[submit class:fw "Or send individual Request"]

Note: Do not forget to insert the fields also inde the Mail tab! Otherwise you will not receive the Data by mail!

Do a test

Let us test if the Contact Form works:

  1. Create a new Page
  2. Insert the Contact Form 7 Shortcode (in our case it is: ])
  3. Visit the Page
  4. Enter your Data
  5. Click the Pay with PayPal Button
  6. You should be redirected to PayPal
  7. Make sure you are on sandbox.paypal.com
  8. Now login with your Sandbox Buyer Account
  9. Pay the Bill
  10. The you should be redirect to your success page.
  11. Furthermore the Blog Admin will receive an Email, if a succesfull transaction has been made!

 

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.