Introduction to Stripe for WooCommerce
What is up party people and welcome back to our WooCommerce series. My name is Derl Wilson. Today in this video I'll be showing you guys how to integrate the Stripe payment gateway onto your WordPress websites. The Stripe plug-in is a free plug-in that allows you to accept payments via credit card on your websites. The great part is it's a completely free plugin. There is no credit check, no monthly fees, and anyone can get started with it.
I personally use the Stripe plugin on my website derlwilson.com. We sell Elementor templates and we actually use Stripe. The money is sent directly to my Stripe accounts and then it is automatically transferred to my bank account without me having to do anything, which is amazing.
So let me walk you guys through how to integrate this free plug-in. You guys ready? Let's go.
Installing the WooCommerce Stripe Plugin
Okay, so I'll be showing you guys how to add Stripe so you guys can start accepting credit card payments on your WooCommerce store. So the first thing is we're going to go to our dashboard and we're going to install a free plug-in. Now just remember you guys must have WooCommerce installed on your websites; pretty self-explanatory.
Right over here under Plugins, you're going to click on Add New. Here in your search plugins you're going to type in Stripe, S-T-R-I-P-E, and here's the plugin you guys are going to need. It is the WooCommerce Stripe Payment Gateway. So make sure it is by WooCommerce right here. You'll click on Install Now and then you'll click on Activate.
Okay, and once that's done, you guys are going to go over here to WooCommerce and then you'll click on Settings. Next, you'll go over here and click on the Payments tab, and then we're going to scroll down and you're going to see Stripe. Go ahead and turn this on right here. Next, we'll go ahead and click on Manage and then it'll prompt you back to this page. Now really quickly let's go ahead and talk about stripe.com.
Creating a Stripe Account & Dashboard Overview
So first let's talk about Stripe. Now stripe.com is a free service, it does not cost you guys anything to get started with. There's also no credit check and no monthly fee. They do take a small transaction fee for each of the transactions, but that is standard for every single payment merchant.
So right here you guys will click on "Start Now" and go through the registration process. So you'll go through the process of an account, and you guys will need to enter in your email, your name, and maybe your address and some other personal information. And once you guys actually create an account, I'll go ahead and meet you guys in the customer portal.
So this is my personal Stripe account right here, and you guys are going to see that, you know, it says about your overview, the money that you've been making, the gross volume in sales. It also lets you know about chargebacks or fraud or anything else. And this is actually going to be automatically deposited into your bank accounts, and you guys can actually set the dates in the options. Now I'm not going to go through all the technical aspects, but I will show you guys how to get started with Stripe.
Connecting WooCommerce to Stripe in Test Mode
So let's go back over here to our demo business. Now what's really cool about Stripe is we can start this in live mode, and we can also start this in test mode. So we're going to first start this in test mode, and this is basically going to test the connection without, you know, using any credit cards and stuff like that. So let's go back over here to WooCommerce.
Now the only thing that you guys need to do at this point is to make sure that you guys are logged into Stripe. Okay, so we're first going to connect our website in test mode and we're going to test a few transactions, and then we're going to sync it in live mode to accept real card payments on your websites.
Now let's go back over here to our websites. Now the only thing that you guys need to do to get started here is make sure that you guys are logged into your Stripe account on the same browser. This will essentially sync it with your other website. So you'll see I have Stripe logged in and I'm also logged into WordPress. Once that's done, all you got to do right here is click on "Connect an Account" and log in. So right here, I'll click on "Connect an Account".
Okay, so you're going to see right here that it wants to connect one of our accounts, and we're going to select the demo business. Now if this doesn't appear for you, you guys might need to log in manually, but if you guys are already logged in, it'll bring you to this page right here. So I'm going to select my Demo business and then click on "Connect".
And congratulations, we are kind of almost done.
Configuring API Keys & Webhooks for Test Mode
Alright, so we actually synced up our website with Stripe, but we need to do a little bit more. Now the first thing I want to do is I want to enable test mode before we go live on our website, right? So going back to our portal right here, you just want to make sure Test Mode is checked right there, and also we have test mode checked. Once that's done, we're going to go ahead and scroll down, and here you're going to see the Account Details. You just want to click on "Edit account keys," and we actually need to add a webhook. The webhook will actually enable you to receive notifications about charge statuses.
So right now the payment is enabled and also payout, but we need to do a little bit more. So the first thing is I want to take this link right here and we're going to copy it. Next, I'll click on "Edit account keys". So right here we are in test mode, right? So we need to enter in some information here. So going back to our website, the first thing I want to do is click on Developers, next I'm going to click on API keys, and I first want to copy and paste these two keys right here. So I'm going to copy the publishable key, go back to our websites, paste it there. Then I'm also going to paste the secret key. So going back over here, reveal the key, copy this, and then paste that there.
Okay, now we need to copy this one more time. So we're going to copy this right here, make sure that you guys don't get the space right, so make sure it needs to be exact. Alright so go ahead now and copy this link again and we're going to paste it now into Stripe. So going back over here, so now that we entered this information, I now need to add a webhook. So up here, add a webhook, and on the right side we're going to add an endpoint.
So you're going to see this URL right here, and now we're going to paste that URL that Stripe gave us on our WordPress websites, and we're going to let Stripe know what we're using this for. So this is for charging transactions. The next is Select events. So you're going to click on Select Events, and you're going to click on charge. And then right here, you guys can go ahead and select the events you want to be notified about. So I'm going to go ahead and click on all the events right here. You guys can go ahead and maybe just check whatever ones you want, like maybe just charge captured and succeeded, but I'm going to go ahead and just select all of them. Once I do that, I'll click on "Add events," scroll to the bottom, and then click on "Add an endpoint."
Okay, now it's waiting for events, basically it's waiting for activity on our website. But here we have this signing secret and I want to click on Reveal. Now I want to take this right here and I want to copy it. Okay, then we'll go back to our website and we're going to paste that in right here. I'll scroll down and then I'll click on "Save test keys" and that's it. So now you'll see webhook is enabled. You guys can always test this right here by going to "Edit account keys," going to "Test Mode," and then right here you'll click on "Test Connection". You'll then see it is successful, and that's it. So I'll go ahead and close this now.
Finalizing Settings & Placing a Test Order
Before we go ahead and check out on our website, there are some options that are actually kind of important. You want to make sure that you guys enable payments via saved cards. This will actually save users' credit cards on your website so they don't have to keep coming back and, you know, entering the card all over again. And this right here is also very important. Here's an example of the customer bank statement of what it'll look like. This is actually pulled from stripe.com. You guys can also create like a shortened one as well if you guys want to do it right, so it's a little bit more shortened in their bank statements. And then the advanced settings, you have log error messages, and then legacy checkout is just like an old-school style which they no longer support. All right.
Alright, so now that we've actually enabled those, now let's go ahead and turn on test mode here and let's do a live transaction on our website. So I'm going to scroll down right here and click on Save Changes, and we're now going to test this for the test transaction. So let's go back to our website here and let's buy something, right? So let's go to our shop page, and we're going to, we're going to buy some stuff. We're going to buy some shoes, some blue shoes, and some ski boots. I'll then click on add to cart or view cart. Okay, and I'm going to scroll down right here and I'm going to click on proceed to checkout. All right, so let's go ahead now and scroll down. Okay, and now you're going to see that there is a payment option. Now I've already stored my credit card, but what we're going to do is we're going to enter another one.
Now, if you guys are using test mode, all you have to do is enter 424242, and then enter a random expiration date, right just like that. And then here's expiration dates, and then enter a random CVC, and then you guys can save this or not, right? But that's a pretty cool feature, I like that. You just need to make sure the expiration date is in the future, not in the past, or else this will decline. Once you guys enter that in, we'll scroll to the bottom and click on place order. And just like that, our website is now connected. It is so simple to connect your website with Stripe. This is by far the easiest payment gateway to work with. So here you'll see the product details, you'll see the products that we have purchased, the tax, and they can print their invoice, download it. And of course if you guys do want to learn how to make this same website, we have a tutorial in the description that will help you guys out. But, uh, let's go ahead and check our account right here and let's see if it actually recorded that sale. So we're back over here on my Stripe account and this is actually kind of hard to see like this, right? But right here if I click on payments, you're going to see that this was succeeded, right? So $317.55 was actually captured. So that's how you guys can go ahead and integrate the test mode.
Switching to Live Mode to Accept Real Payments
But now let's integrate live mode. So now let's accept real credit card payments. So to do that, it's the same exact process. But all you got to do is turn this off right here. So as of right now, this is in live mode, right? So now we're going to accept real credit card payments on our websites. So let's go back to our WordPress website and now we're going to go to our dashboard. Okay, so first things first: WooCommerce settings, and then we're going to click on payments. Next, we're going to scroll down, and here under Stripe, I'm going to click on Manage. Okay, so right here I'll click on Settings. Okay, so now we need to adjust this for live mode.
So the first thing I want to do is I want to turn off test mode right here. I'll scroll to the bottom and click on Save Changes. Okay, so now that I've done that, you'll see that our webhook is now disabled. So we now need to add the webhook for live mode. So right here I'll click on "Edit account keys" and now we're going to enter this for the live tab. So make sure you guys click on Live, and let's go back to our website. Now if this did not sync up for you, you guys, I'll just show you guys how to get this information. So I'll just start from scratch right. So let's go back over here.
Now the first thing is we got to do is click on Developers and click on API keys. We're going to take this publishable key right here, and I'll copy this, and then we're going to paste that in. Now if you guys have not made one yet, all you got to do is click on "Create a secret key", and this will actually generate a key for you. So I'm going to enter in my code right here. And this will be my secret... secret key... yeah, secret key.
Okay so here is my secret key. I'll go ahead and copy this and then I'll go back over here and I'll paste it on the website. Okay, now the next thing we need to do is add a webhook again. So make sure that you guys now copy this line right here. All right, make sure you guys copy that and now let's go back to our website. So now that I've done that, I now need to go to webhooks right here and I want to add an endpoint. So on the right side I'll click on "add an endpoint". Here under the endpoint URL, I'll go ahead and paste it and I'll tell Stripe what we're using this for. So this is for my e-commerce websites. Here under select events, I'll click on select events, click on charge, and then select all charge events, and then I'll click on "Add events". I'll scroll to the bottom, then click on "Add endpoint". And the same thing right here, I want to click on Signing secret, and now I'm going to copy this right here. Okay, we'll go back over here and now we're going to paste this, and then you click on "Save live keys" and that's it.
Placing a Live Order & Final Wrap-Up
So now you guys can take real credit card payments on your website via Stripe. Now a good way to test this guys is actually creating a product that costs like a dollar just to test it out. You guys can use your own credit card and just test it out. So I'll go ahead and change one of these prices to a dollar, and I'll check out using a live credit card. Okay, so here's my beautiful shop page, and we're going to buy this right here that cost $1. So I'll click on add to cart, view the cart. Here you'll see it cost $1. We'll click on proceed to checkout and then we're going to scroll down and buy it. Right, so we go down here and we're going to enter one of my real credit cards. Okay, so I entered in my real credit card information and right here I'll click on "Place Order".
And there we go. So we have now successfully purchased the digital product using a real credit card on this e-commerce website. And we can test the transaction. So we'll go over here, and right away you'll see that $1 was taken as of right now. So our website is successfully connected with Stripe and now we can take real credit card payments on this e-commerce website.
Thanks for watching party people. If you guys have any questions about Stripe, let me know in the comments below. And if you guys do want to learn how to make this same beautiful e-commerce website, we have a tutorial that will show you guys how to make this same e-commerce website in the description. Hope this tutorial was helpful. Let me know in the comments how I did, and I'll see you party people later. All right party people, thank you guys so much for watching this video. If you guys do have any questions, let me know in the comments below. Also, if you guys do want to learn how to make that amazing e-commerce website, we have that tutorial in the description below this video if you guys do want to go ahead and check it out. My name is Darl Wilson and I will see all of you party people in the next video guys. Take care.
