How to add two payment options into one form?

Is there a way to require a payment option of either PO or credit card? And if so what are the steps?

Hi Amy,

Thanks for reaching out to Jotform Support. If you want to add more than one payment method on your form, you can do that by create three forms. The first form will be the primary form and the other two will be payment forms. Then you can use Show/Hide Field conditions and Iframe widget on your first form to add the payment forms. Let me walk you through it:

Step 1: Build the First Form

1. Open your form in Form Builder, click on the Add Form Element menu on the left side of the screen.

2. Under Basic tab, drag and drop a Single Choice element on your form, and then set options as payment methods.

3. Now, click on the Add Form Element menu on the left side of the screen.

4. Under Widget tab, search Iframe widget and drag and drop two Iframe widgets on your form.

5. Right-click on the Iframe widget on the form and then select Hide.

6. Repeat the above step and hide the second Iframe widget on the form.

Step 2: Set Up the First Payment Form

7. Now, create your second form, and then click on Add Form Element menu on the left side of the page.

8. Under the Payment tab, drag and drop any payment method on your form.

9. Now, repeat the above steps to create your third form with another payment method.

Step 4: Get the URL of the Payment Forms

10. Open your payment form in Form Builder, in the orange navigation bar at the top of the page, click on Publish, and then click on Copy Link under Share With Link.

Step 5: Embed the Payment Forms in the Main Form

11. Open your first in Form Builder, click on the Iframe widget on the form and then click on the Wand icon, locate on the right side.

12. In the menu that appears on the left side of the screen, paste the first payment form URL under Frame URL.

13. Repeat the above step to add the second payment form URL in the Iframe widget.

Step 6: Set Up the Conditions

14. Open your first form in Form Builder, in the orange navigation bar at the top of the page, click on Settings.

15. In the menu that appears on the left side of the screen, click on Conditions, and then select Show/Hide a Field.

16. Now, set the conditions as shown in the screenshots shown below:

You can check my results in the screenshot shown below:

Give it a try and reach out again if you have any other questions.

Great instructions. However, I need will payments happen on two different back end forms? Or can I default it to the original form?
...

Hi Amy,

Yes, the payments will depend on their selected payment method in the workaround. So, for example, the user selects the purchase order payment option, then they will be submitting the form that is integrated with the Purchase Order payment gateway. Please note that Jotform currently does not support adding multiple payment gateways in a form. However, you can follow my colleague's steps as a workaround to accept multiple payments in the form.

Let us know if you need any more help.

Ok, based on your colleagues recommendations. Does the submit button go on the credit card / PO form or the first one?
Amy
...

Hi Amy,

Both forms should have their own Submit button, since they are two separate forms, with one of them embedded into the other.

Let us know if you have any other questions.