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.
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.
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
If you’re building a donation form, add any of the following form fields for the donation amount:
Single text
Number
Price
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.
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.
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
Return to Payments and use the dropdown on top to add the respective field as a formula
Create your formula.
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
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
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:
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.
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.
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.
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.
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:
Amazing Payment Form Examples for Inspiration
Using Coupon Codes on Order Forms
Creating a Donation Form
Using Multiple PayPal Accounts On the Same Form
Creating Order Forms With Online and Offline Payment Methods
The post Everything You Need To Know About Payments appeared first on Blog.