How to create a form with multiple payment methods?

Hi,

I am looking to create a form that depending on the option they select it will determine which form of payment method to present them. Example, I will have a drop down with payment methods (Cash, check, Venmo, Apple/google pay) and depending what they select it will show or hide other fields. If they select cash then there will be no payment method. If they select check it will give them directions for where to mail the check and who to make it out to. If they select venmo or apply pay I want to set up the appropriate integration.

Hi 716paws,

Thanks for reaching out to Jotform Support. Unfortunately, you can only add one payment integration into a single form. Based on your options stated at the top, you can use either Venmo or Apple/Google Pay and not both. However, you may be able to create a basic multiple payment form but it is quite complex. Let me walk you through it:

You will be needing a total of 4 forms.

• Main Form – the primary form that will house the two forms.
• Apple Pay or Google Pay Form - the first payment method
• Venmo Form - the second payment method
• Purchase Order Form - the third payment method (Cash and Check)

Step 1: Build the Main Form

1. In Form Builder, add a Single Choice element and label it as “Payment Method”.

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.

2. We will then add two iFrame Embed widgets where the payment forms Apple Pay or Google Pay Form, Venmo Form, and Purchase Order Form will be embedded or loaded.

We will leave the main form with that for now.

Step 2: Set Up the First Payment Form (Apple Pay or Google Pay)

We’ll create a new form and set up an Apple or Google Pay payment gateway.

1. Under the Payments tab, choose Apple Pay or Google Pay and add it to your form.

2. Select the payment integration that you want to use either Square or Stripe. In my example I chose Stripe 

3. Set up the products that you need.

Step 3: Set Up the Second Payment Form (Venmo)

Just like in step 2, we will create another payment form. This time we will use Venmo as the payment gateway.

Step 4: Set Up the Third Payment Form (Purchase Order - Cash or Check)

Just like in steps 2 and 3, we will create another payment form. This time we will use Purchase Order as the payment gateway.

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. 

1. In this form, we will add the mode of payment if it's Cash or Check. So add a Single Choice element and label it as “Mode of Payment: Cash or Check?”.

You mentioned that if it's cash, no payment is needed, and for the check, instructions will be given.

2. Add the necessary fields needed for the instructions. Paragraph element for Cash instructions

3. Add Short Text elements for the Name and Check Number and another Paragraph for the Check instructions.

4. Set these fields hidden.

5. Go to Settings in the orange navigation bar at the top of the page.

6. Click on Conditions in the left menu.

7. Add these conditions:

Step 5: Get the URL of the Payment Forms

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

Step 6: 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.

3. Click on Update Widget.

Do the same on the other widget for the Venmo and Purchase Order (Cash or Check) Form.

Step 7: 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.

2. 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 “Apple Pay or Google Pay”, then show the Apple Pay or Google Pay iFrame.

• If the Payment Method is equal to “Venmo”, then show the Venmo iFrame.

• If the Payment Method is equal to “Cash or Check", then show the Cash or Check iFrame.

You now have forms that allow you to have multiple payment options. Please take note 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 link and clone it. Please see the results below:

Give it a try and let us know if you have any other questions.

So I set up the Payment methods per your instructions. The issue I'm having is being able to submit the form with the appropriate payment method.

Hello 716paws,

Thanks for getting back to us. Just to confirm, are you working on this form? If so, I can see that you're using Apple Pay and Google Pay as payment methods. Can you please let us know in particular what your issue is? Are the users unable to send their payment when they submit the form?

As for your other question, I've moved that to a new thread. You can check that out here.