Skip to main content
Online payment form with credit card fields and a Stripe integration icon
Tutorials

How to Build a Payment Form with Stripe

Learn how to create online payment forms integrated with Stripe. Collect event fees, course payments, donations, and more with a step-by-step tutorial.

Eran Bodokh

Eran Bodokh

Founder & CEO

5 min read
#payment form#Stripe#collect payments#tutorial#online payments

Collecting payments online should not require building a custom checkout page or hiring a developer. Whether you are registering attendees for a paid event, collecting course fees, accepting donations, or processing service deposits, a payment form with Stripe integration lets you start collecting money in minutes.

This tutorial walks you through building a payment form from scratch using Formalingo's form builder and Stripe integration. By the end, you will have a live form that collects information and processes payments securely through Stripe. For more on payment capabilities, visit the payments solution page.

Common Use Cases for Payment Forms

Payment forms sit at the intersection of data collection and commerce. Here are the scenarios where they are most valuable:

Event registration with fees. Conferences, workshops, galas, and meetups often require both attendee information and payment. A single form collects the registration details (name, email, dietary preferences, session selections) and processes the fee — no separate checkout step required.

Course and program enrollment. Educational institutions, training providers, and online course creators need to collect student information alongside tuition or course fees. Conditional logic can adjust the payment amount based on the selected program or payment plan.

Donations and fundraising. Nonprofits benefit from forms that combine donor information with flexible payment amounts. Respondents can select a preset donation tier or enter a custom amount.

Service deposits and booking fees. Consultants, photographers, venues, and service providers can collect deposits at the time of booking, along with the project details needed to begin work.

Membership dues. Associations, clubs, and professional organizations can collect annual or monthly membership payments alongside updated contact and profile information.

Setting Up Stripe

Before building your payment form, you need a Stripe account. If you do not have one:

  1. Create a Stripe account at stripe.com. The signup process takes about five minutes and requires basic business information.
  2. Complete identity verification. Stripe requires identity verification before you can receive payouts. This typically involves providing a government ID and business details.
  3. Note your API keys. In the Stripe Dashboard, navigate to Developers and then API keys. You will need the publishable key and the secret key to connect Stripe to your form platform.

Stripe supports credit cards, debit cards, Apple Pay, Google Pay, and numerous local payment methods depending on your region. There is no monthly fee — Stripe charges a per-transaction fee (typically 2.9% + $0.30 for US cards).

Building Your Payment Form

Step 1: Create a New Form

From your Formalingo dashboard, click New Form. Give it a descriptive title — for example, "Spring Conference 2026 Registration" or "Donation Form."

Step 2: Add Information Fields

Before adding the payment component, build out the information-collection portion of your form. Depending on your use case, this might include:

  • Contact information — name, email, phone number.
  • Event-specific questions — session preferences, dietary restrictions, accessibility needs.
  • Enrollment details — program selection, prior experience level, learning goals.
  • Donor information — recognition preferences, dedication messages, recurring gift interest.

Use sections to organize related questions into logical groups. This improves the respondent experience, especially for longer forms.

Step 3: Add the Payment Question

Add a Payment question type to your form. This is a specialized field type that integrates directly with Stripe. Configure the following:

  • Amount — set a fixed amount or allow the respondent to choose from predefined options. For donations, you can enable a custom amount field.
  • Currency — select the currency for the transaction (USD, EUR, GBP, and many others are supported).
  • Description — a brief description of what the payment covers, displayed to the respondent during checkout.

If the payment amount depends on earlier answers (for example, different ticket tiers at different prices), use conditional logic to display the appropriate payment field based on the respondent's selection.

Step 4: Connect Stripe

Navigate to the integration settings for your form and connect your Stripe account. This typically involves:

  1. Entering your Stripe API keys or authenticating through Stripe Connect.
  2. Confirming the connection with a test transaction.
  3. Selecting whether to use Stripe's test mode (for development) or live mode (for real payments).

Once connected, the payment field in your form will process transactions directly through Stripe's secure infrastructure. Card details are handled entirely by Stripe — they never touch your server or the form platform.

Step 5: Configure Form Settings

Before publishing, review these settings:

  • Confirmation message — customize the thank-you screen to include payment confirmation details and next steps. For example: "Thank you for registering. Your payment of $150 has been processed. You will receive a confirmation email shortly."
  • Email notifications — set up notifications so you receive an alert for each new submission with payment.
  • Branding — add your logo and brand colors so the form looks professional and trustworthy. Trust is especially important when asking respondents to enter payment information.

Testing Your Payment Form

Before going live, test the entire flow:

  1. Switch Stripe to test mode if you have not already. Test mode processes simulated transactions without charging real cards.
  2. Use Stripe's test card numbers. The most common test card is 4242 4242 4242 4242 with any future expiration date and any three-digit CVC. Stripe provides additional test card numbers for simulating declines, specific card brands, and 3D Secure authentication.
  3. Complete the form end to end. Fill in all fields, submit the payment, and verify that the confirmation screen displays correctly.
  4. Check the Stripe Dashboard. Confirm that the test payment appears in your Stripe Dashboard under Payments. Verify that the amount, currency, and metadata are correct.
  5. Test error scenarios. Use Stripe's decline test card (4000 0000 0000 0002) to verify that the form handles payment failures gracefully with a clear error message.

Once testing is complete, switch Stripe to live mode and publish the form.

Tracking Payments

After your payment form is live, you can track transactions from two places:

  • Formalingo analytics — the form analytics dashboard shows submission counts, completion rates, and individual responses including payment status.
  • Stripe Dashboard — provides detailed transaction data including fees, refunds, disputes, and payout schedules.

For reconciliation, each form submission is linked to its corresponding Stripe payment via a transaction ID. You can export form responses as CSV or XLSX and cross-reference with Stripe's transaction exports.

Security Considerations

Payment forms involve sensitive financial data, so security is non-negotiable:

  • PCI compliance — Stripe handles all card data processing and is PCI DSS Level 1 certified. Card numbers never pass through the form platform's servers.
  • TLS encryption — all data transmitted between the respondent's browser and the server is encrypted via TLS.
  • Tokenization — Stripe replaces card details with secure tokens, so even if form data were compromised, card numbers would not be exposed.

By using Stripe's payment infrastructure rather than handling card details directly, you inherit Stripe's security posture without the compliance burden of managing card data yourself.

Start Collecting Payments

Building a payment form does not require technical expertise or a custom development project. With a form builder and Stripe integration, you can go from zero to collecting payments in under 10 minutes. The combination of structured data collection and integrated payment processing means fewer tools, fewer manual steps, and a better experience for both you and your respondents.

Ready to build your first payment form? Explore Formalingo's payment form capabilities and start collecting payments today.

Continue Reading

Stop tagging fields by hand.
Let AI do it in seconds.

Start free — no credit card required.