The next step in integrating the Stripe Add-On is to create the form you will use. This can include existing forms. To be compatible with the Stripe Add-On, your Gravity Form must contain the following:
a Stripe Field (if you’re using Stripe Elements), or
a Stripe Checkout Feed
However, you may want to include basic payment information capturing fields, such as Name, Email, Address, etc. Note: If you are connecting to a subscription feed or Enabling the Stripe Additional Payment Methods, you must have an Email Field and a Name field for the Customer Information section of the feed.
Available Payment Methods
With the Stripe Add-On, you have two choices regarding collecting payment information from your customers (assuming you are using the most current version of our add-on). Refer to this article for more information on the payment collection methods offered within the settings of the Stripe Add-On.
Create Your Form
From the left-hand navigation menu of your WordPress admin dashboard, hover over Forms and click on New Form.
Enter a Form Title and Form Description. Click Create Form. Alternatively, you can hover over Forms and click on Forms to choose an existing form from the list.
Add fields for capturing standard payment information. We included the Name, Address, and Email fields to get basic information from customers. Note: If you would like to receive receipts for Stripe transactions, add the Email Field.
Add the required fields to your form and configure them as needed. These include Pricing fields of your choice and the Stripe Card field. In the example below, the Shirt, Shipping, and Total serve as the Pricing fields.
The next step depends on the Payment Collection Method chosen during setup.
Stripe Field (Elements, SCA-ready) – Expand the Pricing Fields section and add the Stripe field to your form to collect payment information via the Stripe field. Be sure to use the Stripe field when using the Stripe Add-On. Depending on the payment processor selection, conditional logic can be used to show/hide the Stripe field.
Note: This field is only available if the Stripe Field (Elements) option was selected as the Payment Collection Method in the Stripe Settings during setup.
When you first add this field to your form, you will have a warning “Please check if you have activated a Stripe feed for your form.”.
Click the Save Form button, and then follow the linked text to create a Stripe Feed.
Once you have created a feed, the Stripe Card field will look like this: This field will add the Card Details and Cardholder Name inputs. The Card Details input collects the Credit Card Number, Expiration Date, CVC, and in some cases Zip/Postal Code (this is dependent on the configuration of your Stripe account, not Gravity Forms.) This part of the Stripe Card field is hosted on Stripe’s servers. The Cardholder Name is a part of your form and the data is not stored.
There are a few customization options that can be applied to this field. Click the field to expand it and go to the General tab. Under the Sub-labels section, the text displayed for Card Details and Cardholder Name can be updated. The Cardholder Name field can also be hidden. You can ‘Enable additional payment options’ under Payment Methods for the Stripe Field to take full advantage of the Stripe Field. In that case, the field will dynamically display the additional payment methods you have configured for your Stripe Account in the Stripe Dashboard. See this article for more details regarding this configuration.
Dynamic display of Stripe Field after enabling additional payment methods:
Stripe Payment Form (Stripe Checkout, SCA-ready) – When you select Stripe Payment Form (Stripe Checkout, SCA-ready) as your Payment Collection method on the Forms → Settings → Stripe page, you do not need to add a Stripe Card field (or Credit Card) field to the form. Because there is no field to be added to the form, your next step is to configure a Stripe Feed.
Click the Update button to save the form.
Once you have completed your form, select Preview in the right-hand section of the dashboard. Your form should look similar to this:
If your form does not look exactly like the image above, don’t panic. For example, if you are using Stripe Payment Form as your Payment Collection method, you will not have a Credit Card field. Every form will vary depending on which fields were selected and in what order they were added to the form. As long as you have pricing fields of some sort and a Stripe field if you are using the Stripe Field Payment Collection Method, your form is ready for integration with Stripe.
Summary
Now that you have created your form for Stripe, visit Creating a Feed for the Stripe Add-On for the next step in the integration process. This is a critical step. If it is not completed, nothing is sent to Stripe for processing.
If you need help with creating forms, visit Creating a Form for more information.
Notes
When using Page fields to create a multi-page form, the Stripe field should be located on the last page of the form.
If you delete the Stripe field from your form, the Stripe feeds will automatically deactivate to prevent them from running during form submission, which as the field is missing, would cause a validation error due to Stripe being unable to capture the card details.
If a form has a Stripe field on it, and you switch the Payment Collection Method to Stripe Payment Form (Stripe Checkout, SCA-Ready), you will see the following warning when you view the form:
The Stripe Card field cannot work when the Payment Collection Method is set to Stripe Payment Form (Stripe Checkout).
