How to receive payment from multiple payment method

Je souhaite intégré un moyen de payement sur mon Appli, mais tous les moyens de payement que vous proposez ne sont pas disponible dans notre pays. Pouvez vous m'aider à trouver une bonne solution ?

Hi Moussa,

Thanks for reaching out to Jotform Support. Unfortunately, our French Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in French, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

Now, let me help you with your question. I understand that you want to be able to integrate a payment method into your App and also give the option to pay cash on delivery. Can you please tell us what payment method are you looking for? We do have several payment integrations that can be used but in order to add the option for Cash on Delivery, you will have to create a basic multiple payment form to cater to this requirement but it is quite complex. Let me walk you through it:

You will need a total of 3 forms.

• Main Form – the primary form that will house the three forms.
• Paypal Form - the first payment method
• Purchase Order Form - the second payment method (Cash on Delivery)

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 iFrame Embed widgets where the payment forms Paypal 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 (Paypal)

We’ll create a new form and set up a PayPal payment gateway.

1. Under the Payments tab, choose Paypal Business and add it to your form.

2. Authenticate with your Paypal Business account to set it up.

3. Set up the products that you need.

Step 3: Set Up the Second Payment Form (Purchase Order - Cash on Delivery)

Just like in step 2, 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, you will be adding the necessary fields for the Cash on Delivery option and its Products. Maybe add the Paragraph element for Cash instructions.

Step 4: Get the URL of the Payment Forms

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

Step 5: 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 Form’s URL in the Frame URL field.

3. Click on Update Widget.

Do the same on the other widget Purchase Order (Cash on Delivery) 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 “Paypal”, then show the Paypal iFrame.

• If the Payment Method is equal to “Cash on Delivery", then show the Cash on Delivery 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:

You can now add the Multiple Payment form in your app as a payment selector. Here's how:

1. In App Builder, click on the Add Element menu.

2. Select the Form element and choose the Multiple Payment Form.

After adding the form, you can now use the Multiple Payment form to select Cash on Delivery options.

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

Je suis impressionné par la pertinence de votre réponse. Mais c'est vraiment complexe pour moi.

Hi Moussa,

Thanks for getting back to us. Unfortunately, as the feature to use multiple payment method on one form is not currently a direct feature you would need to follow the steps provided by my colleague and use an iFrame code to reflect a second form for your second payment method. As for receiving payments using the QR code, I moved the question on another thread to avoid confusion. You can access checkout thread here.

Reach out again if there's anything else we can help you with.