How to Create a Basic Multiple Payment Form

December 7, 2023

The first thing 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 Standard and Purchase Order.

In our case, we will have a total of three forms:

  1. Main Form – the primary form that will house the two forms.
  2. PayPal Standard Form – will be the first payment method.
  3. Purchase Order Form – will be the second payment method.
Youtube Embed Poster: o73mvFr01gk

Step 1: Build the First Form

  1. Go to your Form Builder and add a Single Choice element and label it as “Payment Method”.
Jotform Form Builder Single Choice Item

This will serve as the option for the users to choose what payment method they prefer. You could use other fields, although we only want users to choose one type of payment method, so you can choose either a radio button or a dropdown.

  1. We will then add two iFrame Embed widgets where the payment forms PayPal Standard Form and Purchase Order Form will be embedded or loaded.
Jotform Form Builder Widgets

We will leave the main form with that for now.

Step 2: Set Up the First Payment Form (PayPal Standard)

We’ll create a new form and set up a PayPal Standard payment gateway. Under the Payments tab, choose PayPal Standard and add it to your form.

Jotform Payment Integrations

To learn more about setting up the payment integrations, you can start with these guides:

Step 3: Set Up the Second Payment Form (Purchase Order)

Just like step two, we will create another payment form. This time we will use Purchase Order as the payment gateway.

Jotform Purchase Order Element

The Purchase Order payment gateway is not integrated with any third party payment services. This is usually used if you want your users to pay via wire transfer or deposit in your bank account. You can use a Paragraph element to instruct the users where to send the payments. 

Step 4: Get the URL of the Payment Forms

The form URL can be found in the Form Builder’s Publish tab.

Jotform Form Publish

Step 5: Embed the Payment Forms in the Main Form

Now go back to the main form and set the URLs for each of the iFrame Embed widgets.

  1. Open the Widget Settings panel by clicking on the widget’s wand icon.
  2. Paste the PayPal Standard Form’s URL in the Frame URL field.
Form Builder Iframe Embed
  1. Do the same on the other widget for the Purchase Order Form.

Step 6: Set Up the Conditions

We only want to display the payment form depending on the choice the user made on the radio button. To do that, we will use the Show/Hide Field condition. If you need to dive deeper into this topic, here’s a guide on “How to Show or Hide Fields Based on User’s Answer”.

  1. Click Settings at the top then Conditions on the left. Here, you can create a Show/Hide Field condition.
Jotform Form Builder Conditional Formatting
  1. Now create two conditions that will show the specific Iframe Embed widget based on the selected payment method:
  • If the Payment Method is equal to “PayPal”, then show the PayPal Form iFrame.
Jotform Conditions
  • If the Payment Method is equal to “Purchase Order”, then show the Purchase Order Form iFrame.
Jotform Purchase Conditions

You now have forms that allow you to have multiple payment options. 

Note

Make sure to remove the submit button from your main form. The users will submit the entries from one of the payment forms.

You can see how my main form works on this form link: https://www.jotform.com/213133454169958

For a more complex form, you can read this user guide on how to update a multiple payment form using the multiple payment form from the Form Gallery: How to Update the Multiple Payment Form

Another alternative option is to redirect users to a different form URL based on the selected payment method. Here’s a guide on how to “Change the Thank You Page URL Based on a Condition”.

Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Faigy Katzburg - Profile picture
  • Lare Yao - Profile picture
  • ubus - Profile picture
  • ubus - Profile picture
  • Farah Camperio - Profile picture
  • Claude Carnot - Profile picture
  • R H - Profile picture
  • thsykes - Profile picture
  • axecomox - Profile picture
  • ubus - Profile picture
  • mycelebgr - Profile picture
  • 1stM8 - Profile picture
  • lashsia - Profile picture
  • YuRick - Profile picture
  • WSIguy - Profile picture
  • SaraMunari - Profile picture
  • cmcaracas - Profile picture
  • swgroup - Profile picture
  • Ya - Profile picture
  • crcna - Profile picture
  • worldsbestphotos - Profile picture
  • danmag - Profile picture
  • Bali-Chris - Profile picture
  • MDChapter - Profile picture
  • escfan - Profile picture