How to add Stripe payments to WordPress website - Payzard

How to add Stripe to your WordPress website?

Stripe and WordPress

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

  1. A WordPress website with Administrator user role.
  2. 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.
  3. 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

Add 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

Install payment plugin in WordPress

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:

  1. Go to your website and log in to the WordPress dashboard
  2. Move to Plugins tab
  3. Click Add New
  4. Type Payzard in the search bar (it’s in top right corner)
  5. Install the plugin
  6. Turn the plugin on

Once Payzard is installed, you can see the Payzard badge on your website (like the one below).

favicon-payzard

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.

  1. Click on the badge
  2. Enter your email address.
    Note:
    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).
  3. Enter a verification code, which was sent to you via email.
  4. 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.

Have a Stripe account already? Click on Yes button and simply connect it with Payzard.

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

Connect Stripe

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.

Apply for Stripe Account

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.

Note

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

Add payment button with drag-n-drop

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

Set payment amount and currency

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

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

Change 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

Test your payment button

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.

Note

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.

Email confirmation

Email confirmation aobut payment

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.

Set Live account in Stripe

Good luck! Keep going to grow your business!

Payment analytics on your website

Payment analytics in WordPress 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:

  1. The number of button displays
  2. The number of visitors’ mouse clicks
  3. The number of payment attempts made by customers
  4. 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.

Advanced settings

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.

Payzard is a free payment plugin for WordPress

Connect Payzard Now
The following two tabs change content below.
Maciej Karpinski

Maciej Karpinski

Maciek is a UX and UI designer at Payzard and SecurionPay. Paper and pencil, Photoshop, Axure, Illustrator, WordPress and goal oriented guy. Apart from creating experiences or designs, he spends a lot of time on traveling with his camera.
Maciej Karpinski

Latest posts by Maciej Karpinski (see all)

  • I needed to change the email address after the setup but I can’t generate a new code. I removed the script from the head tag, but Payzard still found it somehow http://prntscr.com/i0ufqq