How to Add a Payment Card / Accept Credit Card on WordPress Site

WordPress is evolving throughout the years to be the most popular CMS right now, but it has its own flaws. One of WordPress’s major problems is that it doesn’t come with any payment options by default and installing one might be a bit tricky for some people.

So today in this tutorial, I am going to show you how you can accept credit card and debit card payments on your own WordPress site step-by-step. By doing this, your customers can make their transactions without having to leave your site or go to a third-party website such as PayPal.

Before we start, I must inform you that there are multiple payment plugins and gateways out there, but in this tutorial, I will be using Stripe, PayPal and Contact Form 7. These three by far are the best when it comes to payment gateway and plugin for WordPress. They contain many features that benefit us - the user, such as charge fixed tax, charge tax rate or charge shipping and handling per item. So just make sure to have Contact Form 7 installed first before you read this tutorial.

With all of that out of the way, I will walk you through every simple step right now.

Step 1: Install The Contact Form 7 - PayPal & Stripe Add-on.

First, you will need to install and activate “Contact Form 7 - PayPal & Stripe Add-on” plugin for your WordPress.

Step 2: Set Up Your PayPal and Stripe Information.

Following up the first step, now it is the time for you to enter your Stripe Key and PayPal Id to receive future payment.

In your “Installed Plugins” tab, choose “Contact Form 7 - PayPal & Stripe Add-on” and click “Settings”

Take a look at the “Settings” section, there will be two menu tabs named “PayPal” and “Stripe”.

For the “PayPal” tab, enter your PayPal account email address in the “Live Account” field. This step is extremely necessary because all payments will go to this account.

If you have a Sandbox Account and want to make sure everything is working properly before going live, you can fill it in the “Sandbox Account” field. Also, remember to turn on “Sandbox Mode”. By doing this, you can test buy something on your site as a customer with your Sandbox Account. This is optional, but I highly recommend doing it.

Now moving to the “Stripe” tab.

You must type in your Stripe Key as a requirement to connect WordPress with Stripe and to start receiving payments.

Just like PayPal, you can also use your Stripe Test Key and Sandbox Mode to make sure payments via Stripe don’t run into any problem.

Step 3: Creating A New Payment Form.

Once the Contact Form 7 is downloaded, a “Contact” tab will appear in the left sidebar of your admin panel. Navigate it and choose “Add New”.

A new form will be created similar to the image below:

You can name this form however you like, just make sure that it is simple and easy for you to recognize. For this tutorial, I will name mine as “testing 123”.

In the “Mail” tab, you can adjust your mail template.

The “Messages” tab is for you to edit the messages that your WordPress site will display after the customer has performed a specific action.

The “Additional Settings” allow you to add more advanced settings but we don’t really need to care about this tab in this basic tutorial.

It’s optional for you if you want to adjust all the tabs below, but the most important tab that you need to work on is the “PayPal & Stripe” one.

To enable PayPal and Stripe on this form, you must check these two boxes.

Other fields are not required, but if you want to accept payments using Stripe then you will need to type in the price of the item that you want to sell in the “Item Price” field.

Now just click the “Save” button to create the form and it will be saved in the “Contact Forms” section of your admin panel. As you can see, the “testing 123” form which we just created is located right here.

Step 4: Enable Payment Gateway To Your New Form.

All you need now is to integrate Stripe and PayPal to your form by adding a new menu.

Choose the form you have created, and click on “drop-down menu”.

Next, place your attention to the “Options” blank field and type in “Pay with PayPal|PayPal” to enable PayPal payments and “Pay with Credit Card|Stripe” to enable payments via Stripe with credit cards.

Once you have finished, click the “Insert Tag” button in the right corner. A new menu code is going to be created like this:

All you need now is to copy the code, in this tutorial my code is “menu-566” but your code can be something else, it’s different for each form. Next, open the “PayPal & Stripe” tab in the form and paste the code in the “Gateway Code” field.

When it is all done, click the “Save” button. The payment options are now added to your form. Also, a new shortcode is now created.

Now copy this shortcode and paste it to any post or page that you want the payment form to be displayed.

The last thing you need to do is click on the “Update” button on the top right of the Page/Post Editor and the payment form will be displayed. Here is the final result on your page.

Congratulations, now, you can start accepting credit card payments online effortlessly.

That’s all for today’s tutorial. If you still have any more questions or maybe you are having difficulty in a specific step, feel free to write them down in the comment section below so we can help you with your problems. I’m hoping that this article will help you succeed in adding credit card payments to any of your own WordPress sites.

Finally, I just want to say thank you for reading and make sure to stay tuned to our website for more great and helpful contents like this.