Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Stripe QR Code Payment in WordPress

QR codes, or Quick Response Codes, are a type of barcode that users can scan using their mobile phones. You can show a Stripe payment form using QR codes to help customers easily purchase a product or service.

Now, many WordPress users find it difficult to add QR codes to their websites and accept online payments. To help you out, we tested and used a lot of different plugins.

From our experience, the easiest way is by creating a Stripe payment form using WPForms and then creating a QR code for the form using Google Chrome browser settings or the Shortcodes Ultimate plugin.

In this article, we will show you how to add Stripe QR code payment in WordPress.

How to add Stripe payment QR code payment in WordPress

Why Add Stripe QR Code Payment in WordPress?

Stripe is a popular payment gateway that lets you accept online payments on your WordPress site or eCommerce store. It makes it very easy for customers to pay using their credit cards.

The best part is that customers don’t have to go through a lengthy signup process. They can simply enter their credit card on the website to make a purchase.

Adding Stripe QR code payments to your site gives customers the flexibility to complete a purchase quickly. Customers can simply scan the code to open the payment link.

This makes the checkout process very simple and fast. It helps people to easily buy a product and service on your online store. As a result, you’ll see a boost in conversions and reduced cart abandonments.

That said, let’s look at how you can add a Stripe QR code payment to your WordPress website.

Create a Stripe Payment Form in WordPress

First, you’ll need to add a Stripe payment form on your website to accept online payments from customers.

The best way to do that is using WPForms. It is the best contact form plugin for WordPress that’s super easy to use and easily integrates with Stripe. There are many form templates to choose from, and you can customize them using the drag-and-drop builder.

For this tutorial, you’ll need the WPForms Pro license because it includes the Stripe addon. There’s also a WPForms Lite version that you can use for free. It allows you to accept Stripe payments, but there’s a 3% transaction fee for payments made through your forms.

To start, you’ll need to download and install the WPForms plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can go to WPForms » Settings from your WordPress dashboard and enter the license key. You can find the key in your account area on the WPForms website.

Adding a license key to the WPForms form builder plugin

Simply enter the key and click the ‘Verify Key’ button.

Once that’s done, you’ll need to go to the WPForms » Addons page and install the Stripe addon.

Installing the Stripe addon

Go ahead and click the ‘Install Addon’ button, and WPForms will automatically install and activate it.

From here, you can head to WPForms » Settings from the WordPress admin panel and go to the ‘Payments’ tab.

Next, simply click the ‘Connect with Stripe’ button and follow the onscreen instructions to connect your account with WPForms.

Click the connect with Stripe button

Once Stripe is connected, you can go to WPForms » Add New to create a new form.

WPForms offers lots of form templates from which to choose. You can select a simple contact form, an order form, or a Stripe payment form and customize it.

Stripe payment form

For this tutorial, we will use the ‘Stripe Payment Form’ template.

Next, you can customize your form using the drag-and-drop form builder. By default, you’ll see different form fields in the template.

However, WPForms lets you add more form fields to the template, like a dropdown, checkboxes, email, phone, address, website, and more.

Customize Stripe payment form

You can also click any form field on the template to customize it further.

For instance, we changed the text for each item on your demo form and enabled the option to show prices after the item label.

Customize form field in stripe payment form

Once you’re done editing the form, simply switch to the ‘Payments’ tab and select ‘Stripe’ from the menu on the left.

From here, ensure the ‘Enable Stripe payments’ option is enabled.

Enable Stripe payments

Next, you can switch to the Settings tab. Here, you’ll see options to change the notification and confirmation settings.

For instance, you can select what action should take place once a user submits a form. WPForms lets you show a message or a page or even redirect users to a URL.

Confirmation settings form

You’re now ready to display your Stripe payment form on your website.

Simply click the ‘Save’ button to store your changes, and then click the ‘Embed’ button at the top.

Save and embed your form

Next, WPForms will show a popup where you can choose an existing page or create a new one to embed your form.

We will choose the ‘Select Existing Page’ option for this tutorial.

Embed a form in page

Next, you’ll need to enter a name for your new page.

Once that’s done, simply click the ‘Let’s Go’ button.

Enter name for your new page

After that, you’ll see a preview of your Stripe payment form in the WordPress content editor.

You can go ahead and publish the page and visit the website to see it in action.

Stripe payment form preview

