WP Simple Pay Blog

Stripe Tutorials, Tips, and Resources for WordPress to Accept Payments

How to Add a Payment Form to WordPress (6 Locations to Embed)

Last updated on

Written By: author avatar Aazim Akhtar

Getting a payment form live on a WordPress site takes less than 10 minutes. Deciding where to add a payment form to WordPress and choosing the right placement for your use case is the step most site owners skip over, and it shows in their conversion numbers.

We’ve seen site owners build a clean, well-configured form and then bury it in a footer widget where almost no one scrolls to find it.

Form placement has a direct effect on how many visitors see the form and how many complete the payment, and a form competing with a navigation menu and a sidebar will always lose to a dedicated page with nothing else to click.

In this article, we’ll break down how to add a payment form to WordPress and embed it in 6 different locations.

Why Form Placement Affects Your Conversions

A payment form placed on the wrong page not only misses sales, but also creates confusion for visitors who are ready to pay but can’t find where to do it.

Here are four ways poor placement costs you conversions:

  • Buried forms get zero traffic. A form at the bottom of a busy homepage competes with navigation links, blog posts, images, and social widgets. Visitors who landed with buying intent click somewhere else before they scroll to the form.
  • Context mismatch breaks trust. A subscription form embedded on an about page asks visitors to commit before they understand the offer. Payment forms convert best when the surrounding content has already done the selling work.
  • Friction at checkout kills completed transactions. A full-page embedded form on a page with navigation, a sidebar, and a footer gives visitors too many ways to leave. A form on a dedicated page with nothing else to click keeps attention on the transaction.
  • Missing placements leave money on the table. A form that only lives on one page is only reachable from that page. Sidebar placements, overlay modals triggered from anywhere on the site, and dedicated payment URLs multiply the paths that lead a visitor to checkout.

That said, let’s look at a quick and simple way to create a payment form for your website.

Add a Payment Form to WordPress

The easiest way to get Stripe payments running on a WordPress site without a shopping cart is WP Simple Pay.

WP Simple Pay - best Stripe payment plugin for WordPress

WP Simple Pay is the #1 Stripe payments plugin for WordPress. It lets freelancers, small businesses, nonprofits, course creators, and others accept one-time and recurring payments directly on their site.

The best part is that it does this without setting up a shopping cart and without writing any code. Here are some key features offered by WP Simple Pay:

  • Three display modes. Choose between embedding your form directly on a page, opening it as an overlay modal triggered by a button, or sending customers to an off-site Stripe Checkout page, all from the same form builder.
  • One-time and recurring payments. Build payment forms for services, subscriptions, donations, and registrations from the same drag-and-drop form builder, with no separate tools required.
  • 10+ payment methods. Accept cards, Apple Pay, Google Pay, and ACH Direct Debit on any plan, plus Buy Now Pay Later options like Klarna, Affirm, and Afterpay on the Professional and Elite plans, all managed from the same form.
  • Dedicated payment pages (Professional plan or higher). Create a distraction-free, branded payment page hosted on your WordPress site and share it as a direct link, with no page-building required.

With that, let’s see how you can use WP Simple Pay to add a payment form to WordPress in the right location for your site.

Step 1: Install and Activate WP Simple Pay

First, you’ll need to visit the WP Simple Pay website and select a plan.

Note: For this tutorial, we will be using the WP Simple Pay Pro because it includes payment form templates, a drag & drop form builder, custom fields, and more advanced features. There is also a WP Simple Pay Lite version that you can use to get started for free.

After signing up, go to your WP Simple Pay account dashboard and click Download WP Simple Pay Pro to get the plugin ZIP file.

Download WP Simple Pay plugin

From there, navigate to your WordPress dashboard, upload the plugin files, and then install and activate the plugin.

If you need help with this process, then please see this step-by-step guide to installing WordPress plugins.

Next, the setup wizard launches automatically after activation, so click Let’s Get Started to begin.

WP Simple Pay setup wizard

If the setup wizard doesn’t appear after activation, navigate to WP Simple Pay » Settings » General » Advanced and click Launch Setup Wizard.

WP Simple Pay should now be installed and ready. Now, you can connect it to your Stripe account.

Step 2: Connect Your Stripe Account

In the setup wizard, click Connect with Stripe to open Stripe’s account connection screen.

Connect with Stripe

From there, enter your Stripe account email and complete the authentication flow. New users can create a free Stripe account from the same screen without leaving WordPress.

After completing authentication, the wizard advances automatically. Confirm the Setup Complete screen to finish.

Complete WP Simple Pay setup wizard

You can also connect or reconnect at any time by heading to WP Simple Pay » Settings » Stripe from your WordPress dashboard.

Now, let’s create a new payment form for your WordPress website.

Step 3: Create Your Payment Form

To start, you can simply click the ‘Create a Payment Form’ button in the setup wizard.

