Payment Forms: Integrating Your Web Form With Payments – Basics

Collecting Files Online: The Easy Way
November 4, 2016
Generate More Real Estate Leads for Your Business
November 10, 2016

Payment Forms: Integrating Your Web Form With Payments – Basics

People were asking us how they can  create different scenarios for online payment transactions, so we have decided to create a series of articles on the subject. Whether you are selling products or services online, or you are an NPO receiving donations from all over the country, your form can accept online transactions through a payment gateway (e.g. PayPal) making it much easier and secure for people to pay and for you to receive the money. In fact, e-commerce has entirely revolutionized retail according to Forbes.

In this article I am going to show you how easy it is to integrate your web form with any of our available payment gateways on 123ContactForm. Although I have selected PayPal as an example, take note that the steps described below go the same for any other payment gateway. So let’s get started.


The life of every order form begins in the Form Editor. It’s the place where you offer a visual of the things you sell to your customers. Take note that selling means giving your customers options to choose from (if you are selling more than one product/service), so you can only use form field types with selections, for example single choice fields or multiple choice fields.

I’m going to show you a web form that sells subscriptions: silver, platinum, gold. Each one has a different price: silver – $50, platinum – $100 and gold – $150.

To build this type of form, I have added a single choice field to the form, named it “Subscription type” and added these three available choices: Silver – $50, Platinum – $100, Gold – $150. The values are added only for my customers to know how much does each subscription cost. I could have added them simply Silver, Platinum, Gold. Also, because I want to prevent customers from buying more than one subscription at the same time, I have added the single choice field that allows one selection only.

PayPal forms - adding subscriptions

Next, I needed to assign a price for each subscription. So I went to SettingsPayments and made sure I am in the Calculations tab.

 

PayPal forms - adding price calculations

 

Afterwards, I have clicked the drop down from Assign Values or Formulas to Fields, selected my single choice field (“Subscription type”) and hovered over the blue box to select “Value”.

PayPal forms - assigning values

 

Here I have assigned the price for each subscription. So I’ve added 50 for Silver, 100 for Platinum and 150 for Gold. Next, I’ve clicked the save button on top.

 

PayPal forms - assigning prices

 

In Payment Processors, I have selected PayPal for the payment gateway in the drop down and used the Add payment gateway button to add it to my form. By default, PayPal is the first payment gateway that is listed in the drop down. 

 

PayPal forms - adding payment gateway to order form

 

Note: PayPal is different from PayPal Pro or PayPal Payflow. These are three unique payment gateways, created by the same company. PayPal Pro and PayPal Payflow are used more in the US, while PayPal is used worldwide. If you have a PayPal Pro account, search for PayPal Pro in the drop down. You do not require PayPal Pro if you upgrade your 123ContactForm account plan, unless you have a PayPal Pro account that you want to use instead.

To connect your form to PayPal, all you need to do is type in the email address of your PayPal account inside the email box of the PayPal gateway. Finally, use the drop down on the top right side of the box to enable PayPal on the order form. 

 

PayPal forms - enable payment on form

If your PayPal account is set in another language than English – UK, use the Language drop down to change it to the one you use in your PayPal account. As for currency, make sure you set the same currency on the order form as the one you use in PayPal.

 

PayPal order forms - changing currency on order forms

 

To check if PayPal has been added successfully, make sure payments are enabled and look for the message: “Merchant successfully enabled!”. 

PayPal forms - successfully add gateway to form

 

This is how the PayPal payment form from the example above works: the customers will have the option to choose between buying a Silver, Platinum or Gold subscription. Once they have selected one out of the three, they will be redirected to PayPal to pay $50, $100 or $150, depending on what subscription they have selected.

If I wanted to run a billing cycle after each transaction, I would have selected the Use recurrent payment option.

 

PayPal payment forms - recurrent billing

 

Also, by pressing the Customize button I can map fields to pass form field inputs to my PayPal account, for example the customer’s email or the physical address for shipping purposes.

 

PayPal forms - customize gateway for order form

 

Remember that billing cycles can be turned off only in your PayPal account. Moreover, if you do not hold a premium business account on PayPal, your customers will need a PayPal account of their own in order to pay you. If you do have a verified PayPal Business account, follow our guide on how your customers can pay you without needing a PayPal account.

A common use case for online order forms is having the customers choose between two or more payment methods. But I’ll tell you more about this in our next article.

In the meantime, here’s a small tip for those who want to show the payment summary on the order form, without having to integrate with any payment gateway: Add PayPal to your form and use the email address “no-redirect@123contactform.com”. This will trigger the payment summary.

Stay tuned for our next article. If you need more assistance, don’t hesitate to contact our support specialists.

Have some scenarios in mind? Let us know in the comments below and they might end up in our future articles.

 

 

 

Olivian Stoica
Olivian Stoica
is the Search Engine & Conversion Optimization Analyst at 123ContactForm. He has a keen knowledge of the platform, providing useful articles and guides about building web forms.

Leave a Reply

Your email address will not be published. Required fields are marked *

5 Shares
Share4
+11
Tweet
Share