Stripe Payment Integration: Adding Optional Donation Section to Event Ticketing Form

I have an event ticketing form with its own products and payment collection through my stripe account

I want to add a optional Donation section in the form through which i want to collect donation for our non profit

how can i do that?

I am not able to add two payment widgets to the same form

i am not able to use the same payment widget for both products and donation

when i use two forms using iframe embed, i am not able to use the same payment widget, users need to enter payment info in both he forms

how can i solve this?

Hi MMM,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

Regarding your event ticketing form with Stripe payment and the desire to add an optional donation section, Jotform does not support adding two payment widgets in the same form directly. However, there is a workaround you can use to achieve this:

Let me walk you through it:

1. Create a main form that will serve as the primary form where users select their payment method or donation option. Add a Single Choice element labeled something like "Payment Method" for users to choose between purchasing tickets or making a donation.
2. Create two separate forms: one for your event ticket products with Stripe payment integration, and another form dedicated to collecting donations with Stripe payment set to collect donations.
3. Embed these two payment forms into your main form using the iFrame Embed widget. You will add two iFrame Embed widgets in the main form and set their URLs to the respective payment forms (ticketing form and donation form).
4. Use conditional logic in the main form to show or hide the embedded payment form based on the user's selection in the Payment Method field. For example, if the user selects "Purchase Tickets," show the ticketing form iframe; if the user selects "Donate," show the donation form iframe.
5. Remove the submit button from the main form so users submit their entries through the embedded payment forms only.

This approach allows you to use one payment widget per form but combine them in a single user experience without requiring users to enter payment information twice.

For more details, you can refer to Jotform's guide on How to Update the Multiple Payment Form and the video tutorial on How to Accept Multiple Payment Methods With Jotform.

Give it a try and let us know how it goes.

this is not helpful

i can give the choice to select either product or donations to my user

the primary goal is to sell the tickets,

i want to surface the 'donate' option as an optional section in the form, if the user selects ticket and donation, it should go through the same form, if they select just the ticket thats fine too

Hi MMM,

You can add one payment integration per form, but you can display multiple integrations in the same form by using the iFrame Embed widget, adding a Single Choice element, and applying the Conditions feature with the existing payment gateway.

Doing this let's you setup one donation payment and one product payment. Let me show you how to set it up:

At first, let's add the iFrame Embed widget to your form:

1. In Form Builder, click on the Add Element menu on the left side of the screen.
2. Click on the Widgets tab, search for iFrame Embed and drag and drop it to your form.
3. In the menu on the right, under the General tab, paste the Frame URL of the other form which includes fields and the payment integration.
4. Next to the Iframe Embed widget, click on the Gear icon and change the Height option as you want.

Then, let's add a Single Choice element:

1. While in Form Builder, click on the Add Element menu on the left side of the screen.
2. In the menu on the left, under the Basic Elements menu, drag and drop a Single Choice element.
3. Change the label and the options so that users can choose the payment method.

Finally, we need to set up Show/Hide Field conditions. Let's do it:

1. In Form Builder, in the orange navigation bar at the top of the screen, click on Settings.

2. In the menu on the left side of the page, click on Conditions and choose the Show/Hide Field option.

3. Set up two conditions as you see below and click on Save.

After completing all the steps, you can display two payment methods on the same form. Keep in mind that if users fill out the form within the iframe widget, submissions will be collected in that form. Check out the screencast below to see how it'll work: 

You can also check out the detailed explanation in this How to Create a Basic Multiple Payment Form guide.

Give it a try and reach out again if you need any help.

i dont think, you understood my issue

I am not asking users to select between the two forms (similar to how you are showing in the example)

I want both the product sales and donation to be on the same form

Hi MMM,

My teammate suggested using two forms and embedding one of them since a form can only have one payment integration and one Payment Type. This means if it's Sell Products, you can't make the Payment Type as Donation and vice versa. You can refer to the screenshot below on the right-side part:

There's a workaround for this by using basic form elements like the Single Choice element for the product, Dropdown element for the product quantity, another Single Choice element to ask the user if they'd like to donate, a Number element to enter the amount of the donation, and a Form Calculation widget to get the overall total.

Then, we'll pass the total amount from the Form Calculation widget into the payment integration. If that works for you, we can create a demo using a cloned form. This will make sure you're going to use one form so you can sell tickets and collect donations.

Reach out to us if you need any more help.

sorry, how do i configure the single choice elements for product and donation? how do i add the number element and the form calc widget?

can you show a demo? or give an example form

Hi MMM,

Let me show you a demo using a cloned form:

Adding a Multiple Choice element (instead Single Choice) for the product and a Dropdown element for the quantity:

1. In Form Builder, click on the Add Element button on the left side.
2. Under the Form Elements, below the Basic tab, drag and drop a Multiple Choice element and a Dropdown element in whichever part of the form page you prefer.
3. Select the form elements and label them. Then click on the Gear icon on the right side. In the Multiple Choice Properties on the right side, go to the Options tab. In the box, enter the ticket product.
4. Next, enable the Calculation Value and enter the value 20. Then in the Dropdown Properties, the same section enters the number of quantities.

Let's now add a Single Choice element to ask users if they want to donate and a Number element where users can add how much they'll donate:

1. Under the Form Elements, below the Basic tab, drag and drop a Single Choice element and a Number element in whichever part of the form page you prefer.

2. Select the form elements and label them. Then click on the Gear icon on the right side. In the Single Properties on the right side, go to the Options tab. In the box, Yes and No.

3. Now, in the orange navigation bar on top, go to the Settings tab and select Conditions from the left menu.

4. Then choose the Show/Hide Field condition and create the condition below:

5. Finally, click on the Save button.

We're going to add a Form Calculation widget to get the overall total:

1. Under the Form Elements, go to the Widgets tab. Drag and drop a Form Calculation widget in whichever part of the form page you prefer.

2. Select the widget and label it, then click on the Wand icon on the right side.

3. Next is to click on the Add Field button and select the form elements to be included in the calculation. You can refer to the screenshot below:

4. Then, click on the Save button.

Lastly, we'll change the payment integraton's Payment Type to User Defined Amount:

1. Click on the Credit Card icon on the right side. Then change the Payment Type to User Defined Amount.
2. A notification message will appear, click on the Yes, change button.
3. Next, select the Product List element and click on the Coins icon on the right side.
4. Set the Form Calculation widget in the Get Price From.

Below is a screencast showing how it works:

This is the link to my cloned form, if you'd like to test it.

Reach out to us if you need any more help.

thanks, i created this form to meet my needs, i have two major issues

1. 0.3 shows in the total amount field by default without even selecting the Quantity
2. I am not able to add Coupon/promo code. i tried using conditions logic, but its not working

pls help

Hi MMM,

I’ve gone ahead and moved your other questions to separate threads to keep things tidy, and someone from our Support Team will help you with them here:

Calculation Field: Total Amount Shows 0.3 by Default Without Quantity Selection

Conditions Logic: Unable to Add Coupon or Promo Code

Let us know if you have any other questions.