Everything You Need To Know About Payments

payment integration
Get Paid Through your Forms with Payment Integration
February 20, 2017
Rules 101: Practical Tips & Best Practices that Drive Results
February 23, 2017

Everything You Need To Know About Payments

everything about payment forms on 123contactform

Creating your order forms online and connecting them to your payment gateway is no walk in the park, for sure. But given the options that 123ContactForm provides within the web form builder, you can build complex order forms within minutes, no coding being involved during the process. So you can sit back and relax while the money starts coming from your website.

However, you might need this tutorial on how to best use the payments features of 123ContactForm to your advantage. Once you get the hang of them, your online business will grow immensely.

how to create an online order form

If you’ve previously browsed the form builder, you’ve certainly seen the Payments section. Although that’s the place where you cast the magic in online payments, you will need to know the basics of order forms in the Form Editor. Because there’s a link between what fields you add to your form layout and how they can be used in Payments, we will start from there.

how to create an online order form with 123contactform

With 123ContactForm you can build any type of payment form that will help you sell items, subscriptions, memberships, receive donations online and many more. Regardless of what type of payment form you want to create (except donation form), if you sell more than one item on the form, you will need to display them in any of the following form fields:

  • Single choice
  • Multiple choice
  • Dropdown

how to create an online order form with 123contactform

If you’re building a donation form, add any of the following form fields for the donation amount:

  • Single text
  • Number
  • Price

fields to use for online donation forms

It’s very important that you use these fields if you want to set up payments on your web form. Proceeding to the Payments section, under Settings.

The Payments section is divided in three parts:

  • Calculations
  • Payment Processors
  • Notifications

How does it work?

  • You will first need to establish how the items are being calculated on the form, how to display the payment summary to your customers and if you want to apply discounts or taxes.
  • After calculations have been set up, select the payment gateway you want your form to integrate with by browsing through the list of available payment processors.
  • Enable payment notifications that will let you and your customers know if the payment was successful or not, trigger certain webhooks and send confirmation messages after payment has been received on your end.

Calculating Your Payments

In the Calculations tab from Payments, you have two areas of focus:

  • Assigning values and formulas
  • Editing the payment summary, applying discounts and using markups.

Remember the items that you’ve added on your form? If you’ve used any of the form fields mentioned above for creating payment forms (not for donation), you will see them in the dropdown list that is located on top. For example: if you’ve added a single choice field with the items #product1, #product2 and #product3, the name of that single choice field will appear in the dropdown. Once you have selected it, move your cursor on the button to the right and select Value. Now you will see your items listed below, where you can add a value to each one of them.

order forms - assigning prices

Using Custom Calculations

By default, the payment summary is automatically populated with the fields that you’ve assigned prices to. But you can also create custom calculations by using mathematical operations such as multiplication, subtraction, addition or division.

order forms with advanced pricing formulas

What’s good about using custom calculations?

You can create a hotel reservation form that will calculate the number of days a customer will be staying based on the selected check-in and check-out dates. You can then use this number in your pricing scheme and charge your customers on submission.

How to do it:

  • In the Editor, add the field Number to your form layout
  • creating calculation formula on order form

  • Return to Payments and use the dropdown on top to add the respective field as a formula
  • creating calculation formula on order form - payments section

  • Create your formula.
  • using mathematical operations on form

In the example with the hotel reservation form, simple add a simple subtraction operation between the check-out date and the check-in date, if you have used two Date fields on the form. The result will show the number of days. You can hide the field on the form, if it’s not relevant to your customers, and use it in other formulas or expand the same formula to something more complex. It’s all up to you!

Calculating the Donation

Actually, there’s nothing to be calculated here. Donors will just type in the amount they want to donate and the form will process that amount on checkout. However, you have to set it up on your form.

In Payments, select the field for donation and assign it as a value. Next, give it the value 1 and remember to make the field required in the Editor.

Creating Your Payment Summary

You can display the payment summary on the form in two ways:

  • Show the summary on the form only after it has been submitted
  • Display a Calculate button that will show the payment summary below the form on click

create payment summary for web form

A third option that works with both of the two mentioned above is showing the payment summary on the form in real-time. This means the summary will popup on the form while customers fill out the form.

Best practice: If you want to show the payment summary in real-time, have the summary show up after submission, instead of displaying the Calculate button on the form.