Or from the WordPress dashboard, navigate to WP Simple Pay » Payment Forms and click Add New Payment Form to open the template picker.

Add a new payment form

WP Simple Pay shows a library of pre-built payment form templates organized by use case, including Payment Form, Payment Button, Donate Button, and more.

Choose the template that fits your goal.

Select a payment form template

Once the form builder opens, give your form a title in the General tab and set the Type field.

Next, select the On-site payment form option to embed the form directly on a page. You can also check the Open in an overlay modal option to display the form in a modal that opens when a visitor clicks the payment button. Select the Off-site Stripe Checkout form option to redirect customers to Stripe’s hosted checkout page.

Enter payment button details

Note: On-site payment forms and the overlay modal option require WP Simple Pay Pro. The Off-site Stripe Checkout form is available on all plans, including Lite.

Then, you can go to the Payment tab to configure pricing options, such as currency, amount, and whether the payment is one-time or recurring.

Add a price for payment form

Next, you can open the Form Fields tab to add any additional customer fields.

Here, WP Simple Pay form builder lets you add new Form Fields and use the drag & drop functionality to rearrange the order of each field. When the form is ready, click Publish.

Enter custom form fields

Step 4: Embed the Form on Any WordPress Page or Post

WP Simple Pay gives you two ways to embed the form anywhere on your site. The easiest is to open any page or post in the WordPress content editor, click the + icon to add a new block, search for WP Simple Pay – Payment Form

Add WP Simple Pay payment form block

After you select the block, choose the form from the dropdown.

If you’re working in a classic editor or in a widget area, use the shortcode instead. Copy the shortcode from the form’s Publish panel in the format and paste it wherever you want the form to appear.

Select your payment form

For more details, please see our guide on how to add a payment form to a page in WordPress.

Now, let’s look at places where you can embed your form and boost conversions.

6 Locations to Add a Payment Form

Once the payment form is ready and you know how to embed it, the next step is to find the best location to place it so you get lots of conversions.

1. Checkout Pages

A checkout page is the most obvious location for a payment form. It’s right for any site that anticipates that visitors will purchase multiple items or will want to “save” items by adding them to a shopping cart while they continue browsing. If you have a fully-fledged ecommerce store, it makes sense to use a checkout page.

WordPress payment form

1.1. Adding a Checkout Page to WordPress

With WP Simple Pay, you can either embed a form on your own site or embed it on an off-site Stripe checkout page. All you have to do is select where you want to embed it with a click.

Enter payment button details

For more details, you can check out the complete guide to setting up a Stripe checkout page in WordPress.

1.2. Checkout Page Best Practices

Your payment form should be the primary element on your checkout page. Don’t clutter this page with extra images, copy, or links that don’t relate to the checkout experience. Anything you add to this page is an opportunity for customers to become distracted and leave. It’s even smart to use a custom header and footer on this page so users don’t have avenues to do something else.

If your customers need any post-sale information, add it to a separate “thank you” page so it doesn’t disrupt your conversion. This might include instructions or next steps to take (like “Check your email after purchasing”), product/service best practices, or how they can contact you if they have questions or concerns.

2. Payment Landing Pages

A landing page is a page your visitors land on first (an appropriate name, right?). For instance, you might buy ads that link to a landing page where the copy of the ad relates to the copy of the page. Your services page could also be a landing page.

Landing pages typically have a single purpose: to convince the visitor to take some kind of action, like contact you, make a donation, subscribe to your email list, or make a purchase. Adding a payment form to this page, as opposed to making visitors click on another page, might be a good way to increase conversions.

2.1. Adding a Payment Landing Page to WordPress

WP Simple Pay lets you easily create a distraction-free payment landing page on your WordPress site. With the dedicated payment landing page, you can ensure high conversions as it removes unnecessary friction on the page, like headers, footers, and more, irrespective of the WordPress theme you use.

enable-stripe-payment-dedicated-page

If you decide to add a payment form to a landing page, just make sure the page includes all the information a visitor needs to make a buying decision. Don’t expect visitors to browse around your website searching for answers to their questions. Include a strong headline, supporting copy, frequently asked questions, trust signals, and anything you can add to make your customers feel safe.

Check out: How to create a payment landing page with WordPress

Remove the additional 3% fee! 

Most Stripe plugins charge an additional 3% fee for EVERY transaction
…not WP Simple Pay Pro!

3. Product Pages or in Your Content

Product pages:

Product pages are pages that promote a specific product or service. These might be landing pages, but they aren’t always.

Depending on the nature of your products and services, it might be smart to put your payment form directly on the product page, rather than using a traditional shopping cart and checkout flow. This makes sense when you don’t expect visitors to purchase multiple products/services at the same time.

In Your Content:

As you craft content for your readers, you may mention a product or service and want to give them a chance to buy it on the spot. In these cases, it helps to add the payment form directly to the page.

