Pre-RequisitesIntroductionAvailable Payment MethodsCreate Your FormSummaryNotes
Pre-Requisites
Refer to the article setup the Stripe Add-On.
Check out our Feed Settings Reference for a full list of feed related settings.
Introduction
The next step in integrating the Stripe Add-On is to create the form you are going to use. This can include existing forms. To be compatible with the Stripe Add-On, your Gravity Form must contain a Pricing field and a Credit Card field (or a Stripe Card field if using version 2.6+). However, you may want to include basic payment information capturing fields as well, such as Name, Email, Address, etc.
Available Payment Methods
With the Stripe Add-On, you have three choices as to how to collect 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, be sure to 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 Credit Card field (or Stripe Card field if using Stripe version 2.6+). 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.
Note: The Payment Collection Method is only available in Stripe version 2.6 and above.
Gravity Forms Credit Card Field – Expand the Pricing Fields section and add the Credit Card field to your form to collect payment information via the standard Gravity Forms Credit Card field.
Stripe Credit Card Field (Elements, SCA-ready) – Expand the Pricing Fields section and add the Stripe Card field to your form to collect payment information via the Stripe Credit Card field. If you have another Payment Gateway add-on installed, the Gravity Forms Credit Card field is still available in case you are allowing users to choose from a list of payment processors, such as Stripe and Authorize.Net (the standard Credit Card field is needed for Authorize.Net』s processing). Conditional logic can be used to show/hide the Credit Card field depending on the payment processor selection.
Note: This field is only available if the Stripe Credit Card Field (Elements) option was selected as the Payment Collection Method in the Stripe Settings during setup.
This field will add the Card Details and Cardholder Name inputs. The Card Details input collects the Credit Card Number, Expiration Date, CVC, and Zip/Postal Code. 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.
Stripe Payment Form (Stripe Checkout, SCA-ready) – This option loads a page hosted on Stripe』s servers to collect payment information so a credit card field should not be added to the form. However, you will notice that the Gravity Forms Credit Card field is available for use if you have more than one payment gateway add-on installed, such as Stripe and Authorize.Net (the standard Credit Card field would be needed for Authorize.Net』s processing). Conditional logic can be used to show/hide the Credit Card field depending on the payment processor selection.
Stripe Checkout supports 3D Secure and Apple Pay.
Note: This page will only display on form submission if the Stripe Payment Form (Stripe Checkout, SCA-ready) option was selected as the Payment Collection Method in the Stripe Settings during setup.
Click the Update button to save the form.
Once you have completed your form, select Preview in the top navigation bar under Form Editor. Your form should look similar to this:
If your form does not look exactly like the image above, don』t panic. Every form will vary depending on which fields were selected and what order they were added to the form. As long as you have pricing fields of some sort and a credit card field, your form is valid for integration.
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 Credit Card field should be located on the last page of the form.
If you delete the Credit Card field from your form, the Stripe feeds will automatically deactivate to prevent them 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 the Credit Card or Stripe Card field on it, these will override the payment collection method of Stripe Payment Form (Stripe Checkout)
If a form has both the Credit Card and Stripe Card fields on it, and Conditional Logic is not used to show/hide one of them, the Stripe Card field takes precedence. Please note: a form should not be created where multiple credit card fields are visible on form display.