Payment Form Types: Embedded vs. Overlay vs. Stripe Checkout

Have you been wanting to learn more about the different payment form types?

Payment forms are one of the most important elements on your eCommerce site. They are the last point your visitors reach before they turn into customers. While well-designed payment forms will provide a frictionless checkout experience and ultimately increase conversion rates, poorly-designed payment forms will confuse visitors and lead to high checkout abandonment rates.

When it comes to displaying payment forms on your WordPress site, you have a few options.

• Embedded Forms: Forms that are displayed directly on a page on your site.
• Overlay Modal: Forms that are displayed as a popup overlay on your site.
• Hosted Payment Pages: Off-site forms that are displayed on a hosted checkout page.

In this article, we’ll go over the advantages and disadvantages of each form type to help you decide which is best for your site.

Payment Form Display Options

If you use WP Simple Pay, the #1 Stripe payments plugin for WordPress, to accept payments on your site, you can select your preferred form type in the General tab of the payment form builder.

You can choose On-site payment form, Off-site Stripe Checkout form, or check the box for Open in an overlay modal.

Keep in mind that these settings apply to each form. You can have multiple payment forms on your site that display differently. WP Simple Pay makes it easy for you to adjust the form Type for individual payment forms in the form builder.

Embedded Payment 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:

You can embed a payment form anywhere you like on a page. You might decide to float it to the side of your page’s copy, place 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 Payment Element 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 Payment Form

Overlay payment forms appear when a user clicks on a call-to-action button on a page on your site, usually it says something like, “Buy Now” or “Checkout Now.”

Once the form is active, everything else on the page is inaccessible unless they close the form.

Lägg märke till hur resten av sidan mörknas, så att du kan fokusera på betalningsformuläret.

Fördelar med överlagringsformulär

• Det går inte att missa eftersom de visas mitt på skärmen. Resten av sidan mörknas för att indikera att den är otillgänglig.
• They can be styled or rearranged however you like.
• I WP Simple Pay använder de Stripe Payment Element för att tillhandahålla realtidsvalidering och säkert samla in betalningsuppgifter.

Nackdelar med överlagringsformulär

• Vissa användare gillar helt enkelt inte popup-fönster av något slag och stänger dem omedelbart.
• Användare måste klicka på en knapp för att överlagringen ska visas.
• Användare kanske inte märker betalknappen om den inte görs tillräckligt tydlig.
• De skapar ett ytterligare steg där användare kan avbryta köpprocessen.

Stripe Checkout betalningsformulär

Stripe Checkout är en sida som hanteras av Stripes Checkout-tjänst. Användare tas till en ny sida på Stripes domän. Deras orderinformation visas till vänster. Ett typiskt betalningsformulär visas till höger.

Du kan se en live-demo här. Stripe Checkout-sidan kan inte anpassas ytterligare än vad som visas på den här sidan eftersom den styrs av Stripe. Om du behöver en högre grad av anpassning måste du välja ett inbäddat formulär eller ett överlagringsformulär.

För att anpassa detta formulär kan du enkelt göra det genom att navigera till fliken Stripe Checkout i WP Simple Pay. Här kan du konfigurera alla tillgängliga alternativ för Stripe-hanterade kassasidor.

Om du vill ändra färgen på Stripe Checkout-bakgrunden och betalknappen måste du ändra färgen i avsnittet Varumärke i din Stripe Dashboard. Du kan enkelt komma åt den här sidan direkt från fliken Stripe Checkout genom att helt enkelt klicka på länken Varumärkesinställningar.

Vill du lägga till anpassade fält i ditt Stripe Checkout betalningsformulär? Se vår steg-för-steg-guide.

Fördelar med Stripe Checkout

• Många människor litar på Stripe, vilket förbättrar konverteringar när de ser Stripe-logotypen.
• Stripes sida är ren och enkel. Det finns inget som distraherar användarna från att köpa.
• Användare omdirigeras tillbaka till din webbplats efter att ha slutfört sitt köp.
• Apple Pay och Google Pay är aktiverade som standard, så användare kan betala med sin föredragna betalningsmetod.

Nackdelar med Stripe Checkout

• Användare skickas till en ny sida, vilket kan vara förvirrande.
• Användare kanske inte märker betalknappen om den inte görs uppenbar.

Vilken typ av betalningsformulär är rätt för dig?

Nu när du förstår de tre olika visningsalternativen för betalningsformulär måste du bestämma vilket som är rätt för din webbplats.

Funktionellt sett finns det ingen skillnad mellan det inbäddade formuläret och överlagringsformuläret. Överlagringsformuläret är helt enkelt inbäddat i ett element som bara visas när användaren klickar på en knapp. Samma formulär, annan plats.

Stripe Checkout fungerar lite annorlunda eftersom det visas på en annan sida. Men i slutändan gör de alla samma sak: Acceptera pengar från kunden och sätta in dem på ditt konto.

Så, när du väljer ett visningsalternativ för betalningsformulär, måste du ta hänsyn till två faktorer:

1. Din webbplats design

Vilken typ av formulär ser bäst ut på din webbplats? Har du utrymme att bädda in ett formulär på en av dina landningssidor, eller skulle det röran till sidan? Om du har en befintlig landningssida utan utrymme för ett betalningsformulär är det oftast renare att lägga till ett överlägg.

Tänk på att du kan lägga till ditt betalningsformulär var som helst på din webbplats, inte bara i innehållsområdet på en sida eller ett inlägg. Du kan också inkludera det i din sidfot, sidofält eller sidhuvud.

Till exempel lägger många ideella organisationer och välgörenhetsorganisationer till en donationsknapp i sitt sidhuvud, vilket gör det möjligt för besökare att donera från vilken sida som helst.

2. Konverteringsoptimering

Fundera sedan på vilken typ av formulär som kommer att uppmuntra flest konverteringar. Fråga dig själv vilken typ av formulär dina kunder mest sannolikt kommer att interagera med. Du kan behöva göra lite kundundersökningar.

Sanningen är att det bästa sättet att avgöra vilken typ av formulär som maximerar konverteringar är att testa dem mot varandra. Du kan installera ett A/B-testningsplugin för att visa en version av din landningssida för hälften av din trafik och en andra version för den andra hälften. Varje sida bör ha en annan visningstyp för betalningsformuläret. Om du har mycket trafik kan du testa alla tre versioner samtidigt. Granska sedan resultaten efter 30-60 dagar.

Slutliga tankar

Nu när du förstår de tre olika typerna av betalningsformulär som du kan använda på din webbplats, välj den som är rätt för din verksamhet och dina kunder.

Tänk noga igenom detta beslut. Det kanske bara är ett formulär, men det representerar en betydande punkt i din relation med dina kunder.

Om du gillade den här artikeln kanske du också vill kolla in våra guider om hur du optimerar dina produktsidor för att öka försäljningen och hur du skapar perfekta betalningsformulär i WordPress.

Vad väntar du på? Kom igång med WP Simple Pay idag!

För att läsa fler artiklar som denna, följ oss på X.