PaysonCheckout 2.0 för WooCommerce

Introduktion

PaysonCheckout 2.0 är en betalmodul som låter dig ta betalt via Paysons nya betalsystem PaysonCheckout 2.0 i din Woocommerce-butik.

I PaysonCheckout 2.0 har Payson slopat alla extra steg i kassan. Betalfönstret är direkt integrerat i din e-butik där kunderna kan betala med ett enda klick. Alla köp baseras på tjänsten Faktura via e-post. Därefter kan kunden välja att få hem varan och betala i efterhand eller betala fakturan direkt vid köpet, exempelvis med kort, internetbank eller sms.

Begränsningar i funktionalitet

PaysonCheckout 2.0 är en inbäddad kassa, en checkout-lösning som i stor utsträckning ersätter standardkassan i WooCommerce. Detta upplägg innebär ett enkelt sätt för kunden att slutföra köpet och ett smidigt sätt för e-handlaren att erbjuda flera betalsätt i samma lösning.

En inbäddad kassa innebär samtidigt vissa begränsningar i funktionalitet. Kompatibilitet med andra plugins som utökar funktionaliteten i kassan är begränsad. Exempel på funktioner som inte stöds i nuvarande version av modulen är:

  • Val av leveransdatum.
  • Extra kassafält utöver ordinarie faktura- och leveransadresser.
  • Prenumerationsanmälan till nyhetsbrev.
  • Skapa konto i samband med order där kunden själv kan välja användarnamn och lösenord (detta kan dock genereras automatiskt i WooCommerce).

Om du undrar över orsaken till detta kan du läsa mer om det i en artikel vi har skrivit här.

Konto hos Payson

För att komma igång med PaysonCheckout 2.0 behöver du ett konto (med fakturaköp aktiverat). Om du inte har ett konto idag kan du öppna ett här. Payson lovar att du är igång inom 24 timmar.

Testkonto

Om du vill testa modulen före du gör riktiga köp så kan du skapa ett testkonto här.

Tillsammans med de uppgifter du får från Payson behöver du även aktivera Testmode i modulen för att kunna göra testköp.

För att göra testköp behöver du även använda testuppgifter som kund i kassan. Använd personnummer 4605092222 och postnummer 99999 för att göra ett vanligt testköp.

Om du behöver uppgifter för kortköp kan du använda följande testkort:
Kortnummer: 4581 1111 1111 1112
Datum: Valfritt
CVC: Mellan 100-500

Installation

  1. Logga in i WordPress Admin. Navigera till → PluginsLägg till nytt i vänstermenyn.
  2. Klicka på Ladda upp tillägg och därefter Välj fil för att bläddra dig fram till zip-filen på din dator. Klicka därefter på OK och slutlingen på knappen Installera nu.
  3. Aktivera pluginet.

Obligatoriska inställningar i WordPress

För att callback-funktionen (kommunikationen från Payson tillbaka till din butik) ska fungera så behöver du tänka på följande:

  • Permalänksinställningarna får inte vara inställd på Enkel. Något av de övriga alternativen måste väljas (mod_rewrite behöver vara aktiverat, annars genererar callbacken från Payson en 404).
  • Callbacks fungerar inte om du har en testmiljö som ej är publikt nåbar. Om du jobbar i en lokal utvecklingsmiljö rekommenderar vi att du använder dig av en tjänst som ngrok eller liknande.
  • I vissa fall kan brandväggar och säkerhetsplugin (som exempelvis Wordfence) blockera externa server-till-server-anrop. Testa att tillfälligt avaktivera den här typen av plugin om du har problem med callbacks.

Valuta med två decimaler

För att priser och momssatser på produkter ska skickas över korrekt från WooCommerce till Payson behöver du i valutainställningarna i WooCommerce ange att din butik ska visa valuta med två (2) decimaler. Detta gör du under → WooCommerce → Inställningar och fliken Generellt.

Om du inte gillar upplägget att visa heltalspriser med 2 decimaler (dvs 200,00 kr) så kan du undvika det (dvs visa det som 200 kr) genom följande kodsnutt:

Mer info om orsaken till varför man behöver ange priser med två decimaler hittar du i vår bloggpost här.

 

