Vill du lägga till en Stripe-donationsknapp till din WordPress-sajt? Stripe gör det enkelt att acceptera kreditkortsbetalningar, vilket är ett bekvämt sätt för dina besökare att donera till din webbplats.

Medan det finns gott om mer fullfjädrade donationsplugin, kommer vi bara att fokusera på att skapa en mycket enkel Stripe-donationsknapp i det här inlägget. Vi kommer prata om två olika gratisplugin som kan göra detta.

  • WP Simple Pay: detta plugin är bra om du vill erbjuda ett fast donationsbelopp. Men du måste betala om du vill att dina besökare ska kunna donera egna belopp. Det här det mest populära Stripe Payment-pluginet.
  • Stripe Payments: detta plugin låter dig acceptera valfria donationsbelopp gratis, vilket kan göra det mer attraktivt om du har en budget och vill acceptera egna donationsbelopp från dina besökare.

Vi börjar med en snabb handledning om hur du skapar ditt Stripe-konto och hittar API-nycklarna som du behöver för att konfigurera det plugin du väljer.

Sedan ska vi gå igenom hur man skapar en Stripe-donationsknapp med WP Simple Pay eller Stripe Payments.

Så hittar du dina Stripe API-nycklar

Oavsett vilket av de två pluginen du väljer måste du ange dina Stripe API-nycklar för att skapa din Stripe-donationsknapp.

Dessa API-nycklar är vad som ansluter din WordPress-sajt till Stripes betalningsbearbetningstjänst. De är viktiga, men de är också lätta att skapa med Stripe. Så oroa dig inte!

I stället för att försöka förklara detta steg för steg för varje plugin, ska vi bara förklara det en gång nu direkt. På så sätt vet du exakt var du hittar dina API-nycklar när du konfigurerar pluginet du väljer.

Steg 1: Skapa ett gratis Stripe-konto

För att komma igång måste du registrera dig för ett gratis Stripe-konto. Det krävs ingen komplicerad information – du behöver bara ange din mejladress, ditt namn och ditt lösenord (du kommer dock behöva ge mer information för att börja acceptera betalningar på riktigt).

För att göra det, gå hit.

Steg 2: Hitta API-nycklar

För att hitta dina API-nycklar, gå hit.

Var uppmärksam på skillnaden mellan test API-nycklar och live API-nycklar:

  • Test API-nycklar hjälper dig att säkert testa din donationsknapp utan att skicka några riktiga betalningsuppgifter.
  • Live API-nycklar är till för att faktiskt börja acceptera betalningar på riktigt.

Du kan växla mellan dem genom att klicka på växlingsknappen, och båda pluginen kommer att innehålla rutor för att låta dig ange både dina test och live-nycklar, samt en inställning som låter dig växla mellan test och live-lägen:

Dina Stripe API-nycklar
Dina Stripe API-nycklar

Ha dessa nycklar till hands, eftersom du behöver dem för att konfigurera pluginet.

Så lägger du till en Stripe-donationsknapp med WP Simple Pay

För att komma igång, installera och aktivera gratispluginet WP Simple Pay från WordPress.org.

Så här ställer du in din donationsknapp…

Steg 1: Ange API-nycklar

För att komma igång, gå till Simple Pay Lite → Inställningar och ange dina test och live API-nycklar. Se till att Testläge är Aktiverat så länge.

Ange API-nycklarna och se till att testläget är aktiverat
Ange API-nycklarna och se till att testläget är aktiverat

Steg 2: Konfigurera valuta (Standard är USD)

Som standard använder WP Simple Pay USD som valuta för din donationsknapp. Om du vill använda en annan valuta kan du ändra den genom att gå till Allmänt-fliken i Inställningar:

Så ändrar du valutan
Så ändrar du valutan

Steg 3: Skapa nytt betalningsformulär

Ett Betalningsformulär är i princip den specifika donationsknapp du vill använda. För att skapa en, gå till Simple Pay Lite → Lägg till ny.

I betalningsalternativ, ange det belopp som du vill att besökare ska kunna donera (om du vill att besökare ska kunna donera sitt eget anpassade belopp, kommer du behöva den betalda versionen av  pluginet):

Ange det fasta donationsbeloppet
Ange det fasta donationsbeloppet

