Browse Article by Topicsmultiple payment form payment form conditions
- Order Form Basics
- Order Form Types
- PayPal Forms
- Smart Forms Using Conditional Logic
- Adding a license agreement to a form
- Creating a scrollable Terms & Conditions
- How to Update the Multiple Payment Form
- Setting Up Your First Order Form
- How to Have Sub-Category or Sub-Labels on an Order Form
- How to Create a Basic Multiple Payment form
Related Forum Questions
- Paypal Authorization?
- Conditional questions?
- Conditions: cannot re-order conditional logic when the list is filtered by field
- I NEED a dynamic, responsive Button that allows for text-based field merge/pipe.
- How can I use the filled out email on conditions?
- bulk conditions
- How do I add an "Inv Ref" or "Customer Ref" field in the credit card payment form
- Is it possible change the email recipient based on the selected page of the teacher?
- Conditions page: Inability to re-order conditions
- How to add a popup link to an iframe embedded payment form?
How to Create a Basic Multiple Payment formLast Update: April 11, 2017
First thing that you'll need to do is identify how many payment methods you would like to use. In this example, we'll have two payment methods, Paypal and Purchase Order.
In our case, we will have a total of three forms:
1st Form: Primary form that will house the two forms - https://form.jotformpro.com/70983924622968
2nd Form: Will be your 1st payment method, Paypal. - https://form.jotform.com/70984656322968
3rd Form: will be your 2nd payment method, Purchase Order - https://form.jotform.com/70983880222965
In JotForm Version 4:
1st Step: The Primary Form or the 1st Form
1. First, open the "Build" tab and click the "Add Form Element":
2. We will add a radio button and add a label text "Choose a Payment Method". This will serve as the option for our users to choose what payment method they prefer. You could user other fields, although we only want users to choose one type of payment method, so you can choose either a radio button field or a dropdown field.
3. We will then add two iFrame embed widgets where the PayPal form and Purchase Order form will be embedded or loaded.
We will leave the main form with that for now.
2nd Step: Setting up the 2nd Form or PayPal Form
1. First, we'll create a new form and name it as "PayPal Form". Here we will setup the payment field, under the "Payments" tab, choose "PayPal" and add it to your form.
2. To learn more about setting up the payment integrations, you can start with these guides:
3rd Step: Setting up the Purchase Order form or 3rd Form
1. Similar to 2nd step, we will create another form but this time we will add the "Purchase Order" field.
2. The "Purchase Order" field is not integrated with any 3rd party payment services. This is usually used if you want your users to pay via wire transfer or deposit in your bank account. In my case, I've added a "Text" field to instruct the users where to send the payments.
Make sure to get all the URL or direct links to the 2nd and 3rd form. You can do that by clicking "Preview" or on the "Publish" tab.
By previewing the form:
By opening the "Publish" tab page:
Now set the links on each of the iFrame embed widgets you have in the main form. First, select the widget, click the "wand" icon, then you'll see that the settings for that widget will appear at the right side.
Now paste the form's URL or direct link under the "Url" text box.
6th Step: Setting up conditions.
We only want to display the payment form depending on the choice they made on the radio button. To do that, we will use the Conditions feature. To learn more about conditional logic, you can check this guide: https://www.jotform.com/help/57-Smart-Forms-Using-Conditional-Logic
1. First, access the "Conditions" page by clicking "Settings"->"Conditions". I will choose the option "Show/Hide Field".
2. Now create a condition to where we will only show the specific iframe embed widget when a certain option is selected.
Here if the selected radio button in the "Choose a Payment Method" is "PayPal", then show the iFrame embed widget that holds the "PayPal" form.
Here if the selected radio button in the "Choose a Payment Method" is "Purchase Order", then show the iFrame embed widget that holds the "Purchase Order" form.
We will then have two conditions in our final list.
You now have forms that allow you to have multiple payment options.
Important Note: Make sure to remove the "Submit" button on your 1st form, your users will basically submit the form directly on the 2nd and 3rd form instead.
You can see how my main form works on this form link: https://form.jotformpro.com/70983924622968
In JotForm Version 3:
1st Step: The Primary Form
1. Add a radio button or a drop down menu form element. Add the selections for the payment methods. In this example, we use Radio Button field.
3. Name the First Widget as PayPal and the other one as Purchase Order (Or actually, add a text content is a more appropriate term):
2nd Step: Paypal Form
1. Create a new form that will be your payment form for PayPal, and make sure you add there the information that you will collect from the user such as the name, email, etc. and save your form.
2. Get and save the form URL by clicking the "Preview" button. You also need to save the form width and height structures because the iFrame Widget requires this later.
3rd Step: Purchase Order Form
1. Go again to the My Forms page and clone your Paypal Form.
2. Delete the PayPal Payment Tool. A prompt will appear and ask "Would you like to keep the products to be used with another payment gateway?" Click YES.
3. Add the Purchase Order payment tool. If you kept the products, the product list will automatically appear again using the new payment method.
4. Get and save the form URL by clicking the "Preview" button. Again, you also need to save the form width and height structures because the iFrame Widget requires this later.
4th Step: Inserting the Form URL's into the iFrame Widget
1. Open again the primary form (the one that will house your two payment forms)
2. Click on the Paypal Widget and run the widget wizard:
3. Paste the Paypal Form URL, set the Width and the Height of the Widget. Both height and widget should be defined.
4. Do the same steps for the Purchase Order Payment
5th Step: Setting up the Conditional Logic
1. Click "Conditions" button
2. Proceed to set conditions by selecting the Show/Hide a form field
3. Set your conditional logic to like this:
That condition will allow you to show the widget that holds the payment field depending on the input selected in the radio button.
This is the result of the instructions above: http://www.jotformpro.com/form/41363533068958
For a more complex form, you can read on this user guide on how to update a multiple payment form using the multiple payment form from the Form Gallery: http://www.jotform.com/help/161-How-to-Update-the--Multiple-Payment-Form.
Another alternative option is to redirect users to a different form URL base on the selected payment method. Here's a guide on how to redirect to a different URL base on the user's answer. http://www.jotform.com/help/317-Change-Thank-You-URL-upon-a-condition-is-met
Questions? Please let us know below!