Style dit betalingsvindue

Ønsker du at benytte et unikt tilpasset betalingsvindue til din webshop (f.eks. hvis du har flere end en webshop, der kører over samme løsning), så er det muligt at oprette ekstra betalingsvinduer. 

Prisen pr ekstra betalingsvindue er 19 kr./md. Du skal kontakte os på support@pensopay.com for at få ekstra betalingsvinduer føjet til din aftale. 

Der er flere forskellige muligheder for at style dit betalingsvindue.

Det er desværre ikke muligt at lave ekstra betalingsvinduer til Shopify. 

Logo:

Står du med to webshops kan du tilføje et brandet vindue til din shopløsning, så du kan brugerdefinere det logo, der vises på betalingssiden. 

Det gøres ved, at man tilføjer et billede, og redigerer lidt kode. 

Se step-by-step nedenfor: 

1. Opret en ny branding i QuickPay Manager under Settings > Brandings > vælg PensoPay skabelon (det er vigtigt at i opretter en kopi af PensoPay vinduet og ikke vælger standard, da i ellers ikke vil have alle features med i betalingsvinduet)
2. Gå ind på den nyoprettede branding og klik nu på menu-knappen øverst i højre hjørne. Klik nu Upload ny fil
   
3. Du vil blive prompted til at navngive den uploadede fil. Her er det VIGTIGT, at du følger nedenstående eksempel på trods af, hvad filen ellers hedder.
    
   Dvs.: images/logonavn.png 
   
   Navnet SKAL starte ud med 'images/'
   'Logonavn' kan være hvad som helst, og behøver ikke at følge, hvad filen ellers hedder. Navnet på shoppen kunne give mening her f.eks.
   Filtypen behøver ikke at være .png , men kan godt være .jpg i stedet. Det skal blot følge filtypen på den uploadede fil.
4. Kopier nu dette navn og paste det et sted (i en note eller dets lige) til senere brug  og tryk 'Save'.
   
   
5. Find nu filen ‘templates/layout.liquid’ og 'Edit' den.
   I koden her skal du slette linje 5-9.
6. kopier kodestykket nedenfor,
   <img src={{images.demologo.png}} alt="{{ model.displayname }}">
   
   - og indsæt det i linje 5 som vist på billedet herunder. 
   
    

   

    

7. Stadig i linje 5 skal du nu erstatte "images.demologo.png" med det navn du gav det billede du uploadede tidligere i guiden.
8. Gem og preview brandingen.

Brug af egen font:

Benytter du dig af en bestemt font på din webshop? Vil du gerne videreføre denne font i betalingsvinduet? Det kan du via vores brandingmulighed. Vi understøtter TTF og Woff/Woff2 fonte. Når du har fundet den font, du vil bruge i dit betalingsvindue, skal du downloade den. Nedenfor er der en step-by-step guide til, hvordan du opsætter din font i branding:

Step 1:

Tilgå QuickPay Manageren, herefter tilgår du Settings --> Brandings --> vælg PensoPay skabelon (det er vigtigt at i opretter en kopi af PensoPay vinduet og ikke vælger standard, da i ellers ikke vil have alle features med i betalingsvinduet)

Step 2:

Tilgå den branding, som du ønsker at anvende din font på

Step 3:

Klik på de tre prikker øverste i højre hjørne (menu-knappen) og vælg "Upload new file"

Step 4:

Nu skal du vælge font-filen. Når du har valgt filen, skal du klikke "Ok". Herefter skal du angive en "sti" foran filnavnet. Det lyder kompliceret, men du skal faktisk blot skrive "fonts/" foran filnavnet, så har du angivet en sti. Som du kan se, har vi valgt en font der hedder "Lobster Regular".

Du kan se et eksempel på dette nedenfor:

Step 5:

Her skal du finde filen "stylesheets/paymentwindow.css" --> klik på "Edit"

Herefter indsætter du følgende kode i filen:

@font-face {
    font-family: Lobster-Regular,;
    src: url(../fonts/filnavn.ttf);
}

Step 6:

Nu skal du finde følgende i koden:

body, td {
  font-family: arial, tahoma, verdana, sans-serif;
}

Herefter skal du tilføje navnet på din font, således koden ser således ud:

body, td {
  font-family: Lobster-Regular, arial, tahoma, verdana, sans-serif;
}

