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 Standard and Purchase Order.
In our case, we will have a total of three forms:
FIRST FORM: Primary form that will house the two forms
SECOND FORM: Will be your 1st payment method, PayPal Standard.
THIRD FORM: Will be your 2nd payment method, Purchase Order.
STEP 1: BUILD THE FIRST FORM
1. Go to your Form Builder and click the ADD FORM ELEMENT.
2. We will add a SINGLE CHOICE FIELD (radio button) and label it as “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 or a dropdown.
3. We will then add two IFRAME EMBED WIDGETS where the PayPal Standard form and Purchase Order form will be embedded or loaded.
We will leave the main form with that for now.
STEP 2: SETUP UP THE SECOND FORM (PAYPAL STANDARD)
1. Next, 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 STANDARD and add it to your form.
2. To learn more about setting up the payment integrations, you can start with these guides:
STEP 3: SETUP THE THIRD FORM (PURCHASE ORDER)
1. Just like STEP 2, we will create another form but this time we will add the “Purchase Order” payment 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.
STEP 4: GET THE FORM URLS OF THE SECOND AND THIRD FORM
Make sure to get the URL or direct links of the 2nd and 3rd forms. You can do that by clicking PREVIEW at the top right then copy the FORM URL. Or, you can follow this guide on Where to Find My Form URL
STEP 5: TIME TO SETUP THESE URLS TO THE MAIN FORM
Now go back to the MAIN FORM set the links on each of the IFRAME EMBED WIDGETS respectively.
1. Click the widget to highlight it then click the WAND icon.
2. Go to the GENERAL tab of the widget wizard.
3. Paste the FORM URL on the FRAME URL section.
Do these twice, for both widgets.
STEP 6: SETUP THE 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 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 Base on User’s Answer.
1. First, click SETTINGS at the top > CONDITIONS on the left > then select SHOW / HIDE FIELD.
2. Now create a condition that will only show the specific IFRAME EMBED WIDGET that is based on the option chosen from the RADIO BUTTON.
Here, if the selected option is PAYPAL, then show the IFRAME EMBED WIDGET that holds the PayPal Form.
Here, if the selected option is PURCHASE ORDER, then show the IFRAME EMBED WIDGET that holds the Purchase Order Form.
You now have forms that allow you to have multiple payment options.
IMPORTANT NOTE: Make sure to remove the SUBMIT button from your MAIN FORM, your users will basically submit the form either from the SECOND FORM or THIRD FORM instead.
You can see how my main form works on this form link: https://www.jotform.com/70983924622968
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: 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 Change the Thank You Page URL Based on a Condition.