Letar du efter ett sätt att lägga till en QR-kod för Stripe Payments på din WordPress website?
QR-koder, eller Quick Response Codes, är en typ av streckkod som användare kan skanna med sina mobiltelefoner. Du kan visa ett Stripe-betalningsformulär med QR-koder för att hjälpa customers att enkelt köpa en produkt eller tjänst.
I den här artikeln kommer vi att visa you hur du add to Stripe QR code payment i WordPress.
Varför add to Stripe QR Code Payment i WordPress?
Stripe är en populär betalningslösning som låter dig godkänna onlinebetalningar på din WordPress site eller i din ecommerce store. Det gör det mycket enkelt för customers att betala med sina credit cards.
Det bästa är att kunder inte behöver gå igenom en lång registreringsprocess. De kan helt enkelt ange sitt credit card på webbplatsen för att göra ett köp.
Att lägga till Stripe QR-kodbetalningar på din site ger kunderna flexibiliteten att snabbt slutföra ett köp. Customize kan helt enkelt skanna koden för att öppna länken till betalningen.
Detta gör kassaprocessen mycket enkel och snabb. Det hjälper människor att enkelt köpa en produkt och tjänst i din online store. Som ett resultat kommer du att se en ökning av konverteringar och minskade övergivna cart.
Med detta sagt, låt oss titta på hur du kan add to en Stripe QR-kod payment till din WordPress website.
Skapa ett formulär för Stripe Payment i WordPress
Först måste du add to ett Stripe betalningsformulär på din website för att godkänna onlinebetalningar från customers.
Det bästa sättet att göra det är att använda WPForms. Det är det bästa pluginet för kontaktformulär för WordPress som är superenkelt att använda och enkelt integreras med Stripe. Det finns många formulärmallar att välja mellan, och du kan customize dem med hjälp av drag and drop builder.
För denna tutorial behöver du WPForms Pro-licensen eftersom den innehåller Stripe addon. Det finns också en WPForms Lite-version som du kan använda gratis. Det allow you att godkänna Stripe-betalningar, men det finns en 3% transaktionsavgift för betalningar som görs via dina formulär.
För att börja måste du downloada och installera WPForms plugin. Om du behöver hjälp, vänligen se vår guide om hur du installerar ett plugin för WordPress.
Efter aktivering kan du gå till WPForms ” Settings från din WordPress dashboard och enter licens key. Du hittar nyckeln i ditt account area på WPForms website.
Du behöver bara enter nyckeln och clicka på knappen ”Verify Key”.
När det är gjort måste du gå till WPForms ” Addons page och installera Stripe addon.
Gå vidare och klicka på knappen ”Install Addon”, så installerar och aktiverar WPForms det automatiskt.
Härifrån kan du heada till WPForms ” Settings från WordPress adminpanel och gå till fliken ”Payments”.
Följ därefter knappen ”Connect with Stripe” och följ instruktionerna på skärmen för att ansluta ditt account till WPForms.
När Stripe har anslutits kan du gå till WPForms ” Add New för att skapa ett nytt formulär.
WPForms erbjuder många templates för formulär att välja mellan. Du kan välja ett enkelt kontaktformulär, ett orderformulär eller ett Stripe Payment-formulär och customize det.
För denna tutorial kommer vi att använda templaten ”Stripe Payment Form”.
Därefter kan du customize ditt formulär med hjälp av drag and drop form builder. Som standard ser du olika formulärfält i templaten.
WPForms låter dig dock lägga till fler formulärfält i templaten, som en dropdown, checkboxes, email, phone, address, website, och mer.
You can also click any form field on the template to customize it further.
For instance, we changed the text for each item on your demo form and activated the alternativ to show prices after the item label.
När du är klar med att edit formuläret, byter du bara till tabben ”Payments” och väljer ”Stripe” från menyn till vänster.
Härifrån ska du se till att alternativet ”Aktivera Stripe-betalningar” är aktiverat.
Därefter kan du växla till tabben Settings. Här ser du alternativ för att ändra inställningarna för notifiering och bekräftelse.
You kan till exempel selecta vilken action som ska ske när en användare submittar ett formulär. WPForms låter dig visa ett meddelande eller en page eller till och med redirecta användare till en URL.
Du är nu redo att displayed ditt Stripe betalningsformulär på din website.
Klicka bara på knappen ”Save” för att store dina ändringar och klicka sedan på knappen ”Embed” högst upp.
Därefter kommer WPForms att visa en popup där du kan välja en befintlig page eller skapa en new page för att embedda ditt formulär.
Vi kommer att välja alternativet ”Select Existing Page” för denna tutorial.
Därefter måste du enter ett namn för din new page.
När det är gjort klickar du bara på knappen ”Let’s Go”.
Efter det ser du en preview av ditt Stripe-betalningsformulär i WordPress content editor.
You can go ahead and publish the page and visit the website to see it in action.
Gå nu vidare och kopiera länken till din page med betalningsformuläret, eftersom du behöver den för att skapa en QR-kod.
Alternativ metod: Du kan också skapa ett Stripe-betalningsformulär med WP Simple Pay. Det är det bästa Stripe betalningspluginet för WordPress och hjälper dig att samla in onlinebetalningar utan att ställa in en shopping cart.
WP Simple Pay är ett mer okomplicerat alternativ än WPForms. Det är perfekt om du bara vill skapa ett grundläggande formulär för att godkänna betalningar med credit card.
Men om du letar efter fler alternativ för customize och formulärmallar rekommenderar vi att du använder WPForms.
För mer details, you can see our detailed guide on how to accept payments with Stripe in WordPress.
Add QR-kod för Stripe Payments i WordPress
Nu när ditt Stripe-betalningsformulär är klart kan du skapa en QR-kod för det och visa den var som helst på din site.
Det finns två sätt du kan add to en QR-kod till din site. Du kan använda funktionen i webbläsaren Google Chrome eller använda ett plugin för QR-kod i WordPress.
1. Skapa QR-koder med hjälp av Google Chrome
Om du använder webbläsaren Google Chrome kan du använda den för att delning av en webbsida via en QR-kod.
Först måste du öppna Stripe-sidan för betalningsformulär i en new tab eller ett nytt fönster.
Därefter kan du klicka på ikonen för delning i det övre högra hörnet av webbplatsikonens adressfält. Härifrån väljer du helt enkelt alternativet ”Skapa QR-kod”.
Efter det kommer Google Chrome att generera en QR-kod för din Stripe betalningsformulär page.
Du kan gå vidare och downloada QR-koden som en image.
Därefter är det bara att placera imagen var som helst på din site.
Du kan till exempel visa QR-koden på produktsidor så att kunderna snabbt kan skanna dem och öppna formuläret för att göra ett köp.
2. Skapa en Stripe Payment QR-kod med hjälp av ett WordPress tillägg
Du kan add QR-koder till din site med hjälp av ett WordPress plugin som gillar Shortcodes Ultimate. Det är ett gratis plugin som låter dig skapa över 50 olika typer av shortcodes, inklusive QR-koder. Du kan lära dig mer i vår detaljerade Shortcodes Ultimate review.
Först måste du installera och aktivera pluginet Shortcodes Ultimate. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett plugin för WordPress.
När du är aktiverad kommer du att se Shortcode Ultimate välkomstskärm.
Därefter måste du editera en page eller ett post för att add to din QR-kod.
När du är i content editor lägger du bara till ett shortcode block.
Efter det bör du se ett alternativ ”Insert shortcode”.
You can simply click the double brackets icon to add your QR code.
Därefter kommer pluginet att visa olika shortcode alternativ för din webbplats.
Gå vidare och välj alternativet ”QR-kod”.
Efter det ser du alternativ för att ange detaljer för din QR-kod.
I fältet Data kan du enter URL:en till ditt Stripe-betalningsformulär som du skapade tidigare.
Dessutom finns det ett alternativ att enter en titel för koden, som fungerar som en alt-text. Du kan också justera storleken på din QR-kod.
Om du rullar ner ser du fler alternativ för att customize din QR-kod. Till exempel kan du ändra primärfärg, bakgrundsfärg och mer.
När du är klar klickar du helt enkelt på knappen ”Insert shortcode”.
Pluginet låter dig också se en live preview av koden på ditt blogginlägg eller landing page.
Gå vidare och publicera din page för att se QR-koden för Stripe-betalningsformuläret i action.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du add to Stripe QR code payment i WordPress. You may also want to see our guide to WooCommerce made simple and how to accept recurring payments in WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
We started using Stripe fairly recently, based on recommendations from several articles here on WPBeginner. The QR code is a great option to simplify payment for users. Thanks for the great article. I would like to ask, is it possible to further personalize the QR code to include, for example, the company’s logo (brand)?
WPBeginner Support says
For the moment you would need another tool to customize the QR code.
Administratör
Ralph says
Paying with QR code is more and more popular. I think it is becuase of its ease of use. It’s just faster than old methods and we want to save more and more time.
I have a question – Scaning QR code with phone from laptop screen is easy, but is it also such a easy thing with smartphones themselves? I mean, i scroll website on my phone and see QR code, my phone do not recognize QR code like that, only with photo app. Is it normal or it’s just my phone and having qr code for mobile users is just as good as for desktop users?
WPBeginner Support says
It would depend on the phone, if you have not done so already you would want to try taking a screenshot with your phone.
Administratör
Ralph says
Oh, I did not think of that… Thank you for your suggestion, this should do the trick!