Would you like to upgrade to the latest version of Stripe’s API? This update is required for compliance with the European Union’s Strong Customer Authentication (SCA) requirements, but it’s also just an effective way to add an extra layer of protection for customers in general.
In this tutorial, we’ll show you how to update your forms to use the latest version of Stripe’s API with the Stripe Credit Card field in WPForms.
- Integrating with Stripe through Stripe Connect
- Switching to the Stripe Credit Card Field
- Frequently Asked Questions
Note: These update steps not required by WPForms, however they are recommended. If you’d prefer not to follow this tutorial for now, then your current forms will continue working exactly as before.
Additionally, this update process can require some time. To ensure the most seamless transition, please do not begin the second step of this tutorial until you have time to fully complete it.
1. Integrating with Stripe through Stripe Connect
To get started, you’ll need to log into your WordPress admin area and go to WPForms » Settings. Then, click on the Payments tab.
On this tab, you should see a field labeled Connection Status. Here, you’ll need to click the blue Connect with Stripe button.
If you’re not currently logged into your Stripe account, you’ll be shown a login form.
Next, you’ll be asked to authorize the connection between your forms and Stripe. The exact content you see on this page will vary based on whether your Stripe account is already activated.
Once you’ve agreed to these requirements, you’ll be redirected back to your site’s admin area. Here, you should see that Connection Status has a green checkmark.
Note: Test and Live modes must be connected separately. If you’re currently using Test Mode, please be sure to repeat this Stripe Connect process with the Test Mode option unchecked so that you’re ready to launch your forms when needed.
2. Switching to the Stripe Credit Card Field
Now that Stripe Connect is set up, your forms are ready use the Stripe Credit Card field.
Note: Before beginning this step, please be sure that you have plenty of time to complete it. Once this step has begun, your forms will not be able to accept Stripe payments until the process is complete.
Still on the Payments tab, go ahead and scroll down to the Payment Collection Type field.
Below this field, you’ll see a list of all forms that will need to be updated as soon as you make this change. This should help you gauge how much time you’ll need. Please do not proceed further unless you’re currently ready to update all forms in this list.
To update your credit card integration, you’ll need to choose the Stripe Credit Card (Recommended) option.
Immediately after selecting this option, an overlay should appear. This is a reminder that once this setting is saved, Stripe payments will not be able to process until you’ve updated all form fields (which we’ll cover next).
If you’re ready to proceed, you can select the Yes, Use the Stripe Credit Card Field button.
For the last step on this page, you’ll need to click the Save Settings button.
Next, you’ll need to open each of your payment forms. In most cases, the fastest way to do this is by opening your form(s) directly from the list on the Payments tab.
Once the form builder is open, you’ll need to add the Stripe Credit Card field.
Then, locate the older Credit Card field. This older field should be easy to identify, as it has more subfields (Card Number, Security Code, Name on Card, and Expiration).
Once you’ve identified this older card field, click on it so that the Field Options panel appears. Within this panel, be sure to check if you have any special settings configured, such as conditional logic, as you’ll need to also set these up within your new Stripe Credit Card field.
After you’ve checked that all Field Options settings have been replicated in your new credit card field, you can delete this older field. In the upper right of the field preview, you’ll need to click on the trash can icon to delete this field.
An overlay will appear, and within it you’ll be asked to confirm the field deletion. You’ll need to click OK to proceed.
Now that the field has been updated, the next step is to re-enable Stripe payments for this new field. To do that, you’ll need to go to Payments » Stripe. Then, check the box labeled Enable Stripe payments.
None of your other settings here should have changed, but it’s a good idea to check and be sure everything looks as it should.
Once this is all set, you’ll need to click the Save button to store all changes.
Be sure to repeat this last step for every form on your site that includes Stripe payments.
Note: After adjusting each form, we strongly recommend viewing your embedded forms to check that everything looks as it should. If you’d like to do an extra layer of testing, you can also try submitting Stripe test payments to your form.
Frequently Asked Questions
Stripe will only allow owners or administrators to connect a Stripe account in this way. If you don’t seem to be able to complete the process, please check your Stripe user role to make sure it meets these requirements.
The best way to test out your forms is to submit an entry and follow the same steps as your users. We recommend setting up Stripe’s Test Mode before adding your form to a live page, which allows you to test transactions before accepting actual payments.
No, WPForms does not store your payment data (or any other form entry data).
In fact, our forms don’t even store sensitive credit card data on your site. Instead, our Stripe integration ensures that this information is communicated securely and directly to Stripe, without ever touching your server. This protects both you and your users from the potential risks associated with storing credit card details.
Yes, we are! And as a Stripe partner, WPForms uses Stripe’s best practices to ensure your payments are consistently reliable and secure.
That’s it! Once you’ve completed these steps, your forms will be using the new Stripe Credit Card field.
Next, would you like to capture leads even if they don’t submit your form? Our Form Abandonment addon lets you see partial entries, and even optionally send out notification emails anytime someone starts but then abandons your form. Be sure to check out our Form Abandonment tutorial for all the details.