Now, go ahead and copy the link to your payment form page, as you’ll need it to create a QR code.

Alternative Method: You can also create a Stripe payment form using WP Simple Pay. It is the best Stripe payment plugin for WordPress that helps you collect online payments without setting up a shopping cart.

WP Simple Pay is a more straightforward option than WPForms. It is perfect if you’re just looking to create a basic form to accept credit card payments.

However, if you’re looking for more customization options and form templates, then we recommend using WPForms.

For more details, you can see our detailed guide on how to accept payments with Stripe in WordPress.

Add QR Code for Stripe Payments in WordPress

Now that your Stripe payment form is ready, you can create a QR code for it and display it anywhere on your site.

There are 2 ways you can add a QR code to your site. You can use the Google Chrome browser’s feature or use a WordPress QR code plugin.

1. Create QR Codes using Google Chrome

If you’re using the Google Chrome browser, then you can use it to share a webpage via a QR code.

First, you’ll need to open the Stripe payment form page in a new tab or window.

Next, you can click the share icon in the top right corner of the site address bar. From here, simply select the ‘Create QR Code’ option.

Click the share icon in chrome

After that, Google Chrome will generate a QR code for your Stripe payment form page.

You can go ahead and download the QR code as an image.

Download the QR code

Next, simply place the image anywhere on your site.

For example, you can show the QR code on product pages so customers can quickly scan them and open the form to make a purchase.

Add QR code to product page

2. Create a Stripe Payment QR Code using a WordPress Plugin

You can add QR codes to your site using a WordPress plugin like Shortcodes Ultimate. It is a free plugin that lets you create over 50 different types of shortcodes, including QR codes. You can learn more in our detailed Shortcodes Ultimate review.

First, you’ll need to install and activate the Shortcodes Ultimate plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you will see the Shortcode Ultimate welcome screen.

Shortcode ultimate welcome screen

Next, you’ll need to edit a page or post to add your QR code.

Once you’re in the content editor, simply add a shortcode block.

How to add a shortcode block to WordPress

After that, you should see an ‘Insert shortcode’ option.

You can simply click the double brackets icon to add your QR code.

Click the select shortcode icon

Next, the plugin will display different shortcode options for your site.

Go ahead and select the ‘QR Code’ option.

Select QR code shortcode

After that, you’ll see options to enter details for your QR code.

In the Data field, you can enter the URL of your Stripe payment form that you created earlier.

Besides that, there is an option to enter a title for the code, which acts as an alt-text. You can also adjust the size of your QR code.

Enter QR code details

If you scroll down, then you’ll see more options to customize your QR code. For instance, you can change the primary color, background color, and more.

Once you’re done, simply click the ‘Insert shortcode’ button.

Click insert shortcode

The plugin also lets you see a live preview of the code on your blog post or landing page.

Go ahead and publish your page to see the Stripe payment form QR code in action.

QR code live preview

We hope this article helped you learn how to add Stripe QR code payment in WordPress. You may also want to see our guide on how to accept recurring payments in WordPress and the best WordPress coupon code plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

6 CommentsLeave a Reply

  1. Moinuddin Waheed

    This is one of the potential use of QR code for the simple reason that it smoothens the whole process of payment.
    It not only helps businesses to avoid the bulky task of writing and displaying the whole payments form but also helps customers for easy navigation.
    thanks for the step by step process.

  2. Jiří Vaněk

    We started using Stripe fairly recently, based on recommendations from several articles here on WPBeginner. The QR code is a great option to simplify payment for users. Thanks for the great article. I would like to ask, is it possible to further personalize the QR code to include, for example, the company’s logo (brand)?

    • WPBeginner Support

      For the moment you would need another tool to customize the QR code.

      Admin

  3. Ralph

    Paying with QR code is more and more popular. I think it is becuase of its ease of use. It’s just faster than old methods and we want to save more and more time.

    I have a question – Scaning QR code with phone from laptop screen is easy, but is it also such a easy thing with smartphones themselves? I mean, i scroll website on my phone and see QR code, my phone do not recognize QR code like that, only with photo app. Is it normal or it’s just my phone and having qr code for mobile users is just as good as for desktop users?

    • WPBeginner Support

      It would depend on the phone, if you have not done so already you would want to try taking a screenshot with your phone.

      Admin

      • Ralph

        Oh, I did not think of that… Thank you for your suggestion, this should do the trick!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.