Step 7:

Tryk på "Save". Du har nu indsat din egen font i betalingsvinduet. Dette er nu synligt for dine kunder.

Hvis du klikker på "Back to branding", dernæst "Preview" ud fra den branding du lige har indsat din nye font i, kan du se hvordan betalingsvinduet ser ud med din font.

Branding config (ændring af elementer)

Med Branding config kan du ændre visse elementer i betalingsvinduet. I det følgende kommer vi ind på nogle af de elementer, som du kan tilpasse.

Du ændrer branding config via betalings-request eller ved at oprette en branding.

OBS: Shopify undersøtter endnu ikke branding config - dette skal dermed sættes igennem branding.

Betalings-request

Ved oprettelsen af "form-kaldet" eller betalingslink skal følgende sendes med:

branding_config[enable_3d_card_field] => true

Default branding configs

Du har også mulighed for, at definere indstillingerne således de bruges på den standard (default) branding man har valgt.

Dette gør du ved at tilgå Settings > Brandings > Default branding configs. Herefter skulle du gerne se et vindue, der ligner dette:

Her kan man vælge forskellige indstillinger, du kan fx.:

• Tilføje et felt med kortholders navn i betalingsvinduet
• Kortholder aktivering af 3D Secure
• Bestem titlen i browser
• Autojump

Tilføj felt til kortholders navn

Ønsker du f.eks. at kortholder skal indtaste sit navn i betalingsvinduet, kan du aktiverer dette ved at enable "add chardholder input field":

branding_config[enable_card_holder_field] => true

Med andre ord aktiverer du dette ved, at enable funktionen, således:

Herefter vil der automatisk komme et felt, hvori kortholder kan indtaste sit navn.

Du kan finde kortholdernavne under: 

metadata > issued_to

Muliggør at kortholder kan aktivere af 3D Secure

Ønsker man, at kunden skal have mulighed for, at tvinge betalingen gennem 3D Secure, kan dette gøres ved at tilgå "Enable 3D card field" og herefter indsætte:

branding_config[enable_3d_card_field] => true

Med andre ord enabler du bare "Enable 3D card field" som vist nedenfor:

OBS - Hvis man har angivet payment method = 3d-creditcard - vil “Enable 3D Secure”-feltet ikke blive vist i betalingsvinduet, da denne vil fjerne formålet med feltet.

Bestem titlen i browser

Ønsker du selv at bestemme den "title", altså titlen som browseren viser i toppen af betalingsvinduet, kan dette ændres ved at sætte

branding_config[title] => 'PensoPay test'

Hvilket bare betyder, at du indtaster det ønskede navn i feltet der hedder Default html title.

I vores eksempel ovenfor har vi valgt at vores title skal være PensoPay test.

Autojump

Autojump er en funktion, der medfører, at når kunden indtaster f.eks. sit kortnummer og trykker "enter", så hopper kunden automatisk videre til næste vindue, som er udløbsmåned og så fremdeles indtil alle informationerne er indtastet. Dette kan aktiveres på følgende måde:

branding_config[autojump] => true

Hvilket egentlig bare betyder, at du enabler (aktivterer) autojump, som anvist nedenfor:

Variabler i betalingsvinduet (fx tag kurven med i betalingsvindue m.m.)

Med denne funktion kan du nærmest tilføje lige den funktion du ønsker til betalingsvinduet. Alt afhængig af din webshops flow, målgruppe, produkter m.m. kan det være en god ide at tilpasse betalingsvinduet hertil, enten med ekstra informationer eller specielle funktioner.

Der er altså mulighed for, at ændre betalingsvinduet fuldstændigt. Derfor er der nærmest uendelige  "variabler" at tilføje til sit betalingsvindue.

Har du f.eks. nogensinde handlet på en webshop, hvor du lige blev i tivl om det nu var den rigtige størrelse du fik tilføjet til kurven, og dermed var nødsaget til at forlade købsflowet for at tjekke?

Dette scenarie kan du imødegå gennem vores mulighed for branding.

Du kan f.eks.:

• Kunden får kurven med ud i betalingsvinduet, så kunden kan se, hvad denne er ved at købe
• Kunden kan få sin adresseinformationer med i betalingsvinduet, såleles denne kan dobbelttjekke den indtastede adresse
• Få kundenummer med ud i betalingsvindue
• Og meget meget mere - du kan nærmest definere alle slags variabler

