How to create a donation form using Otter Forms?

📝 Note: This article presents a combination of Otter Forms and Stripe Checkout block. It is a premium field of the Otter Blocks plugin, which you can get from here.

Otter Forms extended its utility by adding Stripe as a form field. Using a Stripe account and Otter Forms, you can build a donation form, but not only. In this article, we will present how to use the Stripe form field for this scenario.

🔐 Stripe API key

1

First, make sure you have created a Stripe account on their platform.

2

Click on the Developers view and open the API keys panel.

3

From the Standard keys, copy the Secret key.

4

Navigate to Otter Blocks > Settings > Integrations.

5

Paste the API key from Stripe to start using products.

🧰 Creating Donations in Stripe

Creating donations in the Stripe dashboard is the process of creating new products. 

1

Navigate to the Stripe dashboard and open the Products catalogue.

2

Click on the Add product button.

3

Insert a name; in our case, we used "Donation" for all products.

4

Insert the price, which in this case will be the amount of the donation.

5

Depending on your idea, transform it into a recurring or a one-time donation.

6

Finally, click on Save product.

📝 Stripe Form Field

When everything is ready, all you need to do is create the form and add the Stripe fields.

1

Navigate to the page where you want to add such a form.

📝Note: In our case, we used Neve Custom Layouts to display it on all blog posts.

2

Insert a form block into the page and click on the Add Input Field button.

3

Click on the pencil icon to edit the form field.

4

Inside the Field Type dropdown, select Stripe.

5

Expand the Stripe Product accordion and select the product that you want to display.

6

If you added more pricing alternatives, select the price that you want to display.

7

When everything is done, publish the changes.

💡Result

After the user enters the details and clicks on Submit, he will be redirected to the Stripe Payment portal, where he needs to add his payment details.

You can see the user's data inside Otter Blocks > Form Submissions. An important thing to note is that if the user didn't complete his order, it will appear as a draft in the Otter dashboard.