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
Next, find the Stripe API keys to use on the UXi® site. The API key can be found on the Stripe dashboard:
- Click Your Account > Account Settings > API Keys.
- From this window, copy the Test Secret Key, Test Publishable Key, Live Secret Key, and Live Publishable key.
Connect the UXi® site to the Stripe account.
- Connect the UXi® site to the Stripe account by clicking Forms > Settings > Stripe
- Set the API to run in Test mode.
- Paste the API keys in the provided fields and click Update Settings. A green checkmark will display if this process is successful. A red 'x' if not.
Enter the webhook URL in the Stripe account:
- Click the link and log in to access your Stripe Webhooks management page: https://dashboard.stripe.com/account/webhooks
- Click API in the left column, then click the Webhooks tab near the top
- Click the "Add Endpoint" button above the list of Webhook URLs.
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.
- Click the "Create Endpoint" button.
- Confirm that the Gravity Forms webhook URL in the Stripe account.
- Update Settings
Step 2: Add Pricing Fields to the Form
After installing the Stripe Add-On, the first thing you will need to do is configure your form to work with it. This is done by using the Pricing Fields to configure the purchase selections and the Credit Card field to allow users to enter their credit card information on the form.
On the form that will make the transaction, add fields for capturing standard payment information.
These are required so for each transaction, there is a full record on the UXi Entries dashboard that can be used to find / manage payments
- Email with Enable Email Confirmation option enabled.
- Add Product Fields to your form and configure them to suit your needs.
- Add a Credit Card Field from the Pricing Fields toolbox to your form.
- Add a Total Field near the bottom of the form.
Step 3: 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 interact with Stripe, it's time to bring it all together by configuring the form to integrate with Stripe. Just like all of Gravity Forms Add-Ons, this integration is done by creating a feed.
- Select Add New to add a new Stripe Feed.
- Enter a Name for this Stripe Feed. This is to distinguish between multiple Stripe Feeds in situations where multiple Stripe Feeds may be necessary.
- 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.
On the Stripe Receipt field, select the users email address to send them an email receipt directly form Stripe.
Step 4: 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.
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.
Add a notification that is sent to the client. It should include the users information and be easily identified as a new purchase.
Step 5: 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.
- Using an Incognito window or separate browser, submit the form using your own email address and name.
- Check both user email notifications and receipts to confirmation to be sure everything works as expected.
- Reach out to the client to make sure they received their notification and they know how to view transactions on the Stripe dashboard.
- 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.