How to Add Stripe QR Code Payment in WordPress

Are you looking to add a QR code payment option on your WordPress site?

A QR payment method allows users to scan and access your payment link on their phones. This makes the checkout process simpler and easier for them.

But, there are many ways to allow users to pay by QR code. On top of that, there are many payment gateways you can integrate with the QR code.

For example, you can manually add a payment QR code to your site using platforms like QR Code Generator or QRStuff. But this requires a long setup process.

You need to enter the information to the QR code, such as the payment link, website URL, and contact details. You also need to customize the QR code separately from your site and download it as an image.

In the end, it can look out of place and have functionality conflict.

On top of that, QR codes generated manually are static, meaning any updates require regenerating and replacing the image on your site.

This is why we recommend you use WPForms to help you create a QR code payment option.

First, with WPForms, you can dynamically generate QR codes based on form inputs, such as user details, payment amounts, or event registrations. This ensures the QR codes are always relevant and personalized without manual intervention.

You can also quickly add a QR code with your payment link to any form or page using the visual builder, saving time.

The best part is that WPForms integrates with payment gateways like PayPal and Stripe, making generating QR codes linked to payment pages easy.

Now that we have selected a tool to create the payment QR code, the next question is, what gateway is best for setting up QR payment codes?

Here, your priority should be to find a payment gateway that is secure, scalable, and user-friendly. You should also find one that supports many currencies, giving you access to a global audience.

Because of these reasons, we selected Stripe.

Stripe allows you to generate dynamic QR codes that link to real-time payment pages. You can customize the payment page linked to the QR code with your branding, logo, and colors.

Stripe supports various payment methods, including credit/debit cards, mobile wallets like Apple Pay, and Google Pay, as well as local payment systems.

As a result, a single QR code can direct users to a payment page where they choose their preferred method.

Here are other reasons why Stripe is a great QR code payment gateway.

• One-Tap Payments: Customers can scan the QR code and complete the payment in seconds using saved payment methods
• Dynamic Payment Amounts: Stripe allows you to create QR codes tied to dynamically calculated payment amounts.
• Easy Integration with Websites: Stripe provides simple API integrations and plugins for platforms like WordPress.
• Real-Time Updates: Stripe’s dashboard tracks payments made via QR codes. You can monitor transactions instantly.
• Secure Transactions: Payments via Stripe QR codes are processed securely, with advanced encryption and fraud detection mechanisms.

As you can see, the combination of Stripe and WPforms is a great way to receive payments through QR codes.

With that out of the way, let us show you, step by step, how to set up QR code payments in WordPress.

Below is a sample of the Stripe QR Code Payment we will create in this tutorial:

With that out of the way, let’s begin.

How to Add Stripe QR Code Payment in WordPress

As mentioned, we need two tools to set up QR payments in WordPress: WPForms and Stripe.

Luckily, WPForms is compatible with Stripe. So, we will connect Stripe with WordPress through WPForms. This process allows users to pay by QR code on any form you want using the drag and drop builder. This makes it convenient and easy for your users to make a purchase.

Now, check out all the steps we will follow below. If you want to skip to any step, simply click on it.

• Step 1: Install and set up WPForms
• Step 2: Install and Set up WPForms Stripe Pro Addon
• Step 3: Create Payment Form
• Step 4: Set up Stripe Payment
• Step 5: Set Up Notifications and Confirmation Messages
• Step 6: Publish The Form
• Step 7: Add QR Code for Stripe Payments in WordPress

Let us walk you through the entire process below.

Step 1: Install and set up WPForms

The first step is to install WPforms in your WordPress dashboard. But, we should mention that WPforms offers a free version that allows you to make Stripe payments. You can access it quickly in your WordPress repository and start making forms.

But you need the pro version for more advanced Stripe functionalities, such as using a QR code.

This is because the pro version gives you access to the Stripe Pro addon, which we will need in this tutorial. Apart from that, the free version of WPForms comes with a 3% transaction fee, which can raise the cost of your goods.

Check out the latest WPForms review to learn more.

To get started, head to the official WPForms website and sign up for a plan. They offer a variety of plans, making it easy to find one that fits your budget and needs. But, to use the Stripe Pro addon specifically, you need the Pro or elite WPForms plans.

After you purchase the Pro or Elite plan, log into your WPForms account and navigate to Downloads.

After this, download the WPForms Zip file to your PC. Then, still, on this page, copy the License Key; you will need it to activate the pro version.

Once done, head to your WordPress dashboard and go to Plugins » Add New Plugin. Then, Install and activate WPForms as you would any other plugin.

Check out this tutorial on how to install plugins if you need any help.

After activation, you should see a new menu option appear in your WordPress dashboard labeled “WPForms.” This indicates that the installation process was a success.

After this, go to WPForms » Settings » General and paste the “License Key” you copied earlier.

Finally, hit Verify Key, and that’s it! You are ready to use WPForms.

