The Stripe add-on for Gravity Forms allows you to quickly and easily implement credit card payments with UXi's forms! With the Stripe Add-On you can capture one time credit card payments or setup recurring payment subscriptions.


To prepare, first login to the UXi® site and the Stripe account at stripe.com.


Step 1: Activate the add-on and connect UXi® to Stripe


 To start, activate the Gravity Forms Stripe add-on by navigating to the add-ons page and clicking Add.


Next, find the Stripe API keys to use on the UXi® site.  The API key can be found on the Stripe dashboard:

 

  1. Click Your Account > Account Settings > API Keys.
  2. From this window, copy the Test Secret Key, Test Publishable Key, Live Secret Key, and Live Publishable key.


 

 Now that you've got the API keys from Stripe, its time to add them to the UXi site. 

  1. Connect the UXi® site to the Stripe account by clicking Forms > Settings > Stripe on the UXi dashboard.
  2. Set the API to run in Test mode.
  3. Paste the API keys in the provided fields and click Update Settings. A green will display if this process is successful. A red x if not.
  4. Enter the webhook URL in the Stripe account:
    1. Click the link and log in to access your Stripe Webhooks management page: https://dashboard.stripe.com/account/webhooks
    2. Click API in the left column, then click the Webhooks tab near the top
    3. Click the "Add Endpoint" button above the list of Webhook URLs.
    4. Enter the URL provided in the instructions to the "URL to be called" field and select the latest Webhook version.

      *If the site is in the GoLive process, enter two webhook URLs in the Stripe dashboard, one for the temporary URL and another for the final.
      http://yoursite.websites360.com/?callback=gravityformsstripe
      https://www.yoursite.com/?callback=gravityformsstripe

    5. Click the "Create Endpoint" button.
  5. Confirm that the Gravity Forms webhook URL in the Stripe account.
  6. Update Settings




Step 2: Select a Payment Collection Method.

On the same Forms Settings dashboard where API keys were entered, scroll to the Payment Collection section and select a payment collection method. This is a global setting that determines how credit card fields will display on all forms on the site. You can choose the classic "Credit Card" option to use the native Gravity Forms credit card field or select one of the Stripe hosted solutions (Stripe Credit Card or Stripe Checkout) which simplifies the PCI compliance process with Stripe.


Gravity Forms Credit Card Field
Prior to UXi update 2.6.7 on 03-26-19, this was the standard option. Payment information is collected in a Credit Card field on your form, turned into a token, and passed along to Stripe’s servers for processing. This option requires you to include the following fields in the payment form:

  • Product / Options field(s)
  • Credit Card
  • Billing Address


Stripe Credit Card Field (Elements)
Selecting this option will make the Stripe Card field available in the Pricing Fields section. The Stripe Card field is hosted on Stripe’s servers, reducing your liability over sensitive credit card details. This option requires you to include the following fields in the payment form:

  • Product / Options field(s)
  • Stripe Card
  • Billing Address


Stripe Payment Form (Stripe Checkout)
Payment information is collected in a pop-up modal window that's hosted by Stripe. It does not require credit card or address fields on the form. The entire payment screen is hosted by Stripe’s servers, reducing your liability over sensitive payment details.  This option requires you to include the following fields in the payment form:

  • Product / Options field(s)


Step 3: Add Pricing Fields to the Form


The fields required to make a transaction are determined by the Payment Collection option, as well as what product/service is being sold.


In addition to the necessary fields mentioned above, be sure to include the following fields. They'll help the site owner manage submissions and create a good user experience for users.

  • Name
  • Email with Enable Email Confirmation option enabled.
  • Total field 
When you're through adding fields, click Save.



Step 4: Set up a feed for each form that will process a payment.


Now that you have configured the Stripe Add-On to work with your Stripe account, and you have a form configured and ready to process a payment, it's time to bring it all together by configuring the form to send the payment info to Stripe. Just like all of Gravity Forms Add-Ons, this integration is done by creating a feed.


 Navigate to the Forms page and hover over the payment form, click Stripe from the Settings dropdown menu.

  1. Select Add New to add a new Stripe Feed.
  2. Enter a Name for this Stripe Feed. This is to distinguish between multiple Stripe Feeds in situations where multiple Stripe Feeds may be necessary.
  3. Select the Stripe Transaction Type. You can choose from:
    • Products and Services which is a single one time payment: If you have chosen Products and Services as your Transaction type you will then select what determines the payment amount. You can choose a specific Product Field to determine the payment amount, or the overall Form Total.
    • Subscription for recurring payment subscriptions: If you have chosen a Subscription as your Transaction Type you will be given options for the Recurring Amount, Billing Cycle, Setup Fee and if a Trial is enabled or not. You will also be given the option to map Email and Description under Customer Information.
  4. Select a Payment Amount. This is the amount that Stripe will charge the user. For most forms, select the Form Total field.
  5. Enter Stripe Credit Card Field Settings. This is how billing info is passed to Stripe; map each field to its corresponding address field.
  6. Enter Other Settings. if any additional information needs to be passed to Stripe, map it here.

If you'd like to send a purchase receipt, select the users email address in the Stripe Receipt field to send them an email receipt directly form Stripe.


If you would like the Stripe integration to occur conditionally, enable Conditional Logic. This functions just like Conditional Logic on fields by only triggering the execution of this Stripe Feed if the condition is met. Conditional Logic also allows you to configure multiple Stripe Feeds for a single form and trigger the correct one based on Conditional Logic.

Step 5: Create / Edit Notifications and Confirmations 


Make sure the form is properly set up to show the user to an appropriate confirmation and send any necessary email notifications and/or receipts.



 Navigate to the Forms page and click the Settings page

  1. Add a confirmation set. This is most commonly set up as a Thank You page. Be sure the user sees a message thanking them for their purchase.

  2. Add a notification that is sent to the client. It should include the users information and be easily identified as a new purchase.

 

Step 7: Make a purchase in Test Mode


The last step before launching the site is to make sure everything is processing and the client knows what to expect from their transactions when the form is live.


  1. Using an Incognito window or separate browser, submit the form using your own email address and name.
  2. Check both user email notifications and receipts to confirmation to be sure everything works as expected.
  3. Reach out to the client to make sure they received their notification and they know how to view transactions on the Stripe dashboard.
  4. When everything has been QA'd and the site is ready to launch, navigate to Forms > Settings > Stripe and change the API mode to LIVE.


Click the following link to read more about setting the client up for success on the Stripe dashboard