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 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.
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 wppayform.zip 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
[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 hit on WPPayForm → Settings → Stripe Settings.
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.
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_”).
Put the business name you are doing and you can set a checkout logo on your payment form using the Checkout Logo option.
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.
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. Here, you will get three 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 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.
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.
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.
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.
Then, you will see that a panel will expand with a set of options.
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.
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.
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.
Now, have a look at the preview of the payment form you have created right now.
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.
Now, copy the shortcode, open the page and paste the shortcode into it. You can use this shortcode in any Textarea of your page.
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.
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.
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.