Next let us see how to set up Stripe payment in WordPress through WPForms.

Step 2: Install and Set up WPForms Stripe Pro Addon

WPforms makes it super simple to add Stripe payments and configure them. All you have to do is go to WPForms » Addons.

Here, scroll through the available addons or use the search function to find the “Stripe Pro” addon. After this, install and activate it like any other plugin addon.

That’s it! You can now use advanced Stripe functions on WPForms through this addon.

Next, configure and set up Stripe payments on WPForms.

To do this, head to WPForms » Settings and navigate to the “Payment” tab. After this, scroll to the Stripe section on the page and hit “Connect with Stripe.”

You will be redirected to a sign-up page where you can add your Stripe login details. If you do not have a Stripe account, you can also create one on this page.

Once connected, you will be redirected back to your WordPress dashboard. At this point, you should see a green tick next to “Connection Status” under the Stripe tab.

Check out this article on the best Stripe plugins if you are looking for more tools that connect this easily with Stripe in WordPress.

Great! You have just set up Stripe and are ready to receive payments.

Step 3: Create Payment Form

The next step is to set up a payment form where users can make payments. As mentioned, the beauty of using WPForms is that you can add a payment field on any form you want.

For example, you can add a payment field to a registration form. This combines the signup and the pay with the QR code process, streamlining checkout. You can also add it to a donation form, billing form, auction form, party RSVP form, order form, and more.

The best part of using WPforms is that it comes with over 2000 ready-to-use form templates. This simplifies the process further. You can also use the blank canvas if you have design experience.

To help you choose a template, WPforms shows you a preview for each on the template page. If you want to view the template on a full screen, hover over it and select “view Demo.”

Our step-by-step tutorial will use the “Simple Contact Form” template.

So, we will hover over it and hit “Use Template.” This will open the template in the drag and drop form builder.

First, you will notice that the form builder interface is divided into two sections: “Fields” on the left and a live preview of your form on the right.

The fields are divided into Standard Fields, Fancy Fields, and Payment Fields. This makes it easy to find a field you want to add.

WPForms offers a variety of field types, including single-line text, email, dropdowns, checkboxes, and more, giving you the flexibility to create forms tailored to your purpose.

To add a field, simply drag it from the left panel and drop it into the desired spot on your form in the preview window on the right. You can rearrange fields by clicking and dragging them within the live preview while you create your contact form.

This lets you customize the form layout to suit your needs effortlessly.

For example, you can add a Checkbox Items, multiple Items, or Dropdown Items field if you want to sell multiple products on your form. On the other hand, you can add a single Item field if you want to sell only one product on the contact form.

Remember, each WPForms template has pre-added fields, which you can customize.

To edit a field, select it in the form preview, and the field options will appear on the left. From here, you can modify the field label, placeholder text, and other settings, such as whether the field is required.

Once you’ve finished editing or adding fields, Save your form using the button on the top right to ensure all changes are applied. This simple process ensures that even beginners can build professional, functional forms in minutes.

Check out this comparison article on WPForms vs. FormStack to see how they match up in form creation.

Step 4: Set up Stripe Payment

With your contact form ready, setting up the Stripe payment option is the next step.

To do this, we will need to add a Stripe field to the form. This is a very simple process, as you will use the same drag and drop process we used above.

So, go to the fields panel and scroll to Payments Fields. Here, locate the “Stripe Credit Card” field, then drag and drop it to the location on the form you want it to appear.

The WPforms Stripe payment field comes premade with the card number, expiration, CVC, and country text lines. So, you do not need to customize the Stripe Credit Card field further.

Check out this article to learn another convenient way to receive card payments in WordPress.

With the Stripe payment field ready, go to the “Payments” tab on the far left.

Once selected, you open all the payment gateways to connect with WPForms. You can use Authorize.Net, Coupons, PayPal Commerce, PayPal Standard, and Square.

But, the recommended payment gateway is Stripe, which you will find at the top of this page.

Once you select this option, a new page will open on the left with a toggle button to enable “One-Time Payments” or “Recurring Payments.”

Check out this article to learn how to set up recurring payments with WPForms.

For our tutorial today, we will set up One-Time Payments.

Once you use the toggle button to enable this feature, you will see options to map your contact form fields to the payment fields. This allows WPforms to communicate with Stripe and ensure the correct payment details are captured during the form submission process.

Again, WPForms makes the mapping process easy.

All you need to do is select an option from the dropdown menus. In fact, the dropdown menus only contain the most likely field to be mapped, making it even easier.

For example, under the Stripe Payment Receipt dropdown, you see “Email.” Then, in the Customer Name dropdown, you will get “Name.”

After mapping, it should look like the screenshot below:

To improve user experience further, you can activate Conditional Logic at the bottom of this page.

Here, you can dictate when the payment fields should be displayed or hidden. WPForms even allows you to add multiple conditional logic rules.

Apart from conditional logic, here is another way to reduce form abandonment that can come in handy.