Konfiguration

  1. Navigera till → WooCommerce → Inställningar → Kassan.
  2. Nu visas Payson som tillgänglig betalmetod i den horisontella menyn högst upp. Klicka på denna länk för att komma till inställningssidan för betalmetoden.
  3. Enable/disable – Kryssa i checkboxen om du vill att betalmetoden ska vara tillgänglig i kassan.
  4. Title – Här anger du titeln för betalmetoden som visas i kassan och i orderbekräftelser.
  5. Description – Här anger du beskrivning av betalmetoden som visas i kassan.
  6. Merchant ID – Ditt Merchant ID som du fått från Payson.
  7. API Key– Din API Key som du fått från Payson.
  8. Testmode – Kryssa i checkboxen om du gör köp med ett testkonto.
  9. Enable Order Management – Kryssa i checkboxen om du vill aktivera orderhantering i Payson direkt från WooCommerce, dvs att transaktionen avbryts i Payson när orderstatus ändras från Behandlas till Avbruten och transaktionen slutförs i Payson (och fakturan skickas om det är fråga om ett fakturaköp) när orderstatus ändras från Behandlas till Färdigbehandlad.
  10. Color Scheme – Välj bland de olika färgscheman för kassan som Payson tillhandahåller.
  11. Request phone – kryssa i den här rutan om du vill att kunden måste fylla i sitt telefonnummer i samband med köp.
  12. Mobile threshold – Hjälper till att flytta Payson-kassan till rätt ställe på kassasidan med hjälp av javascript. Om ditt tema har en kassa i två kolumner kan du specificera brytpunkten i antalet pixlar (men utan enheten px, dvs ex. 767) där kassans layout ändras från två kolumner till en kolumn. Lämna fältet tomt för att avaktivera den här funktionen. Temat Storefront och kassasidor med enkolumnlayout behöver inte använda denna funktion.
  13. Debug log – Logga händelser i modulen. Loggen hittar du genom att navigera till → WooCommerce → Systemstatus → Loggar.

Orderflödet i pluginet

Eftersom PaysonCheckout 2.0 är en inbäddad kassa så behöver orderdata skickas från WooCommerce till Payson före kassasidan renderas. Så som logiken i pluginet är gjort nu så innebär det att en order även skapas i WooCommerce i samband med att Payson-kassan visas första gången.

Orderprocessen ser ut på följande vis:

  1. Kassasidan i WooCommerce anropas.
  2. Om PaysonCheckout 2.0 är det förvalda betalsättet skapas en order i WooCommerce med orderstatusen payson-incomplete.
  3. Information om ordern/varukorgen skickas till Payson.
  4. Payson returnerar info om den pågående transaktionen samt själva Payson-kassan (som en html-sträng).
  5. Kassasidan renderas och PaysonCheckout-kassan visas.
  6. Kunden identifierar sig i Paysons kassa.
  7. Ett anrop skickas från Payson till webbutiken innehållande kundens adressuppgifter. Dessa uppgifter sparas i ordern och orderstatus ändras nu i WooCommerce till status Inväntar betalning (Pending). I detta läge dyker den upp i WooCommerce ordervy men är ännu inte betald.
  8. Om uppdateringen av land/postnummer innebär en ändring av ex fraktkostnad så uppdateras varukorgen/ordern i WooCommerce och transaktionen i Paysons system.
  9. När kunden klickar på Betala i Paysons kassa laddas kassasidan om och pluginet processar ordern i WooCommerce (inklusive att posta WooCommerce’s eget kassaformulär).
  10. Orderstatus ändras till Behandlas (Processing) i WooCommerce och ett mail med orderbekräftelse skickas från WooCommerce till kund.

Vad händer om en kund inte genomför köpet?

Om en kund har identifierat sig i Paysons kassa men sedan väljer att inte genomföra köpet, då kommer ordern att ligga kvar i WooCommerce med status Inväntar betalning. Om du har har aktiverat funktionen Reservera lagersaldo i WooCommerce inställningar (–> WooCommerce –> Inställningar –> Produkter –> Lagersaldo) så kan orderstatus automatiskt ändras till Avbruten efter det antal minuter du anger i inställningarna. Om du inte har aktiverat funktionen Reservera lagersaldo kommer ordern att ligga kvar med orderstatus Inväntar betalning ända tills att du själv manuellt ändrar eller raderar den.

