How to Create a Basic Multiple Payment form

Last 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:

Order Form Basics

Order Form Types

Setting Up Your First Order Form

 

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. 

 

4th Step:

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:

 

5th Step:

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.

2. Add two (2) iFrame Widget to your form: http://widgets.jotform.com/widget/iframe_embed. You can add this widget to your form by following this guide: How-to-Add-a-Widget-to-your-Form

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!


16 Comments...


   
LeoC2 (February 26, 2013 at 01:43 PM)

This is all well and good but how does one include the payment information in the emailed result?

View Answer


   
TSellers (March 03, 2013 at 12:49 AM)

Working my way through building this with 4 forms of payment: Paypal Canada, Paypal USA, Interac (Purchase Order tool), and Local Pickup (Purchase order). The problem I see right now: is there a way when you add or update a product to make it propagate automatically through all 4 forms?

View Answer


   
photophil (March 05, 2013 at 12:27 AM)

I have modified my form following these steps with some success
-the two payment options DO come up as expected ( when selected ) but the paypal function does not :
1) show a total
2) bounce over to paypal ( after hittng the submit button) to complete the payment

im sure im overlooking something - any help would be greatly appreciated
thank you
-p
http://form.jotform.us/form/30448190768158

View Answer


   
manolox (May 16, 2013 at 03:10 PM)

Everything worked except the way error messages are displayed!!!

When the form has errors and you submit it instead of showing the error messages that I have in each particular form, the frame goes to another weird page with a gray background that indicates de error fields and has a link to go back.

This has to problems for me:

1 - The "back" link doesnt work. Instead of going back to the form it goes to google.com

2- I can't customize that text and I need another copy of this form in spanish as well.

Can I keep the "error message" system for each form the way I have it setup originally?

If not, can at least the "back" link work and lte me customize this error page?

Thanks

http://jotformpro.com/form/31354966588974




View Answer


   
cbimensclub (February 17, 2014 at 10:36 PM)

I tried to do this but it won't save the Java script to the field

View Answer


   
jrz (March 11, 2014 at 12:14 PM)

I have done till the 4th step and when i open it in the browser, the option of paypal shows however the details don't show... where am i getting it wrong and how can i solve it

View Answer


   
rijuv (May 23, 2014 at 08:01 AM)

I have used the same option. But screwed up by not seeing the purchase submission.

I have used, paypal and purchase order. Paypal allows me to navigate to their account. Purchase order directly submits my order. But products and amount whatever user has purchased wont store anywhere. I looked at both of my forms - main form and purchase order form.

I am quite urgent to get this done. Any help?

View Answer


   
juniorbaseball (November 07, 2014 at 01:50 AM)

Hi There. Everything worked except that when I select Paypal and then submit the form it is going directly to my thank you page (just like the purchase order one), instead of linking to Paypal to make the payment. Any ideas please?

Thanks.

View Answer


   
eiermann (November 18, 2014 at 10:39 PM)

Is this still the only way to do it? :-/
Are there plans to for easier implementation in the future. Like a widget or app where the user can select the payment options for this form? (Purchase Order, Paypal, ect.)

View Answer


   
portz (May 29, 2015 at 07:57 PM)

I seem to be missing something, my radio button doesn't change the iframe forms below they are both on the same page

http://form.jotform.co/form/51463852740860


   
portz (May 29, 2015 at 08:30 PM)

Its OK, I found what I was doing wrong in this support thread http://www.jotform.com/answers/455659-Not-able-to-see-payment-screen-of-the-Payment-form


   
fabiocampos (June 05, 2015 at 02:36 PM)

ESTOU APRENDENDO! LEGAL!


   
ezshirtsprinting (March 12, 2016 at 01:12 PM)

HOW TO SEE THE width and height of the embed form?

View Answer


   
TheIIC (March 23, 2016 at 12:56 PM)

How do I include different payment methods in the same form? I need to have integration with Paypal, but also accept wire transfers and checks. Please advise.

View Answer


   
baisshalom (December 21, 2016 at 12:05 PM)

I've followed these directions and wound up with this: https://form.jotform.com/63354232937155

Technically it works but how do I "clean" it up in terms of look and style?

Also, how do I get the exact iframe sizing of both forms, currently I just chose an arbitrary large number for the width and height which is also making the main form look "off"

Thanks

View Answer


   
ddeutsch (January 11, 2017 at 10:50 AM)

This doesn't really help me as this is one or the other. I'm a non-profit that is selling tickets (set price) and want a product item for an additional donation (user fills in amount). If you could add this ability in future versions that would be great.

View Answer


Send Comment