Step 5: Set Up Notifications and Confirmation Messages

Now, email notifications and confirmation messages are important for all forms. But, they are crucial for payment-related forms. They provide instant feedback to users, reassuring them that their payment was successfully processed.

Email notifications can be configured to send a receipt or confirmation details to the user while also notifying you about the transaction.

Confirmation messages, displayed immediately after form submission, help eliminate confusion by letting users know their payment and form submission was successful.

You can set the confirmation message immediately on the same page as a “Message,” show it on another page on the same site, or on an external URL.

WPForms allows you to set them both up under Settings. Here, you get tabs for both “Notifications” and “Confirmations.”

Remember, ensuring these messages are clear and professional enhances user trust and creates a smoother overall experience.

You can check out this article on how to set up form notifications and confirmations for an in-depth explanation.

Step 6: Publish The Form

Now, with everything set, the only thing left to do is publish your form on your WordPress site. There are two ways to do this: Publish on a new page or publish on an existing page.

Let us look at how to publish on an existing page.

First, hit the Save button at the top of the page. Once done, select the “Embed” button next to the Save button to open a popup window. Then, in this window, choose “Select Existing Page.”

In the next popup, choose the page where you want the form to appear from the dropdown. After this hit, “Let’s Go.”

This will open the page in WordPress’ block editor.

After this, go to the far left of the block editor and select the Plus (+) button to open the blocks.

Then, locate the WPForms block and drag and drop it to the location on the page where you want your payment form to appear. Once it loads, use the dropdown menu in the block to select the payment form you just built.

Finally, hit Save on the top right of the page. At this point, you should see the contact form you created on the live page.

Next, let us see how to add the payment form to a new page.

Again, go back to the Embed button at the top of the drag and drop form builder. But this time, select “Create New Page.”

On the next popup, name your new page and select “Let’s Go.” This will open the block editor for the new page. This time, the new page will load with the form pre-added.

Of course, you can use WordPress blocks to further customize the page. But, the form should be ready to publish as is. Once you are happy with the form, hit “Publish” at the top of the page.

That’s it! You can now publish a form using WPForms on existing and new pages.

Next, let us see how to add a QR code to accept payments through the form.

Step 7: Add QR Code for Stripe Payments in WordPress

Now, there are 2 free and simple methods to add a QR code to your payment form. First, you can use Google Chrome, which has a built-in QR function, or Shortcodes Ultimate, a free WordPress plugin.

1. Use the Built-In Chrome Function to Add a QR Code

To create a QR code using the Google Chrome function, open the payment form page on the browser.

You can use the share button next to the URL text bar to open the QR code function.

If you do not find it here, hit the “Customize and Control” button at the top right of your Chrome browser. This is usually displayed as 3 dots.

After this, scroll down to Cast, Save, and Share. Then, from the dropdown menu, select “Create QR Code.”

Then, on the popup that appears next, download the QR code as an image.

Next, go to any page or post on your site and add the QR code you downloaded. Preferably, add it to product pages so that you can quickly redirect your users to the checkout page.

Next, all you have to do is edit the page or post it in the block editor. Then, use the image block to add the QR code.

That’s It. Your users can open your payment form instantly.

2. Use Shortcodes Ultimate to Add a QR Code

Shortcodes built by Shortcodes Ultimate allow you to place the QR Code in more convenient page areas, widgets, sidebars, and more without coding.

To get the free version of this shortcode plugin, go to your WordPress repository and use the search function to find “Shortcodes Ultimate.” After this, install and activate it as you would any other plugin.

After this, open a new or existing page in your WordPress dashboard. Then, use the Plus (+) function to search for “shortcode.”

Drag and drop the shortcode block to the position on the page where you want the QR code to appear.

Once done, select the square brackets option “[]” on top of the shortcode block to open more options. Then, find “QR Code” from the long list of options in the popup window.

On the next popup, enter the payment form URL in the Data field. Then, you can add more customizations like size, margin, align, link, and more.

After this, hit Insert Shortcode and update the page. You should see the QR code on the live page at this point.

Check out the sample of the payment QR code below:

The best part is that you can use this QR code created across multiple pages and posts without further edits.

That’s it! You just learned how to add Stripe QR code payment in WordPress. We hope you enjoyed it. If you have any more questions, check the commonly asked questions below.

FAQs: How to Add Stripe QR Code Payments in WordPress

Congratulations! You can now set up QR payment codes on your WordPress site. Here is an article to show you how to accept Stripe Payments in WordPress if you do not want to add QR codes to your payment form.

On top of that, here are other articles you may be interested in reading.

• 9 Best WordPress Payment Plugins
• WP Simple Pay Review: Is It the Best Payment Plugin?
• 9 Best WordPress Payment Plugins

The first article lists the best payment plugins for WordPress. The next one reviews WP Simple Pay, another amazing payment plugin. The last post ranks the best WordPress payment plugins.