Payment options on Form

  • johnathangulston
    Asked on July 24, 2024 at 3:37 PM

    Hi I want to create a payment option section on my form that would allow users to click on a box to either choose between payroll deduction or recurring payments thru square. If there an option where the user can choose one payment option and the other option doesnt show up on the form

  • Aries JotForm Support
    Replied on July 24, 2024 at 4:39 PM

    Hi Johnathan 

    Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

  • Aries JotForm Support
    Replied on July 25, 2024 at 3:43 PM

    Hi Johnathan 

    Thank you for your patience. I need more time to work on a solution. I'll get back to you shortly.

  • Aries JotForm Support
    Replied on July 26, 2024 at 12:57 AM

    Hi Johnathan,

    Thanks for your patience. It is possible to add two options for payment methods and hide the other payment option conditionally. You can achieve this by adding Single Choice field and creating conditions depending on the option that will be selected. In addition, you can set the value for each contribution level and calculate the total amount using the form calculation widget. Let me show you how to do it:

    1. In Form Builder, click on the gear icon for the contribution levels.

    2. Go to Options and turn on Calculation Values.

    3. Then enter the amount for each contribution level.

    Payment options on Form Image 1 Screenshot 110

    Add and hide the Form Calculation widget to the form field.

    4. Click on Add Form Elements and got to Widgets.

    5. Next, search for Form Calculation and add it to your form Field

    Payment options on Form Image 2 Screenshot 121

    6. Click on the gear icon, go to Advanced, and toggle On for Hide Field.

    Payment options on Form Image 3 Screenshot 132

    Now, you have to add the contribution level to Form Calculation widget in order to calculate the field

    7. Click on the wand icon on the Form Calculation widget.

    8. Then click on Add Field, find the Contribution Level field and click Save.

    Payment options on Form Image 4 Screenshot 143

    To hide the other option for payment method, you need to add the Single Choice element and create two options. Then you need to create Show/Hide Field conditional logic for them.

    9. Click on Add Form Element and choose the Single Choice element.

    Payment options on Form Image 5 Screenshot 154

    Then create a Show Hide field conditional logic for the Single Choice element and target the product field.

    10. Click on Settings, go to Conditions, then click Add Conditions, and select Show/Hide Field .

    Payment options on Form Image 6 Screenshot 165

    11. Follow the conditional logic format below:

    Payment options on Form Image 7 Screenshot 176

    Finally, you need to modify the product list.

    12. Click on the product list, then click on the wand icon.

    13. Next, click the drop-down for Payment Type and select Subscriptions then click Continue.

    Payment options on Form Image 8 Screenshot 187

    14. Click +Add Subscription on the product and click on the small gear icon.

    15. Change the subscription name, set the Variable Price to Yes, click on the drop-down for Get Price From, select the Form Calculation widget you added and toggle Yes for Selected by default.

    Payment options on Form Image 9 Screenshot 198

    Here's the result:

    Payment options on Form Image 10 Screenshot 209

    You can also check out the cloned version of your form here to check the medication I made. You can also follow this guide on how to clone a form via URL.

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