Orderhantering

När en orderhar skapats i WooCommerce och en reservation/transaktionsnummer existerar i Paysons system har du möjlighet att styra orderhanteringen i Payson direkt från WooCommerce. För tillfället finns stöd för att avbryta en order och aktivera en order. Returer/återbetalningar finns det för tillfället inte stöd för.

Förutsättningar för att komma igång med orderhantering

För att komma igång med orderhantering behöver du aktivera inställningen Enable order management i modulens inställningar.

Avbryt en order

  1. Orderstatus i WooCommerce behöver vara satt till Behandlas och ett transaktions-id behöver ha sparats i ordern.
  2. Navigera till den order du ska avbryta genom att navigera till → WooCommerce → Ordrar och klicka därefter på den order du vill ändra.
  3. I metaboxen Orderdetaljer finns det en selectbox med benämningen Orderstatus. Ändra denna status till Avbruten.
  4. Klicka på knappen Uppdatera i högra övre hörnet av skärmen.
  5. Om allt gått bra så skapas en ordernotering som säger PaysonCheckout reservation was successfully cancelled.

Aktivera en order

  • Orderstatus i WooCommerce behöver vara satt till Behandlas och ett transaktions-id behöver ha sparats i ordern.
  • Navigera till den order du ska avbryta genom att navigera till → WooCommerce → Ordrar och klicka därefter på den order du vill ändra.
  • I metaboxen Orderdetaljer finns det en selectbox med benämningen Orderstatus. Ändra denna status till Färdigbehandlad.
  • Klicka på knappen Uppdatera i högra övre hörnet av skärmen.
  • Om allt gått bra så skapas en ordernotering som säger PaysonCheckout reservation was successfully activated.

Felsökning

Om kassan inte visas efter att du har följt instruktionerna (och du inte får upp något felmeddelande i kassan) så rekommenderar vi att du tillfälligt sätter WP_DEBUG till true i wp-config.php. Läs mer om debugging i WordPress här. Därefter kan du rapportera in felet till oss så hjälper vi dig vidare.

Kompabilitet med andra teman och tillägg

Betalfönstret för PaysonCheckout 2.0 integreras/visas direkt i din webbutik via en iframe-lösning, liknande den som Klarna Checkout erbjuder. Till skillnad från Klarna Checkout har vi med PaysonCheckout 2.0 inkluderat betalfönstret i WooCommerce’s ordinarie kassasida. Detta innebär att visningen av iframen kan variera mellan olika teman. I vissa teman kommer visningen att se konstig eller felaktig ut. Detta beror på att markupen i temat skiljer sig från WooCommerce’s ordinarie markup.

Modulen är testad med följande WooCommerce-specifika teman:

Om ditt tema eller tillägg inte är listade här så rekommenderar vi er att testa detta innan ni använder tillägget i er live-butik. Om det behövs speciella ändringar för ert tema så ta kontakt med utvecklarna av er butik.

Vi på Krokedil erbjuder EJ hjälp med att anpassa ert tema eller tillägg inom ordinarie support.

Hur kan jag justera eventuella problem med visningen själv?

Om Payson-kassa inte visas korrekt tillsammans med det tema du använder kan man utgå från markupen som finns i WooCommerce’s egen template-fil för kassan. Jämför namnen på classerna där med de i ditt eget tema.

Vi utgår från följande class-namn som ska visas och döljas beroende på om PaysonCheckout 2.0 är det valda betalsättet eller inte:

#customer_details,
#order_review_heading,
#order_review,
.woo-shipping,
.woo-billing,
.checkout-sidebar,
.order-review

Payson-pluginet lägger även till en body-class som kan användas. Denna class är .paysoncheckout-selected om PaysonCheckout är det valda betalsättet och .paysoncheckout-deselected och Payson Checkout inte är det valda betalsättet.

Om ditt tema exempelvis har en class kallad .customer-info som är en container för faktura- och leveransadressfälten, då skulle CSS-koden kunna se ut på följande sätt för att visa/dölja fälten beroende på om Paysoncheckout är det valda betalsättet eller inte:

.customer-info {
   display: none;
}
.paysoncheckout-deselected .customer-info {
   display: block;
}