Accepting Payments with Your Form Builder Widget

With Elfsight Form Builder widget, you can turn any form into a payment tool to collect fees, sell services, or set up subscriptions right inside your widget. Follow this guide and start accepting payments in minutes! 🚀

The widget currently supports Stripe only, so to accept payments, you’ll need a Stripe account. Learn more here: Getting started with Stripe.

Important Notes Before You Begin

💳 Payment Types

Our Form Builder widget supports one-time payments and subscription payments only. Other Stripe payment options (such as “Buy now, pay later”) are not supported.

💰 How Payments Work

Once Stripe is connected, users will be required to complete payment before submitting the form.

💵 Supported Currencies

Payments are available only in currencies and minimum amounts supported by Stripe. For details, see Stripe Docs: Supported Currencies.

How to Integrate the Payment Form

Follow the instructions below to connect Stripe and enable payments in your widget.

Connecting Stripe

1

Open your widget editor and go to Integrations → Stripe:

2

Click Connect Stripe:

3

In your Stripe Dashboard, go to Developers → API keys or follow this direct link:

Copy the Publishable and Secret keys:

Stripe provides two types of keys: Sandbox for testing and Live for real payments. Make sure you’re viewing the correct environment in your Stripe Dashboard, as each has its own set of keys. Learn more: Stripe API Keys Explained.

4

Return to the widget editor, paste both keys into the fields, and click Connect:

Success! 🎉 Stripe is now connected. To start accepting payments, set your pricing and configure the checkout settings.

Completing Your Payment Setup

In the Product Details section, click Price to configure your payment settings:

Select a Pricing Model (Fixed Price or Subscription)
Choose a Currency
Set the Price value
If you select Subscription, you'd also need to specify the Billing Period

You can also add a Name, Short Description, and Image for your product, which will be shown before checkout:

Other Checkout Settings

These optional settings help you customize the checkout experience by adding a refund policy and a confirmation message for your customers:

Terms & Refund Policy — Add your refund policy (shown during checkout).
Success Message — Customize the confirmation message (shown after payment).

Nicely done! 🎉 Your widget is now ready to accept payments. Here’s how the payment form will appear to your customers:

Viewing Payment Information

Once payments are enabled, you can access payment data in your Stripe Dashboard and form submissions. The following details are available:

Payment Status	Price
Amount Paid	Payment Method
Card Last 4 Digits	Transaction ID
Payment Date	Receipt Link
Invoice Link	Refund Link

Check the toggles below to see how the information will appear in your submissions:

Email Notifications

When you receive a new submission email, the payment information will appear like this:

For instructions on setting up email notifications, check out this guide: Email Notifications.

CSV File & Google Sheets

Here's how the payment details will appear in your spreadsheets:

For details on finding the CSV file or forwarding your submissions to Google Sheets, refer to this article: Where to Find Your Form Builder Submissions.

Zapier Integration

Here’s how the payment data will appear in your Zap:

Want to connect with Zapier? Follow this guide: How to Integrate Your Widget with Zapier.

Make.com Integration

Here’s how the payment data will appear in your Make.com scenario:

To set up Make.com integration, see this article: How to Integrate Your Form Widget with Make.com.

Webhooks

Here’s how the payment information will appear in the webhook payload sent with your submission:

To set up Webhooks integration, refer to this article: Using Webhooks in Your Widget.

You're all set! 🎉 Now you can accept payments seamlessly through your Form Builder. If you need help, feel free to contact our Support team.

FAQ

Can I test the integration before accepting real payments?

Yes! Use the API keys from your Stripe Sandbox environment and test payments with Stripe Test Cards.

When you're ready to switch to Live mode, in the widget editor, open the three dots menu next to Stripe, click Disconnect, and replace the keys with your Live ones:

Can I use a restricted Stripe key in the widget?

Yes. Although your standard Secret Key is secured and used only to process payments, you can use a restricted key instead. Make sure it has the following permissions:

Checkout Sessions (Write)
Customers (Write)
Payment Intents (Write)
Balance (Read)
Invoices (Read)
Subscriptions (Write) for subscription payments

To create a restricted key, follow this guide: Stripe API Keys.

Will my customers get a receipt after payment?

Customers can access their receipt in the email sent after submission:

To send confirmation emails, toggle on Autoresponder Email in the Email tab → Notify Respondents.

⚠️ Important: By default, the autoresponder email includes only the template text. To send customers their payment details and submitted information, add the [form-data] tag in the Message field of your email template.