For instance, let’s say you’re writing a blog post. In the article, you refer to your ebook. Instead of linking to another page, you could include a short blurb about the book and a simple payment form to buy it. This ensures you create every possible opportunity for your readers to buy.

3.1. Add a Payment Form to Any Posts or Pages

To embed a payment form on any blog posts or pages, just go to the post/page edit screen and then add the WP Simple Pay – Payment Form block wherever you want to embed it on that post. After adding the block, make sure to choose the right payment form. Then publish the post.

Add WP Simple Pay payment form block

4. Sidebars

In some cases, it makes sense to put a payment form in a sidebar. Since the sidebar is an element that appears on many pages, a form in this location will make it appear throughout your website. This is especially useful if your website has (or will have) a lot of pages and you want that form to be as accessible as possible.

For instance, let’s say you produce regular blog content. Instead of trying to get blog readers over to your ebook landing page, you could promote your ebook in the sidebar of every page. You could include a payment form right below it so readers can buy without taking another step.

If you’re a nonprofit that collects donations, it’s smart to put a payment form in the sidebar so your potential donors can donate as soon as the mood strikes them. This ensures you never miss a donation because the form was inaccessible.

This sidebar payment form is a great example. It appears on multiple pages throughout the site for generous fans to buy this podcaster a coffee.

NOTE: You can easily embed a WP Simple Pay form on your site by copying the shortcode of your form into a sidebar widget where you want to embed it.

5. Footers

Payment forms in footers are rare, but they make sense in some cases. Unlike sidebars that appear on some but not all pages, footers generally appear on every page (except in cases like landing pages where footers are specifically excluded). Therefore, whatever you put in the footer should be something suitable for every page.

Footers are unsuitable places for payment forms that sell products and services that require supporting copy and images. There just isn’t enough space for that kind of thing. But a footer payment form may work if you’re selling a self-explanatory product (like a piece of content) or soliciting a small donation (like “buy me a coffee” or “support us with $3”).

If your site has a widgetized footer area, you can embed the form in the footer by copying the shortcode of the form into a footer widget.

6. Offsite Pages

This isn’t technically an embeddable location, but we didn’t want to leave it out. Your final option is to use an off-site page that’s hosted by your payment processor. A button on your website brings the visitor to a separate page that includes the traditional payment fields. Here’s what a Stripe-hosted checkout page looks like.

WordPress payment form

The advantage of this system is that all the page building is done for you by the hosting service. The button to reach this page can exist anywhere, even as a simple text link on a menu or in your content. Plus, the page is hosted by a reputable company that people trust as safe.

Frequently Asked Questions

1. What’s the difference between an on-site payment form and an off-site Stripe Checkout form?

An On-site payment form renders the payment fields directly on your WordPress page, keeping the customer on your site throughout the transaction. An Off-site Stripe Checkout form redirects the customer to Stripe’s hosted checkout page to complete payment. On-site forms give you more control over the checkout experience and require WP Simple Pay Pro.

2. Can I embed a WP Simple Pay form in a sidebar or widget area?

Yes. Any WP Simple Pay form can be embedded in a sidebar or widget area using the widget block or shortcode. For sidebar placements, we recommend enabling the Open in an overlay modal option in the General tab so the full form opens in a modal rather than rendering inline in the narrow sidebar space.

3. What is Payment Page Mode, and which plan does it require?

Payment Page Mode is a WP Simple Pay feature that creates a standalone, distraction-free page hosted on your WordPress site for any payment form. It removes site navigation, headers, sidebars, and footers so visitors focus on the payment. Payment Page Mode is available on the Professional plan or higher.

4. How do I add a WP Simple Pay form to a WordPress page?

Open the page in the block editor, click the + button to add a new block, search for WP Simple Pay – Payment Form, and select it from the results. Choose your form from the dropdown in the block settings. Alternatively, copy the shortcode from the form’s Publish panel in the format and paste it into any page, post, or widget area.

5. Which payment form placement converts best?

Dedicated payment landing pages and checkout pages consistently outperform other placements because they remove competing navigation and content. We’ve seen site owners significantly increase their conversion rate by moving a form from a general-purpose page to a dedicated page with no other links. Sidebar and footer placements work better as secondary access points for self-explanatory offers than as primary checkout locations.

As you can see, there are lots of suitable places to embed your payment forms, but the right location depends on the nature and purpose of your form. But in order to have full control, you need a flexible payments plugin that allows you to post forms anywhere.

We hope this article helped you learn how to add a payment form to WordPress and 6 locations to embed. You may also want to see our guides on the differences between embedded, overlay, and Stripe Checkout payment forms and how to optimize your product pages to boost sales.

Ready to start accepting Stripe payments on your WordPress site? Get started with WP Simple Pay today.

To read more articles like this, follow us on X today.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Start Accepting Payments Today

Start accepting one-time and recurring payments or donations on your WordPress website.