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
[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 builder plugins in WordPress. Using the Lite Version of the plugin, you can integrate Stripe as a payment gateway on your website, while the pro version allows you to use PayPal additionally.
Stripe & PayPal Payments Made Simpler With Recurring Payments & Other Powerful Features
You can install WPPayForm in the following way:
- Login to your website and go to the admin dashboard.
- Select Plugins -> Add New from the side menu.
- Click the Upload button.
- Upload the wppayform.zip file included in the downloaded package.
- Click the Activate Plugin button.
Step2: Activate WPPayForm
Once you installed the plugin, you need to activate it 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.
If 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 will need to set your Stripe and PayPal API keys. If you haven’t any done yet, you can do all these 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.
To set up the Stripe with the WPPayForm, you need to come down to your WordPress admin panel. Then go to WPPayForm → Settings → Stripe Settings.
In the Stripe settings page, you will find 2 types of modes baring a radio button. One is for Test Mode, and another is for Live Mode. We highly recommend your stay in Test Mode until you’ve completed setting up your payment forms. While you are in Test Mode, you can use any number of test card numbers and payment provided by Stripe.
To set up the Stripe payment form you need to log-in to your Stripe account. From the dashboard, you need to 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 find both API keys for Test Mode and Live Mode as well. I am showing here the Live Mode configuration of Stripe.
Now, open up your WordPress admin dashboard by opening a new tab. Then copy and paste Stripe API keys from your Stripe account to your Stripe Settings of WPPayForm Pro settings page.
That means, start by copying your Publishable key(starts with “pk_test”), switching to your WPPayForm admin tab and paste it into the appropriate text box.
Next, do the same for the Secret key (starts with “sk_test_”).
Put the business name you are doing and you can set a checkout logo on your payment form using the Checkout Logo option.
After putting the necessary information, 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 know more about what types of form configurations are available, please visit our demo site.
To make it happen, let’s go to the WPPayForm located in the left sidebar from your dashboard. Click on the Add New Form button located on the top right corner of the plugin dashboard.
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.
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. While you are here, you will find 3 different sections named Product Fields, Payment 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 section in the right sidebar panel. Click on the Payment Item option, 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.
Here, you will get options to set the product label, name, price of the product. You can add multiple items to your list as well.
At first, you need to provide the Field Label with the text (for Ex: Football), then you can enable or disable the required field.
Next, choose the Single Item from the Payment Selection Option.
Now, you can change the price, by default the price shown 10.00, you can set it 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
Next, go to the General Fields section 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.
Now, customize the Single Line Text input field, to do so, click on the down arrow icon located on the right side of the field.
Then, you will see that a panel will expand with a set of options.
Type some text in the Field Label and the placeholder, make this field required if you want. You can also provide a default value for the input field. Click on the Update button to finalize the customization.
After adding and customizing all the fields, you need to click on the Update Fields button.
Payment method fields
Now, you need to add the payment method for this form. To do so, go to the Payment Method Fields section 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. after clicking it, a payment panel section will be added to the form.
Next, click on the down arrow icon to expand the payment panel section. You will find several options out there, you can provide new field label or can keep the existing one.
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 only update the field. To save the whole form along with the fields, you have to click on the Update Fields button.
Now, look at the preview of the payment form you have created on your site.
Once you have created your first payment form, you need to publish it on your website so that your clients can pay you for your respective products or services you offer.
Step5: Integrating the payment gateway
To add the payment form on your site, you need to add your created payment form on a certain page. To do so, you require to embed the shortcode (of that particular form) on the respective page.
You can find the form list along with there shortcodes in your plugin dashboard.
Copy the shortcode, open your page editor and paste the shortcode. You can use this shortcode in any Textarea of your page.
After embedding the short-code to a certain page, you will see the payment form will be displayed on that page.
Here is the output of the page with a preview look.
That’s it, you’re all set to use payment gateway on your website. Now, you can use the form to get paid from your consumers for the products and services.
This is how you can integrate payment gateway on your website using WPPayForm plugin that is pretty easy and comfortable. I hope, this article helped you to know about how to integrate payment gateway on your website.
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.