Adding payments to your website can be tricky and some merchants are pretty scared even when they just think about the entire integration process. But calm down, here’s the simplest, step-by-step tutorial explaining how to add Stripe to your WordPress website in minutes. Ready?
Before you begin: The essentials to start
- A WordPress website with Administrator user role.
- A company incorporated in a country supported by Stripe. Stripe is currently available in United States, Australia, Canada, Denmark, Finland, France, Ireland, Japan, Norway, Singapore, Spain, Sweden, and United Kingdom. But they are going to expand their services also for other European Union countries.
- Just basic computer skills. You don’t have to be a technical person to implement payments on your website. There are no shortcodes needed to make it work, so it’s a piece of cake.
No time to read? Here’s the video:
Add your website to Payzard
The first step is adding your WordPress website to Payzard and you can do it here. It will initialize the setup process.
Install WordPress payment plugin
After connecting your website with Payzard, you need to install a payment plugin, using your WordPress admin account. Here’s how you can do that:
- Go to your website and log in to the WordPress dashboard
- Move to Plugins tab
- Click Add New
- Type Payzard in the search bar (it’s in top right corner)
- Install the plugin
- Turn the plugin on
Once Payzard is installed, you can see the Payzard badge on your website (like the one below).
Click on it to get the access to your settings and make edits tailored to your needs. Don’t want to display the badge on your page? Don’t worry, you can hide it after making all edits (and we’ll show you later how you can do it).
Log in to Payzard on your website
Now it’s time to finish the registration process. Go to your website and set up your account.
- Click on the badge
- Enter your email address.
You need to type in the same email address you used to create your WordPress admin account. Any other email address will be rejected. If you don’t remember the right address, you can find it in your WP-admin dashboard by choosing the Users tab (/wp-admin/users.php).
- Enter a verification code, which was sent to you via email.
- Create a strong password (include lower and upper case letters, numbers and special characters).
The Payzard account is set up, so you can now connect your website with Stripe account.
Note that you can choose any other payment gateway instead of Stripe, which is suitable for your country and business model. To make it easier, we present you a Stripe integration here.
Connect Stripe account to accept payments
To connect the Stripe account with your WordPress website, move to step 4 on Payzard website. Select No if you don’t have your Stripe account yet, and take the steps below.
Select your country
Use a handy country selector to choose a country where your business is registered. It’s an essential step due to payment gateway’s regulations. If your company is not incorporated in one of the countries accepted by Stripe (here’s a full list of countries accepted by Stripe), you need to select another gateway (view a list of gateways supported by Payzard here).
Fill out an application form
After selecting the country, click on the Connect button to be redirected to Stripe’s application form. Then, fill out the form with a certain data. Remember that you need to submit the form to accept live transactions on your website.
Congrats! Your WordPress website is now connected with Stripe account via Payzard. Now you can add your first payment button.
Add your first payment button
Selling products on your website should come with a payment button and checkout. Luckily, Payzard gives you both and you can implement it in a dead-simple way. After clicking a payment button, your customers will see highly secure checkout that appears on top of your website.
Each button you want to incorporate into your website could be customized to meet your business needs. You can then set yourself a certain price and product or service name.
Payment buttons may be visible for every visitor on your website or you can hide it (so only you can see it when you are signed into Payzard).
And there’s even more.
The payment button enables you to accept credit or debit card payments for your products and services. You can also accept donations for your non-profit; it’s up to you how you’ll use the Payzard tool.
We only charge you for real transactions. If you’re in test mode, you’ll not be charged any fees.
Use drag-n-drop solution
Adding a payment button is as easy as clicking the Plus icon on your Payzard badge (on the right-hand side on your website). After clicking on it, you can place the button wherever you wish on your website.
Set the price
Now it’s time to set the price for your product. Just type in the amount and choose a currency you want to accept the payments in. You can also set the product name and change the text displayed on the button.
The good news is you can track your sales and performance in the dashboard.
Customize your checkout
You can also customize the checkout displayed on your page and it comes with making changes in product description or adding a name and logo of your store.
Select the button status
As mentioned above, you can change the status of your button. If you want to test the button (and we strongly advise you to do so), select Test payments box. Then, you can run a test transaction and see how the payments on your page work (you’ll learn how to do it in the next step).
You can also keep the button hidden from your visitors by selecting the Hide button box.
When you’re ready to show your payments to the world and accept real money on your website, just select proper boxes and click Save button. Easy, don’t you think?
Do you have strong technical skills? This one is for you:
The position of the button is “calculated” upon surrounding HTML elements. Bearing this in mind, please make sure that the button is still visible when you change a layout of your page. If not, you need to add a button via drag and drop again.
Pro Tip 1:
Instead of adding a button via drag and drop, you can “convert” any HTML element into a payment button. Just click on a Plus icon and select Connect page element option. Then choose an element of your page that you want to become a new trigger for payments (it could be one of the tabs for instance). The feature works perfectly with WordPress themes where buttons come with dedicated CSS so they all look the same.
Pro Tip 2:
Need to use the same button on a couple of pages across the website? No problem! You can do it in seconds by clicking on a Plus icon and selecting Copy existing button option.
Test your payments
Your button is ready so you can run some tests to know how the entire process looks like from your customer’s perspective. Here’s a quick instruction of how you can do it:
Open private browsing mode in your web browser (for Chrome, use Ctrl+Shift+N combination or ⇧⌘N on Mac) and go to your page with implemented button.
To simulate a payment, use test card numbers you can find below, so there’s no need to type in your private card data. Provide any CVC/CVV and expiration data you want. After entering the information needed, click the confirmation button and that’s it. You’ve made your first test transaction.
Only signed to Payzard users can see statistics of a button. Your visitors are able to launch payment process only.
To simulate first payment use one of bellow scenario. All of provided test card number goes with any CVC and any Expiry Date. Now click on your button and try to make a test payment using:
Test card numbers
|4242 4242 4242 4242||Visa, successful transaction|
|5105 1051 0510 5100||MasterCard, successful transaction|
|4532 8732 9481 4636||Invalid expiration date|
|4024 0071 8936 8227||Invalid security code|
|4024 0071 1846 8684||Insufficient funds on your card|
|4024 0071 5550 2486||The charge is suspected to be fraudulent and was rejected|
|4916 0184 7581 4056||The card was declined for other reason|
Don’t see the button on your page? Maybe you set the hidden mode before? When the button status is set to visible, each visitor on your website can make a payment. But, only users signed in to Payzard can see the statistics for their payments. Visitors are able to launch the payment process only.
Each payment that goes through Payzard is processed by Stripe. Payzard gives you control over your transactions so you can handle refunds to its dashboard, track your sales and manage charges. But, any other payment issues can be managed through Stripe dashboard.
You should also know that Payzard doesn’t touch any card data. We also don’t store it so you and your customers may rest assured.
You will receive an email notification every time the payment is completed and when the charge ends without a success. The message comes with the details about your product, card details and your new customers.
What if you want to make a refund or a partial refund? It’s simple, just click on the Refund button embedded in your message and you’ll be redirected to a website to confirm the refund.
Publish your payment button and go live
If you’ve tested your button, connected a Stripe account and think you’re ready to accept payments on your website, you can activate the button.
To make it work, go to Stripe dashboard and set your account from Test to Live. Make sure your Payzard button also has Live status. If so, you can accept payments from your customers.
Good luck! Keep going to grow your business!
Payment analytics on your website
When you’re logged in to your Payzard account, you can track your performance and conversion. Here’s what you can find in the dashboard:
- The number of button displays
- The number of visitors’ mouse clicks
- The number of payment attempts made by customers
- The number of successful payments
Analyzing the data, you can simply optimize your sales and conversion. It will also let you run A/B tests and experiment with different button colors, fonts or a button placement.
There are also Advanced settings where you can make design edits, decide how the button should be displayed, or copy the button to put it on multiple pages. Discover all the Payzard possibilities and make it work for you!
Want to ask something? Don’t hesitate to leave a comment.