Alle disse variabler er med til at forbygge "tabt kurv"-fænomenet, som betyder, at kunden, af en eller anden grund vælger at afbryde købet når denne når til købsflowet.

Alt afhængig af, hvilken variabel du tilføjer til dit betalingsvindue, kan disse, hvis der f.eks. er tale om kundens adresse, blive sendt med betalingen, når kunden gennemfører købet.

Tag endelig fat i os, hvis du har spørgsmål til vores branding.

Sådan trækker du kurven med ud i betalingsvinduet

Ønsker du f.eks. at dine kunder får deres kurv med ud i betalingsvinduet kan dette aktiveres således:

Først skal der oprettes en ny branding. Dette gør du ved at tilgå QuickPay Manageren > "Settings" > "Brandings", denne sættes til default.

Download branding, og åbn filen ved navn templates/order_info.liquid

Her skal du indsætte følgende i bunden af filen:

{% for basket in model.basket %}

<dt>{{basket.item_name}}</dt> <dd>{{basket.item_price}}</dd>

{% endfor %}

OBS: ovenstående kode skal indsættes ovenfor følgende kode:

   </dl>

</div>

Vælg sprog i betalingsvinduet 

Vores betalingsvinude er tilgængeligt på en række forskellige sprog. Du kan definere det sprog, som skal vises i betalingsvinduet med variablen "language". Det gør du der, hvor du du tilkalder PensoPay betalingsvinduet fra din shop. Se nedenstående eksempel:

"language"	 => da

Gør felter påkrævede

Ønsker du f.eks. at gøre felter påkrævede, såsom at CVD-feltet skal udfyldes inden man kan trykke "Betal"? Dette kan opsættes på følgende måde:

1. Tilgå QuickPay Manageren > Settings > Branding
2. Tilgå den ønskede branding hvorpå du vil gøre felter påkrævede
3. Find filen templates/form/card.liquid og tryk "Edit"
4. Find linjen hvor der står:

<input type="tel" id="cvd" name="cvd" class="form-control" autocomplete="cc-csc" aria-describedby="cvd" maxlength="4" pattern="[0-9]*" data-mask="9999" inputmode="numeric">

Ret denne til følgende:

<input type="tel" id="cvd" name="cvd" class="form-control" autocomplete="cc-csc" aria-describedby="cvd" maxlength="4" pattern="[0-9]*" data-mask="9999" inputmode="numeric" required>

Ønsker du et felt, der skal krydses af, inden betalingen kan gennemføres, så kan du indsætte følgende:

<input id="checkBox" type="checkbox" required> {% t I confirm I have read the terms and conditions. %}

Dette er f.eks. relevant ifm. “I confirm I have read the terms and conditions.”, som er påkrævet at have. Dette skal du have ind i dine sprogfiler, som det er beskrevet i afsnittet “Ændre tekst i betalingsvinduet”. Læs med nedenfor i afsnittet "Ændre tekst i betalingsvinduet".

Ændr tekst i betalingsvinduet

Først skal du hente den fil du vil ændre, f.eks. den danske tekst. Så er det locales_da_DK_LC_MESSAGES_branding.po 

Den skal åbnes med en PO editor, det kan f.eks. være PoEdit.

Når du har lavet dine ændringer skal du compile filen til MO (gøres i PoEdit), og så får du filen locales_da_DK_LC_MESSAGES_branding.mo 

Denne fil skal uploades til den ønskede branding.

Tilføj beløb med abonnementsoprettelse:

Standard for abonnementsoprettelse, er at der på knappen ved oprettelse blot står "Opret abonnement". Det er muligt at få vist beløbet, når en kunde opretter et abonnement. 

• Log ind i QuickPay Manageren og naviger til Settings > Branding
• Klik dig ind på den ønskede branding
• Find filen templates/form/card.liquid og klik ‘Edit’
• Find linje 81 hvor der står:

81    {% t Create subscription %}

Og ret til følgende:

{% t Create subscription %} - <span id="total-field"> - {{ model.formatted_amount }} {{ model.currency }}</span>

Klik ‘Save’ for at gemme. Husk at kalde jeres branding id enten gennem jeres shopsystem eller ved at vælge det som standard branding under Settings > Branding

Næste gang du åbner betalingsvinduet ser det således ud: