Do you want to integrate payment gateway and get paid online without any hassle?

Building an app or a website can be a cumbersome and expensive affair. Many online platforms can help you create a website for free, but what about integrating the payment gateway?

Well, by default, WordPress doesn’t come up with any payment options that will allow you to make any transactions. Fortunately, there are tons of plugins in WordPress that can help solve the problem. In this article, I will show you how to integrate a payment gateway to your website.

Integrating Payments in Your WordPress Website

Sometimes users don’t want to set up a full-fledged shopping cart in their payment processing system. This makes a sense if you’re selling a limited amount of products or this can be applied for accepting payment for small to mid-level businesses and consulting/services.

To integrate payment gateway possible for these online businesses and consulting/services, you can have an online order form with a credit card payment option. Here is how you can make it happen without adding a shopping cart to your website.

Step1: Installing a quality plugin

As we’re going to use WPPayForm, at first, install and activate the WPPayForm plugin on your website. To learn more about the step by step guide on how to install a WordPress plugin.

[Free version of WPPayForm allows you to use the Stripe payment gateway and the pro version allows you to use the PayPal payment gateway additionally.]

WPPayForm is one of the most light-weight payment form builders in WordPress. The Lite Version of the plugin lets you integrate Stripe as a payment gateway on your website, while the pro version allows you to use PayPal additionally.

1 new NT BG


Stripe & PayPal Payments Made Simpler With Recurring Payments & Other Powerful Features

You can install WPPayForm in the following way:

  • Login to your admin dashboard.
  • Choose Plugins click Add New from the side menu.
  • Click the Upload button.
  • Upload the file from the downloaded package.
  • Click the Activate Plugin button.

Step2: Activate WPPayForm

Once you’re done with the installation, then you have to activate the plugin accordingly. For the free version, you just need a single click to activate the plugin. For the pro version, follow the steps below:

  • Initiate the licensing process by clicking two following ways — One is [Sidebar WPPayForm  Active License]  Or [Sidebar  WPPayForm  Settings  Licensing  Activate License or the notification above]
  • After locating the licensing page just put your license key on in the input field and press the Active WPPayForm button to activate the license.

In case you lose the license key, you can always retrieve it from your wpmanageninja dashboard.

Step3: Configure payment methods and currency

Once you have installed and activated the WPPayForm plugin, you need to set your Stripe and PayPal API keys. If you haven’t set up yet, you can make it by signing up Stripe and PayPal account.

[Point to be noted: PayPal integration is a pro feature and only allows for the users of the pro version of the WPPayForm plugin.]

In this post, I will show you the Stripe integration that can be incorporated by using the free version.

Stripe Setup

To set up the Stripe with the WPPayForm, you need to come down to your WordPress admin panel. Then hit on WPPayForm → Settings → Stripe Settings.

how to integrate Payment Gateway

In the Stripe settings page, you will get two types of modes baring a radio button. First one is for Test Mode, and the next one is for Live Mode. It’s highly recommended to stay in Test Mode until you’ve completed setting up your payment forms. When you are in Test Mode, any number can be used as test card numbers and payment provided by Stripe.

In order to set up the Stripe payment form, you need to log-in to your Stripe account. From the dashboard, go to the Developers section. You will get the Publishable key and Secret key of your Stripe account from the API keys section page. You will see both the API keys for Test Mode and Live Mode simultaneously. Here, I am demonstrating the Live Mode configuration of Stripe.

how to integrate Payment Gateway

Now, open up your WordPress admin dashboard by opening a new tab. Next, copy and paste Stripe API keys from your Stripe account to your Stripe Settings of WPPayForm Pro settings page.

It means you can start by copying your Publishable key(starts with “pk_test”), switching to your WPPayForm admin tab and paste it into the appropriate text box.

Then, the same should be applied for the Secret key (starts with “sk_test_”).

how to integrate Payment Gateway

Put the business name you are doing and you can set a checkout logo on your payment form using the Checkout Logo option.

how to integrate Payment Gateway

After adding the required information, don’t forget to click on the Save Settings button. Then WPPayForm will be connected with your Stripe account.

Step4: Creating payment form

Now, you have a configured payment gateway with the WPPayForm plugin. Next, you need to create a payment form to place it on your website as a gateway to make transactions. To learn more about the types of form configurations available within the plugin, please visit our demo site.

To make it happen, let’s go to the WPPayForm located in the left sidebar from your dashboard. Hit on the Add New Form button located on the top right corner in the dashboard.

how to integrate Payment Gateway

Once you click on the button, a pop-up will appear with some predefined forms, you can a number of predefined form templates available out there.

how to integrate Payment Gateway

For demonstration purposes, I’m going to start from the very beginning. Let’s start from the blank. Click in the New Blank Form box.

Once you click the New Blank Form box, you will be taken to the Form Fields tab of the plugin. Here, you will get three different sections named Product FieldsPayment Method Fields, and General Fields.

To integrate your payment gateway first, you have to configure the Product Fields section.

Product fields section

Now, select the Product Fields located in the right sidebar panel. Next, click on the Payment Item, then it will open up with a bunch of options for payment item and submit button to set up and specify the product you want to sell.

how to integrate Payment Gateway

In this stage, you will find options to set the product label, name, price of the product. You can add multiple items to your list as well.

At first, provide the Field Label with the necessary text (for Ex: Football), then you can enable or disable the required field.

how to integrate Payment Gateway

Then, choose the Single Item from the Payment Selection Option.

Next, here, you can change the price, by default, the price is 10.00 will be shown, this can configure according to your product. Then you will have the option to show the product name with the price on top of the form. You can enable or disable the option with a single click. Then click on the Update button.

General fields section

Later, go to the General Fields and click on the Customer Name, Single Line Text, and Customer Email input fields. You can just click or use drag & drop for adding these input fields.

how to integrate Payment Gateway

In this stage, customize the Single Line Text input field, to make it happen, hit on the down arrow icon located on the right side of the field.

how to integrate Payment Gateway

Then, you will see that a panel will expand with a set of options.

how to integrate Payment Gateway

Type some demo text in the Field Label and the placeholder, if you want, make this field required. To check this, provide a default value for the input field. Click on the Update button to finalize the customization.

how to integrate Payment Gateway

After adding and customizing all the fields, you need to click on the Update Fields button.

Payment method fields

Now, it’s time to set the payment method for this form. To make it happen, go to the Payment Method Fields option located in the right sidebar. Then click on the Card Elements Stripe option. You can transact with any credit card or debit card through Stripe. Once you click it, a payment panel section will be added to the form.

Then, hit on the down arrow icon to expand the payment panel section. There are several options available out there, you can provide new field label or can keep the existing one.

how to integrate Payment Gateway

Next, click on the Embedded Checkout Field from the radio button from the Checkout display style option. You can also enable Zip/Postal code verification. Now click on the Update button.

Remember, clicking the update button will update the field only. For saving the whole form along with the fields, you have to click on the Update Fields button.

how to integrate Payment Gateway

Now, have a look at the preview of the payment form you have created right now.

how to integrate Payment Gateway

Once you create your first payment form, you have to publish it on your website so that clients can pay you for your respective products or services you offer.

Step5: Integrating the payment gateway

In order to add the payment form on your site, you need to embed the created payment form on a particular page you like. To make it so, just insert the shortcode (of that particular form) on the respective page.

You will see the form list along with the shortcodes in your plugin dashboard.

how to integrate Payment Gateway

Now, copy the shortcode, open the page and paste the shortcode into it. You can use this shortcode in any Textarea of your page.

how to integrate Payment Gateway

Once you embed the short-code to a certain page, it will show the payment form on that page.

Here is the output of the page with a preview look.

how to integrate Payment Gateway

Now, you’re all set to use payment gateway on your website. You also can use the form to get paid from your consumers for the products and services.

This is how you can integrate your payment gateway using WPPayForm plugin on your website.

Final Words

Setting up a proper payment gateway on your site is crucial. Building an ecosystem that is fully optimized for your users can do a lot for your eCommerce site. The more your site is payment gateway friendly the more you can get paid smoothly.

However, using WordPress payment gateway plugins could be the best bet for you to serve your purpose. By following the above-mentioned steps you can learn how to integrate payment gateway on your website.

If you still have any queries regarding the topic, let me know me, I would love to cooperate with you in the best possible way.

Sazzadul Bari

Hi, this is Sazzadul Bari, Digital Marketing Strategist at WPManageNinja. SEO content writing, outreaching, link building, and lead generation are my specializations. And when I am not drooling over WordPress plugins and updates, you'll find me enjoying sports or going through my favorite books.

Leave a Reply

Subscribe To Get

Tips, Tricks, Update & Inspiration