Each time you assign a value or formula to a field, it will be automatically included in the payment summary below. This is the summary your customer will see before completing payments. Here you can:

  • Replace the field labels with custom item descriptions
  • Show/hide the quantity column
  • Show the detailed formula(s) of the payment summary
  • Apply discounts and markups per field/group of items

create payment summary for web forms

You can also edit the payment summary by removing some of the items that you do not want to include in the final price calculation.

Below the payment summary you can apply a discount on the total amount or a tax. For example, you can apply a 24% VAT tax on the total amount.

Setting Up Coupon Codes

123ContactForm makes it easy for adding promotions to your order forms. Just click the Coupon codes button to open your coupon code system. Here are the steps in creating your first coupon code:

adding coupon codes to order forms

  • Click Add new coupon code
  • Edit the newly created coupon code
  • Select the coupon code
  • Press Assign selected coupons to this form
  • Hit Save to exit.

building order forms that have coupon codes

You can repeat the steps to create as many coupon codes as you want. If you want to remove a coupon code, return to the coupon codes lightbox and click the disable button on the right (symbol: ). If you want to delete them for good, use the X.

Adding Your Payment Gateway To the Form

After having calculations setup and working, go to the Payment Processors tab within the Payments section. Here you can add the payment gateway that you need.

building order form with payment gateway

Note: Remember to always select the currency on the form that you use in your payment gateway account. This will prevent you from confusion.

Use the dropdown list to select a payment gateway and click the button on the right to add it to the form.

building order form with payment gateway

Now all you have to do is connect your payment gateway account to the form and enable the integration.

Tips:

  • If you’re using PayPal Standard, PayPal Pro, PayPal Payflow or Stripe, you can enable recurrent payment on the form.
  • For PayPal Standard only, you can inform your PayPal account that all payments sent from your form are donations. This option might prove useful for your organization.
  • With PayPal Standard only, you can send detailed invoices of the orders such as shipping address or contact email.
  • If you’re using Braintree, you can submit all payments for settlement and show/hide the billing address on the checkout page.

Don’t Forget To Test Your Payments

Testing your order form before publishing it on your website might save you some headaches and prevent some errors from occurring, especially if real money is involved.

You can use the sandbox option on the bottom part of the Payment Processors section to test your form as if you were the customer. You can go through the entire payment process and see if everything is working smoothly. Once you have done testing, however, remember to disable the option, otherwise real payments will not be processed.

Get Notified On Your Earnings and Engage Your Customers

Moving to the Notifications tab, under Payments. You can opt to receive email notifications right after the form has been submitted or only after the payment has been processed. This is the email notification you have set up in the Notifications section, right at the beginning.

Aside of the confirmation messages (autoresponders) that is triggered on submission (customized in Notifications), you can set up confirmation messages that the customers will receive only after their payment has been successfully processed in your payment gateway account.

creating payment notifications for order form

By using the customize message link, you can modify the content of the message anyway you want.

The last part of payments involves the use of Webhooks, if you are interested in this part. It’s optional and recommended to developers only or people skilled in programming. To use this option, you need to use the Webhooks integration located in the Application section. In short, you can send some form data to your server via a webhook only after the payment has been processed. For example, you can save the names or emails of your customers in your own database only after their payment has been complete.

Hope this tutorial gave you some valuable insights on how to use the Payments section for building quality payment forms for your business. If you ever require further assistance, don’t hesitate to contact our customer support specialists at support@123contactform.com.

Here are some other useful resources on this topic:

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.

2 Comments

  1. Michael says:

    Hello,

    Thanks for this tutorial. However, I have a question about the integration with PayPal. When you select ” Notify me only after payment has been processed” we don’t get any notification if the customer “cancel” the process in the middle. So it can be confusing for the customer that fills his form, then press “pay” and his only redirected AFTER that to PayPal. if he cancel at this time, he does not now for sure that his registration his not finalized and in the same time, we did not received any notification that a process was “half completed”….So the customer can think he finalized his subscribtion, while it’s not…

    • Hello Michael,

      You’re more than welcome. Regarding your question, if you need to prevent the user from omitting the Paypal page as well, after they submit the form, you can include on the form a block of instructions addressing the necessity for the Paypal page to be also filled in. This text could be added at the end of the form through an HTML Block. Another option would be having the text show up as part of the the Summary page of the form after submission- through TranslationsCustomise language -> Payment Messages.

      Hope this helps. Please let us know if we may be of further assistance.

Leave a Reply

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

3 Shares
Share3
+1
Tweet
Share