how to allow the order form to select cash or credit card?

  • KTadmin
    Asked on January 7, 2023 at 10:27 PM

    https://form.jotform.com/230057945205453


    Hi good day,

    above is our link. Kindly advise how can i do the settings for one form to accept either credit card or cash?



    best regards,

    Sharon

  • Madonna_U
    Replied on January 8, 2023 at 8:30 AM

    Hi Sharon,

    Thanks for reaching out to Jotform Support. I understand that you wanted to add an option to your form to pay cash or credit card. Let me look into this for a moment and I'll get back to you as soon as I have the solution.

    We appreciate your patience and understanding while we’re looking into this.

  • Madonna_U
    Replied on January 8, 2023 at 12:28 PM

    Hi Sharon,

    Thanks for patiently waiting. After several tests on your form, I was able to come up with a workaround to resolve your issue. First, I cloned your form and made 3 clones. The first cloned form is only for the payment mode selection. That will route your customer to either the purchase order form or the credit card payment form. So, I replaced the "Submit" text on the Submit button with "Next" not to make it obvious that it's a submit button and change the button color in Advance Designer. Check out the screencast below on how to do that:

    • Click the gear icon on your Submit button field to open the Submit Properties.
    • Change the "Submit" text from the Button text section and change it to "Next".
    • Select Right for the button alignment.
    • Close the properties and click on the paint roller icon at the upper right corner of your Form Builder page.
    • Click on the Advanced Designer button located at the bottom.
    • On the Advanced Designer page, click on the Next button to show the Button Styles setting and select the color blue on the side of the color pallet from the Background and Border color settings.
    • Next, click on the diskette icon below the Jotform logo to save the changes.
    • And click the Jotform logo on the top of it to go back to the Form Builder page.

    1673193158 63bae6c68a4e5  Screenshot 10

    Let's set the first form aside and move to the second cloned form. I only made a few changes on the second form since this is for the Cash Payment order. Check out the screencast below:

    • I changed the form title form for me to identify easily that this is for the cash payment order.
    • I changed the Payment Method field from a dropdown element into a short text question.
    • Go to the Advanced tab on the properties to make it into Read Only
    • Since on the first form they already have selected the payment method, we only need to pass the data from the first form to the second form and prevent anyone to change the field that is why I turned on the Read Only access for the field.
    • At the bottom of the Advanced settings, you'll see the Field Details click the dropdown arrow and copy the Unique Name of the Payment Method field and paste it into your notepad.

    1673194305 63baeb415a24f  Screenshot 21

    Now let's proceed to the third form which is your Credit Card Payment form. The same goes for the third form, I changed the form title from the top and replaced the dropdown element of the Payment Mode field with a short text question then changed it into Read Only and get the Unique Name from the Field Details. The only difference is I switched the payment gateway from Purchase Order to Stripe you can select Square or whatever credit card payment gateway you have an account with. See the screencast below on how to do that:

    • On your Form Builder page, click on Add Form Elements in the upper left corner.
    • Go to the Payments tab and look for the Purchase Order which is the current payment gateway.
    • Click on the 3 dots or ellipsis beside it and click the Switch to another gateway and select the credit card gateway you prefer from the small window that will pop up then click the Use Selection button and click Ok.
    • You may notice that some fields may change their position, you can just drag them back to their original position in the form.
    • You can also check your conditional logic if there are any changes so that you can set it back to its original condition.

    1673198463 63bafb7f19e06  Screenshot 32

    Now, all of your forms are all set. We need to go back to the first form to set a conditional logic.

    • Open your first form with the Payment Mode selection.
    • Click on Settings and go to Conditions on the left tab menu.
    • Select the Change "Thank You" Page as the new condition.

    1673196076 63baf22cb693d  Screenshot 43

    • Follow the conditions below when they select Cash and click Save.

    1673196248 63baf2d8ec97a  Screenshot 54

    • Follow the conditions below when they select Pay Now and click Save.

    1673196379 63baf35bdeb4d  Screenshot 65

    For the Cash option, you need to put the Cash Payment form link and add ?paymentMode={paymentMode}. The same goes for the Pay Now option, paste the form link of your Credit Card Payment form and add ?paymentMode={paymentMode} to automatically pass the form data to another form. Here's a relevant guide for that. This is the result of my test submission:

    1673198751 63bafc9f80dcd  Screenshot 76

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