Det är allt du teknisk måste göra. Men för att erbjuda ett mer personlig formulär kan du ändra texten som visas på formuläret i Formulär på sidan och Kassadisplay -flikarna.

Till exempel i Formulär på sidan kan du ändra texten så att knappen säger ”donera med kort” istället för ”betala med kort”:

Ändra donationsknappens text
Ändra donationsknappens text

När du är klar klickar du på Skapa för att publicera ditt formulär.

För att visa ditt formulär på din webbplats måste du lägga till kortkoden till inlägget, sidan eller text-widgeten där du vill att den ska visas:

WP Simple Pays kortkod
WP Simple Pays kortkod

Steg 4: Testa ditt formulär och aktivera live-läget

Eftersom du har testläge aktiverat kan du testa formuläret genom att skriva in lite testdata:

Exempel på donationsknapp
Exempel på donationsknapp

När du är nöjd med hur allt fungerar kan du aktivera live-läget för att börja acceptera riktiga betalningar genom att gå till Simple Pay Lite → Inställningar och inaktivera Test-läge:

Inaktivera test-läge
Inaktivera test-läge

Och om du vill redigera sidan som användarna ser efter att de har skickat in en betalning behöver du bara redigera Betalningsbekräftelse-sidan som WP Simple Pay skapat.

Så lägger du till en Stripe-donationsknapp med Stripe Payments

Medan Stripe Payment inte är lika populärt som WP Simple Pay, är dess fördel att du kan acceptera anpassade donationsbelopp utan att behöva betala för en premiumversion.

När du har installerat och aktiverat det från WordPress.org använder du det så här…

Steg 1: Lägg till API-nycklar och konfigurera grundläggande inställningar

För att komma igång, gå till Stripe Payments → Inställningar för att lägga till dina API-nycklar:

Så här anger du dina API-nycklar
Så här anger du dina API-nycklar

Se till att live-läget inte är på ännu.

Du kan också konfigurera valutan för din donationsknapp i detta område, liksom knapptexten. Du kommer säkert att vilja ändra Knapptexten till något som ”donera”:

Konfigurera valuta och knapptext
Konfigurera valuta och knapptext

Steg 2: Lägg till ny produkt

Gå sedan till Stripe Payments → Lägg till ny produkt. Det finns många alternativ, men de flesta är onödiga för en grundläggande donationsknapp.

De avsnitt som du ska konfigurera är:

  • Kort beskrivning – detta visas i Stripe Payments-fönstret.
  • Pris & Valuta – lämna Pris tomt om du vill att besökare ska kunna ange ett anpassat belopp.
  • Webbadress till tacksidan– det här låter dig omdirigera användare till en speciell tacksida efter att de donerat.
Välj fast eller anpassat donationsbelopp
Välj fast eller anpassat donationsbelopp

När du har konfigurerat allt klickar du på Publicera. Kopiera sedan kortkoden från längst ner av redigeraren och lägg till den i inlägget, sidan eller textwidgeten där du vill visa din Stripe-donationsknapp.

Steg 3: Testa donationsknappen och gå sedan live.

Eftersom du fortfarande är i testläge kan du tryggt testa din donationsknapp genom att ange Stripes låtsasuppgifter:

Exempel på formulär för anpassad donation
Exempel på formulär för anpassad donation

När du har verifierat att allt fungerar korrekt kan du aktivera riktiga betalningar genom att gå till Stripe Payments → Inställningar och slå på Live-läge:

Inaktivera test-läge
Inaktivera test-läge

Sammanfattning

Oavsett vilket plugin du väljer är det ganska enkel och smidigt att lägga till en Stripe-donationsknapp till din WordPress-sajt. Båda pluginen låter dig också skapa flera knappar, så att du enkelt kan skapa olika donationsknappar för olika användningsområden.

Om du inte är nöjd med Stripe efter att ha skapat din egen knapp, kan du också överväga att acceptera donationer via PayPal eller Bitcoin. I den här guiden samlade vi alla fördelar och nackdelar med Stripe och PayPal.

Har du några andra frågor om att lägga till en donationsknapp till din WordPress-sajt? Eller behöver du andra funktioner som vi inte gick igenom? Lämna en kommentar så ska vi försöka hjälpa till!

Brian Jackson

Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.