This guide will show you how to integrate with the Stripe payment gateway/merchant processor for accepting credit card payments on your OptimizePress OptimizeCheckouts forms
Please note: In order to use Stripe in LIVE mode, you will need to ensure your site has a valid and active SSL certificate. If you need help with this, please contact your hosting company. Most hosting providers now include a free SSL certificate option if you do not have specific requirements.
You'll also need a Stripe account to complete the integration process.
Connecting Test & Live Modes
The first step in using Stripe is to connect OptimizeCheckouts to Stripe in test and live modes. This allows you to effectively test your checkout processes before going live with your products. We recommend testing all products in test mode (to ensure emails and any logins are delivered) before activating the product in live mode.
We recommend connecting Stripe Test mode first (don't worry you can have both modes connected at the same time). The process is pretty much the same for Test mode and Live mode...
If you already connected Stripe Test mode, click here to learn how to connect Stripe Live Mode
Connecting Stripe Test Mode
We'll walk you through connecting Test mode first.
To connect Stripe in test mode, click on " Checkouts > Settings > Payment Gateways" and you'll see Stripe there.
Just click the green " Connect Stripe" button.
Now you'll see the options to connect either in Test mode, or Live mode.
Click the blue " Connect" button to the right of "Stripe Test Mode
Now click the " Connect Stripe in Test Mode" button
Once you login to Stripe on the next screen, you'll see the option to choose the account you want to connect to. If you just have one account then it will automatically select that.
Once you connect, you'll be brought back to your OptimizePress Checkouts screen.
You'll now need to ensure that your Checkouts Test Webhook is added inside your Stripe account.
Setting Stripe Test Webhooks
To use OptimizePress with Stripe, you must add webhooks inside your Stripe account for TEST and LIVE mode connections. We'll show you how to setup the test webhooks first:
Webhooks will enable secure communication between OptimizeCheckouts and Stripe. Follow the steps below to connect Stripe and OptimizeCheckouts.
Once you connected Stripe in Test Mode (above) you'll go back to " Checkouts > Settings > Payment Gateways" and click on Stripe and go back to the connection screen seen here, and click "Edit" to the right of "Stripe Test Mode"
Now you'll need to grab the TEST Endpoint URL:
Now you'll need to go login to Stripe, and make sure you click " Test Mode
Then click on " Developers" in the bottom left of the Stipe dashboard.
Now click on "Event Destinations"
Now click on " Add Endpoint"
Paste in the URL that you grabbed a few steps ago, and if you want to add a description you may do so:
Before you click "add endpoint" button, you'll first need to click " Select Events"
Test Webhook Events
The following events are needed (it's okay to have others if you need them but these are the minimum required).
- charge.refunded
- customer.subscription.created
- customer.subscription.updated
- customer.subscription.deleted
- invoice.payment_failed
- invoice.payment_succeeded
- subscription_schedule.canceled
- subscription_schedule.completed
- customer.source.updated
- customer.source.expiring
- customer.source.deleted
- customer.source.created
- payment_method.updated
- payment_method.detached
- payment_method.automatically_updated
- (or) payment_method.card_automatically_updated (note that this event can be different depending on when your account was established)
- payment_method.attached
- customer.tax_id.created
- customer.tax_id.deleted
- customer.tax_id.updated
NOTE: Do NOT click the "Listen to events on Connected accounts" above the "select events" as that is not needed and may result in an error message when trying to save the endpoint
You can search for events by typing the name of the event (do not check the box to "select all" as that is going to give errors since Stripe changed a lot of things).
When you start typing you can see the events and just check the boxes for them
Once you add the events, click " Add events" button
Then make sure to scroll back through and ensure you didn't miss any events. Once you ensure they are all selected, then click the " Add endpoint" button (if you missed any then just click "Change events" link above the Add Endpoints button.
Where to get the Test Signing Secret Key
On the next screen, you'll need to grab the Signing Secret key - click " Reveal"
Now copy the Signing Secret
Now go back to the stripe settings in OptimizeCheckouts and paste the Signing Secret into the "Test Signing Secret" field (you should already be on that page after you connected the Stripe account in test mode earlier in this guide). If you are not on that page, just go to " checkouts > settings > payment gateways" and click on stripe, and edit the test mode.
After you enter the Test Signing Secret, click on " Save"
Now you should see the "Test Mode Connected" with a green checkmark icon - this indicates that you are connected to Stripe Test Mode and have successfully connected the Test webhook signing secret.
See our Making Test Purchases documentation when you're ready.
Connecting Stripe Live Mode
Connecting Stripe in live mode follows the same steps as the Test Mode, with the only difference being that you would setup the webhook in live mode instead of test.
To connect Stripe in Live Mode, navigate on your site to " Checkouts > Settings > Payment gateways" and you'll see Stripe there
As you should already have the Test mode enabled, click on " Edit Stripe" when you move your mouse pointer over the Stripe logo
Click the blue " Connect" button
Then click the " Connect Stripe in Live Mode" Button
On the next screen you'll be taken to Stripe.com to connect your Stripe account. You will need to login to Stripe and then select the account you want to integrate with (if you have more than 1 account). If you have one account for Stripe then it will automatically be selected for you. Click the blue " Connect" button on that screen.
You'll now be taken back to your OptimizePress dashboard after a quick minute or so. The next step will be to setup the Live Webhook.
Setup Stripe Live Webhook
Once you connect your Stripe account in Live Mode, you'll be brought back to your stripe settings in Checkouts.
Click " Edit" to the right of "Stripe Live Mode"
Copy your webhook URL
Open a new browser tab and go login to your stripe.com account and click on " Developers" on the bottom left
Then click "Event Destinations"
Click on " Add an endpoint" - if you already have webhooks setup for other integrations, this screen will look different, but just click on "add endpoint" above the list of existing webhooks if you have any.
Paste in your Live Webhook URL from Checkouts into the " Endpoint URL"
Before you click "Add Endpoint" please click on " Select events" as we need to add all the events
Stripe Live Webhook Events
These are the events that are needed. While selecting additional events are not necessary, you can have more if you want - though OptimizePress will not use them.
- charge.refunded
- customer.subscription.created
- customer.subscription.updated
- customer.subscription.deleted
- invoice.payment_failed
- invoice.payment_succeeded
- subscription_schedule.canceled
- subscription_schedule.completed
- customer.source.updated
- customer.source.expiring
- customer.source.deleted
- customer.source.created
- payment_method.updated
- payment_method.detached
- payment_method.automatically_updated
- (or) payment_method.card_automatically_updated (note that this event can be different depending on when your account was established)
- payment_method.attached
- customer.tax_id.created
- customer.tax_id.deleted
- customer.tax_id.updated
NOTE: Do NOT click the "Listen to events on Connected accounts" above the "select events" as that is not needed and may result in an error message when trying to save the endpoint.
You can search for events by typing the name of the event
When you s tart typing you can see the events and just check the boxes for the ones you need
Once you have all of the required events selected, click the "Add Events" button.
Before you click the blue "Add endpoints" button at the bottom, be sure you go through and ensure that all the events are selected that are in the list above
After you click the "Add Endpoint" button and the next screen loads, you'll now need to get the Signing Secret. Click the " Reveal" link below "Signing Secret" to reveal the secret code (queue the Mission Impossible movie theme...)
Stripe Live Signing Secret
Now just copy the Signing Secret and go back to your Stripe Live Settings in Checkouts (you didn't close that tab did you?). If you closed it, just go to " Checkouts > Settings > Payment Gateways" and click on Stripe and then "edit" next to Stripe Live Mode.
Paste in the Signing Secret here and click the blue " Save" button
Once it saves, just refresh your screen and you should see next to "Stripe Live Mode" the " Live Mode Connected" text with the green checkmark. This means that you have successfully connected Stripe in Live Mode (Confetti now falls from the sky...)
Set Your Product to Live
Now that you connected Stripe Live Mode, don't forget to set your products to live.
Go to " Checkouts > Products" and click "edit" next to the product you want to set live
Go to " Payment Gateways" and set the payment mode to "Live" and click the blue "Save" button
On the products screen you should now see your product live. Make sure to change all your products to live if there are multiple products in your funnel. This would include any bump offer, as well as your upsell and downsell products.
You can also use a live card and go through the checkout to ensure that everything works and that you didn't forget to set a product to "live" (you can lower the price if you need to and then change it back).
Frequently Asked Questions
Why can't I send the Company Name field to Stripe?
When your customers purchase via an OptimizeCheckouts checkout form, we collect various information depending on the fields you enable on the checkout.
All information captured is available inside the OptimizeCheckouts “Orders’ Screen where you can see each purchase along with the customer information. On this screen you will see the company information for your customer if you collected that field on the checkout
Please be aware that company information is not passed to Stripe. Stripe does not currently include a field for company name in their system, so we’re not able to pass this through. We do pass through first name, last name, email address and relevant address information to create a customer profile in Stripe for your buyer (assuming you are using the Stripe integration).
Can I use other Stripe integrations such as iDeal or others?
At this time we only support Apple & Google Pay as well as card payments through Stripe. While there are many other payment methods available in Stripe, not all of them are compatible with the features set in the Checkouts plugin, and as such, not all of them can be added. We may look into adding more supported payment methods from Stripe in the future, however we are unable to provide a timescale for these at the moment.
How can my customers cancel their subscriptions?
To facilitate the ability for your customers to cancel their subscription, we would suggest to use the "Members Subscriptions" element. You can then choose which subscription products in the Checkouts plugin are able to be cancelled. Just follow our Member Subscriptions guide for more details.
Why does stripe.js file load on all my site’s pages?
It is normal to think that script sources shouldn't load on every page, however Stripe actually recommends this due to security and fraud prevention.
Stripe recommends this:
"Include the Stripe.js script on each page of your site—it should always be loaded directly from https://js.stripe.com, rather than included in a bundle or hosted yourself.
To best leverage Stripe’s advanced fraud functionality, include this script on every page, not just the checkout page. This allows Stripe to detect anomalous behavior that may be indicative of fraud as customers browse your website."
June 29th, 2021: Optimizations Update OptimizePress Dashboard plugin version 1.0.52
As of version 1.0.52, we have incorporated a setting to load Stripe JS file only on checkout pages. To find this setting, navigate to "OptimizePress3 > Optimizations" and on the "Assets" tab, you'll find a setting for this now as you see in the following screenshot:
Loading Stripe JS file only on checkouts pages will disable Advanced Fraud Detection from Stripe, so you will want to consider this.
Why do I see Incomplete Payments in Stripe?
You may have noticed inside your Stripe account you sometimes see a number of payments marked as "Incomplete" inside the Payments screen when using the "All" filter. This is perfectly normal, and nothing to worry about. The reason you see this is as follows:
When using the Stripe system for processing payments, their system requires a "payment intent" to be created as soon as we know the amount being charged on the checkout form.
This payment intent initially starts as a "Incomplete" payment. This allows stripe to setup information such as tax charges and customer location.
If the visitor/buyer completes the transaction with a valid credit card, this payment intent gets confirmed and Stripe creates a charge based on it. You then see a successful payment inside your Stripe account.
If a visitor leaves your checkout without completing the checkout, or in less common occurrences where more than one payment intent is created for one customer (This can sometimes happen on upsell pages where you have multiple order buttons) - you may still see an incomplete payment logged.
This will not hurt your account, and is actually following the exact logic that Stripe requires.
Why do I not see incomplete payments for subscriptions?
Subscriptions work in a completely different way and do not use payment intents directly. Stripe internally handles every invoice (recurring charge) by creating a payment intent and attempts to charge it with a credit card on file. If it fails then it is possible that there will be failed subscription payment intents as well. If you have any questions about using Stripe please reach out to our friendly support team and they'll be happy to help further.