WP Simple Pay Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create an Overlay Payment Form in WordPress (Easy Way)

By

|

Last updated on

Do you want to create an overlay payment form on your site? With WP Simple Pay, you can easily create a button that pops up an overlay payment form when clicked.

In this article, we’ll show you how to create an overlay payment form in WordPress (step by step).

Creating an Overlay Payment Form

WP Simple Pay, the best WordPress Stripe payment plugin, makes it easy to accept payments in multiple ways, including an overlay payment form.

All you need to do is to create a payment button and embed it on your site. When your customers click on that button, an overlay popup form will be triggered, where your customers can complete the payment.

buy now button popup preview

The best thing is that an overlay popup form enables your customers to complete the payment on the same page where the payment button is embedded.

That means unlike a conventional payment button, redirecting to another checkout page is NOT needed, which increases conversion rate and helping you earn more.

Step 1: Install and Activate WP Simple Pay

To create an overlay payment form, the first thing you’ll need to do is to install and activate WP Simple Pay.

WP Simple Pay is one of the best WordPress Stripe plugins that lets you easily create a payment button.

After purchasing the WP Simple Pay plugin, download it from your purchase email receipt or from your WP Simple Pay account.

To install it, go to your WordPress backend, navigate to Add New under Plugins, and then Upload Plugin. Click Choose File and find the WP Simple Pay .zip file on your computer. Click Install Now. When the upload is complete, press the Activate Plugin button.

If you want to install WP Simple Pay via FTP, follow this guide.

Remove the additional 3% fee! 

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

After the plugin is installed and activated, you’ll be directed to its setup wizard. In the setup wizard, you can connect your Stripe account to your website, so you can start creating payment forms to accept payments. To proceed with Stripe integration, click Let’s Get Started.

wp simple pay setup wizard

If you didn’t see the setup wizard, simply head over to WP Simple Pay » Settings and then click on the Stripe tab, where you can find the Connect with Stripe button. Just click on it to connect your Stripe account to your site.

Step 2: Connect WordPress to Stripe  

In the setup wizard, you’ll be prompted to create a new Stripe account or connect an existing account. Click Connect with Stripe.

connect to stripe

On this page, enter your email address to create a Stripe account or connect your existing Stripe account with your site.

Keep in mind that using the Skip this form option will create a temporary Stripe account that cannot be recovered or moved to Live Mode. Unless you’re setting up WP Simple Pay on a test site, selecting the Skip this form option isn’t recommended.

create a stripe account

Upon completing this process, you’ll be shown a success page that says Setup Complete. Click on the button Create a Payment Form to create your overlay payment form.

setup complete

Step 3: Create an Overlay Payment Form

Now that you’ve connected your Stripe account with your site, it’s time to create your overlay payment form.

You need to start by choosing one of the pre-built form templates that WP Simple Pay offers. Each pre-built form template comes preselected with all the essential features you’ll need for your unique needs.

overlay form template

While you can create an overlay payment form with any template, let’s choose the Overlay Payment Form template since it preselects the features you’ll need right out of the box.

In the General settings, you can customize the title and description of your form.

overlay popup form template

The Overlay Payment Form template preselects the Type as On-site payment form, and also preselects the Open in an overlay modal checkbox.

Next, click the Payment tab on the left, where you can add, remove, or customize the price options. You can also enable multiple payment methods that are supported in your Stripe account’s country.

Now make sure you save the form as a draft by clicking Save Draft on the right-hand side.

In the Form Fields tab, you can find that several form fields are preselected for this template.

form fields overlay popup

All these form fields, except for the Payment Button field, will be used and shown on the overlay payment form. The Payment Button field is the button that your customer needs to click in order to see the overlay payment form.

Just as with any other field, feel free to customize the Payment Button text and change the Button Style per your needs.

You can also collect additional data from your customers by adding new fields to your form.

Go ahead and preview your button now by clicking the Preview button on the right. Then click your payment button to see your overlay form. If it looks good, publish the form and then make a few test payments to see if it works as intended (read more about Test mode).

Step 4: Add the Overlay Payment Form to Your Site

Now that your payment form is ready to accept payments, it’s your turn to embed your form on your website.

add-wp-simple-pay-block-to-page

To embed the form, go to the post or page where you want to publish it. Then click on the + icon to add the WP Simple Pay block. Then choose a form you just created. And then, click Publish or Update.  

That’s it! We hope this article helped you learn how to create an overlay payment form in WordPress. Get started with WP Simple Pay today to accept payments.

To read more articles like this, follow us on Facebook and Twitter.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Start Accepting Payments Today

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