Payment Forms: Embedded vs. Overlay vs. Stripe Checkout

Your payment form is one of the most important elements on your ecommerce website. It represents the point where a user becomes a customer. A well-designed payment form will boost conversions and ultimately serve your business goals. A poorly designed payment form will confuse and frustrate users.

When it comes to displaying payment forms on your site, you have a few options. You can embed the form on a page, display it as a popup overlay, or send users to a checkout page hosted by your payment processor. (In the case of WP Simple Pay users, that payment processor is Stripe.)

In this article, we’d like to discuss the advantages and disadvantages of each form display method. Then we’ll help you decide which is right for your website.

Form Display Options

If you use WP Simple Pay to handle your website’s payments, you can select your preferred form display in the Form Display Options tab. Choose embedded, overlay, or Stripe Checkout. Additional tabs will appear depending on your choice.

Keep in mind that these settings apply to each form. You can have multiple payment forms on your website that display differently. You’ll just need to adjust the Form Display Options in each form’s settings.

Embedded Form

An embedded form is part of a web page. It displays all fields on the page itself. Users don’t have to click anything to make the form appear or navigate to it because it’s always apparent. Here’s an example. Notice how it’s directly inside the page’s content.

You can embed a payment form anywhere you like on a page. You might float it to the side of your page’s copy, sit it on top of a compelling image, or drop it in your sidebar.

Advantages of Embedded Forms

• Users can find them quickly because they’re right on the page.
• Users don’t have to take any extra steps to access them.
• They can be styled or rearranged however you like.
• In WP Simple Pay, they utilize Stripe Elements to provide real-time validation and securely collect payment details.

Disadvantages of Embedded Forms

• They take up space on the page you might want to use for other elements.
• They load immediately, which could slow down your page load time.
• They’re possible to miss if you have a lot of things happening on the page.
• Users may grow distracted and navigate away before using the form.

Overlay Form

An overlay form appears when a user clicks a button on the page to launch it. Once the form is active, everything else on the page is inaccessible unless they close the form.

Advantages of Overlay Forms

• It’s impossible to miss because they appear front-and-center. The rest of the page goes dark to indicate that it’s unavailable.
• They can be styled or rearranged however you like.
• In WP Simple Pay, they utilize Stripe Elements to provide real-time validation and securely collect payment details.

Disadvantages of Overlay Forms

Some users just don’t like popups of any kind and will close it immediately.
Users have to click a button to make the overlay appear.
Users may not notice the payment button if it’s not made obvious.
They create an additional step where users might abandon the checkout experience.

Stripe Checkout

Stripe Checkout is a page served by Stripe’s checkout service. Users are taken to a new page on Stripe’s domain. Their order information is shown on the left. A typical payment form appears on the right.

See a live demo here. The Stripe Checkout page cannot be customized further than seen on this page as it’s controlled by Stripe. If you need a higher level of customization, opt for an embedded or overlay form.

To customize this form, visit the Stripe Checkout Display tab in WP Simple Pay. Here is where you can configure all options available on Stripe-hosted checkout pages.

If you want to change the color of the Stripe Checkout background and payment button, you’ll need to change the color in the account branding section of your Stripe Dashboard.

If you want to add custom fields (such as options, a datepicker, comment field, etc.), they will appear on a separate on-page form. This creates a two-step workflow for the user. Once they submit the first form, they’ll be directed to the Stripe Checkout page.

Advantages of Stripe Checkout

• Lots of people trust Stripe, which improves conversions when they see the Stripe logo.
• Stripe’s page is clean and simple. There’s nothing to distract users from purchasing.
• Users are redirected back to your website after completing their purchase.
• Apple Pay and Google Pay are enabled by default, so users can pay with their preferred payment method.

Disadvantages of Stripe Checkout

• Users are sent to a new page, which can be confusing.
• The Stripe Checkout page doesn’t have many customization options.
• Users may not notice the payment button if it’s not made obvious.

Which Payment Form Is Right for You?

Now that you understand the three options, you’ll need to decide which is right for your website.

Functionally, there’s no difference between the embedded form and overlay form. The overlay form is simply embedded into an element that only appears when the user clicks. Same form, different location. Stripe Checkout functions a bit differently because it appears on another page. But ultimately they all do the same thing: Take money from the customer and put it in your account.

So when you choose a payment form display option, you’ll need to consider two factors:

1. Your Site’s Design

Which type of form looks best on your website? Do you have room to embed a form on one of your landing pages, or would that clutter the page? If you have an existing landing page without space for a payment form, adding an overlay is usually cleaner.

Keep in mind that you can add your payment form to any spot on your website, not just the content area of a page or a post. You can also include it in your footer, sidebar, or header. For instance, many nonprofits and charities add a donation button to their header so visitors can donate from any page.

If you don’t have any experience editing your WordPress theme, an embedded form may be challenging for you because of how it will change the page. An overlay form or Stripe Checkout only adds a button to the page, which won’t affect the design much.

2. Conversion Optimization

Next, consider which type of form will encourage the most conversions. Ask yourself which type of form your customers are most likely to interact with. You may have to do some customer research here. Call a few customers you trust and ask which type of form they prefer.

Truthfully, the best way to determine which type of form will maximize conversions is to test them against each other. Install an A/B testing plugin (there are many) to show one version of your landing page to half your traffic and a second version to the other half. Each page should have a different form. (If you have a lot of traffic, you can test all three versions at once.) Review the results after 30-60 days.

Ultimately, the type of payment form you choose won’t have a huge impact on your conversions. But if you have a lot of sales, a 1% or 2% boost could represent a lot of revenue.

Going Forward

Now that you understand the three types of payment forms you can use on your website, choose the one that’s right for your business and your customer. Think carefully about this decision. It may just be a form, but it represents a significant point in your relationship with your customers.