Use the steps below to connect your paid form with Stripe to charge visitors when they submit. Before hopping in, please review some helpful terminology below related to this process.
The Form Builder is available for Grow and Amplify plan websites. Change your plan in the Account & Billing section of your website Dashboard.
- The payment processor is the service you use to charge people money online. This provider manages credit card transactions and ensures that the money you charged ends up in your account. The most common providers are Stripe, Authorize.Net and PayPal.
- A feed on a form refers to that form’s connection with a third-party provider. For example, you might set up a feed to charge a visitor through PayPal for the amount they offered to donate. This feed is typically processed each time a visitor submits your form.
- Conditional logic is used to determine the criteria in which a form’s feed is processed. For example, on a donation form you may have two feeds, one which processes a single donation and another that processes a recurring monthly donation. For the feed processing recurring payments, you would set up conditional logic to only process the feed when the user clicked the option to make a monthly donation.
- The “Product” field type used in your form determines what the visitor is paying for and how much a visitor should be charged when they submit. A Product field can have a fixed price, such as for a t-shirt, or it can be a variable price that the visitor can select, such as for a donation.
If your organization uses a payment processor that isn’t Stripe, learn how to connect to other services.
Setting Up a Stripe Feed
- While editing your paid form, hover over the Settings menu and click Stripe in the dropdown.
- Click the Add New button to create a new feed.
- Enter a Name for the feed. You can set this name to something generic such as “Stripe Feed”, or if you end up having multiple feeds that only run under specific circumstances, we’d recommend naming it something more descriptive.
- For example, on a donate form you may end up with two feeds, one to process one-time donations and another to process recurring donations. In that case, we’d recommend naming the feeds “One-Time Donation” and “Monthly Donation” to make sure they’re clear.
- Choose the Transaction Type. If you plan to charge the visitor one time, choose Products and Services from the dropdown. If you plan to charge them on a regular basis, such as monthly or yearly, choose Subscription from the dropdown.
Settings for Products and Services
If you chose Products and Services from the Transaction Type dropdown, be sure to adjust the following settings.
- Choose the Payment Amount you want to charge the visitor. We recommend you almost always choose Form Total. This will combine the price of all selected products to charge the visitor.
- For the Store Receipt field, choose whether you want Stripe to send a receipt to the visitor when they submit. We recommend leaving this set to “Do not send receipt” and instead sending a thank you email notification from your form since it can be customized much more than an automated receipt.
Settings for Subscriptions
If you chose Subscription from the Transaction Type dropdown, be sure to adjust the following settings.
- Choose the Recurring Amount you want to charge the visitor. We recommend you almost always choose Form Total. This will combine the price of all selected products to charge the visitor.
- Select the correct Billing Cycle to determine how often the visitor needs to be charged. For example, to charge the visitor every six months set the fields to read “6 month(s)”.
- You can check the box to enable a Setup Fee to be charged once, not on a recurring basis. Once that box is checked, choose which of the form’s products includes the amount to charge. This feature is rarely necessary for a form.
- You can enable a Trial that will wait to start charging the visitor for a set number of days. This feature is rarely necessary for a form.
- Under Customer Information choose the Email field from your form that represents the visitor who submitted. Some forms have multiple email fields, so be careful to choose the correct one.
- Under Customer Information leave the Description and Coupon fields set to “Select a Field”. Those won’t be needed.
Sending Billing Information to Stripe
No matter the Transaction type, you can send the submitted billing address information to Stripe. Although not required, we recommend that you configure your feed to send this information to Stripe.
- To send the submitted billing address information to Stripe, you map each Billing Address field to the corresponding Billing Information fields under the Stripe Credit Card Field Settings section of the feed.
And this is how that information is displayed within Stripe:
In addition to the Billing Information, you can also set Metadata for your feed.
Enter any Metadata from the form you’d like to pass to Stripe. Metadata is not used by Stripe to process transactions. Its sole purpose is to serve as a reference for your team to see additional purchase information. For a “Products and Services” feed, the metadata will be included within the Payment in Stripe. For a “Subscription” feed, the metadata will be included within the Customer in Stripe.
As an example, you can set up the Metadata fields to populate the visitor’s first name, last name, phone number and billing address in Stripe so you can see it. Here’s an example of the Metadata set up within the feed:
And this is how that information is displayed within Stripe:
About Conditional Logic
Both types of transactions allow for conditional logic.
If you’d like the feed to execute only under certain circumstances, check the box to enable Conditional Logic. The conditional logic shown below causes the feed to execute only when the visitor chooses “Monthly Donation” for the Donation Frequency field.
Please note that you can modify the feed to add multiple conditions using the plus (+) icon on the far right and can also choose to execute the feed if “All” or “Any” of the conditions are true.
About Stripe Account
The Switch Accounts button under Stripe Account allows you to specify that the feed uses a different Stripe account than the one set on the Stripe Settings page.
- Click the Switch Accounts button to start the process of connecting the form to a different Stripe account.
- Select the Mode to use for the Stripe integration: Live or Test. Live is for real transactions, and Test is for testing the integration and submitting test forms.
- Click the Connect with Stripe button.
- You’ll be taken to the Stripe website and prompted to login to your Stripe account.
- If you have multiple accounts under this Stripe user, you can use the Switch Account drop down menu to select the Stripe account you wish to connect.
- Within the Stripe website, fill out the form and click the “Authorize access to this account” button. Alternatively, if you are using Stripe in development mode, you can click the “Skip this account form” link at the top of the page.
- You will be returned to your forms Feed Settings page. You should see Connected to Stripe with the account name you chose to switch to.
- The last step is to enable the webhook for the account. You can refer to this article for the steps needed to enable the webhook.
- If you selected Live for the Mode you will need to add the Live Signing Secret. If you selected Test for the Mode you will need to add the Test Signing Secret.
Finish your feed
- Review your settings and click the blue Update Settings button to save your feed.
- If you need to add another feed to the same form, start over and follow these steps again until all the necessary feeds are created. For example, when creating a donation form, you’ll usually need two feeds, a feed that executes and charges for only one-time donations and another to charge only for recurring donations.
- Most importantly, please test your form including each feed to ensure they process payments as expected.
A Complete Stripe Feed Example
For reference, we’ve included a screenshot below of a completed Stripe feed. This feed processes only one-time donations on a typical donation form.
Still Have Questions?
Reach out to us within your Dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.