Branding af betalingsvindue

Med vores branding system er det muligt at ændre både design og opførsel af Quickpays betalingsvindue.

Quickpay betalingsvindue er bygget i HTML og CSS og med Liquid template system. Dvs. de fleste med kendskab til webudvikling vil relativt nemt kunne tilpasse designet.

Standard branding

Koden til Quickpays betalingsvindue er open source og kan findes på https://github.com/quickPay/standard-branding

Har man som merchant ikke oprettet sin egen branding benytter man automatisk det seneste release af standard brandingen, og får dermed også automatisk de nyeste opdateringer.

Bruger man sin egen branding, skal man derimod selv sørge for at opdatere sin branding løbende for at understøtte nye features i Quickpay. Vi har lavet en guide om “best practise” ift. at holde sin egen version opdateret.

Visa/Dankort

Vi ønsker at informere jer om, at Visa har indført et nyt krav, som pålægger erhvervsdrivende, der tilbyder både Dankort og Visa-betalinger, at lade forbrugerne vælge det ønskede kort.

Denne funktion er nu tilgængelig i Quickpays standardbetalingsvindue. Men vil kun være tilgængelig hvis man benytter sig af både en indløsningsaftale for Visa og Dankort, så begge logo ses i betalingsvinduet.

Konkret betyder det, at når en forbruger indtaster et Visa/Dankort, vil de nu have mulighed for at vælge mellem Dankort og Visa.

For kunden vil de kunne trykke på logoet for henholdsvis Dankort eller Visa, alt efter hvilken del af kortet kunden ønsker at benytte.

Hvis man benytter egen branding af betalingsvinduet, skal man opdatere sin branding til den nyeste version 2.2.1 for at denne mulighed kommer frem i betalingsvinduet.

Opret branding

En branding kan oprettes direkte gennem API eller i Quickpay Manager under Settings > Branding.

Ved oprettelsen kan man vælge om man ønsker en helt tom branding eller man ønsker at sin nye branding bygger på seneste release af standard branding. Har man allerede sin egen branding, er det også muligt at vælge denne som udgangspunktet for den nye.

Pris

Der faktureres 19,- kr /mdr. for ekstra brandings der benyttes til at modtage betalinger i den pågældende måned.

For hver ekstra shop URL på merchant, medfølger der en ekstra branding.

Ændre i branding

Til små ændringer i koden kan man ændre i filer direkte genenm Quickpay Manager. Dette gøres ved at klikke ind på branding, og herefter ind på den specifikke fil man vil ændre.

Upload af filer

Der udover er det også muligt at ændre filerne lokalt, og derefter uploade filen med det samme navn som den eksisterende, som dermed overskrives.

Derudover er det også muligt at uploade zip filer, som automatisk udpakkes og uploades på branding.

Brug af branding

Det er muligt at have flere brandings, og det er muligt at vælge specifikke brandings per betaling.

Hvis andet ikke vælges benytter man automatisk standard branding.

De fleste shopsystemer giver mulighed for at indstille hvilken branding man ønsker at benytte. Enten ved at vælge i en liste, eller ved at specificere et branding id. Dette id kan findes i Quickpay Manager ved brandingen.

Bruger man sin egen integration direkte til Quickpay API, kan man sætte branding_id direkte når betalingslinket oprettes.

Derudover er det muligt at sætte en “default branding” gennem Quickpay Manager, under Settings > Brandings. Denne branding vil herefter blive brugt hvis der ikke specifikt er angivet en branding i shopsystem eller på betalingerne.

Logo

Det er muligt at få sit logo i toppen af betalingsvinduet uden at oprette en branding. Dette gøres blot ved at uploade sit logo gennem Quickpay Manager, og herefter indsættes det automatisk.

1. Gå til Settings > Merchant i Quickpay Manager

2. Klik på UPLOAD NEW LOGO og upload et logo i passende størrelse

Herefter vil logoet automatisk vises i det nye betalingsvindue.

Ønsker man at indsætte et andet logo, eller andre billeder kan dette også lade sig gøre. Det har vi skrevet om under indsæt billede.

Branding Config

Ud over udseende og design er det også muligt at ændre andre dele af betalingsvinduet gennem branding config-systemet.

Det er muligt at sætte følgende via branding config:

• Kortholders navn - Indsæt felt i betalingsvinduet til at opsamle kortholders navn.
• Auto jump mellem felter - Indstille om indtastningsfokus automatisk skal flytte til næste input felt.
• Title - Sætte en specifik html title, der vises for brugeren i toppen af browser-vinduet.

Ved at klikke nedenfor, kan man få vist hele sektionen der gennemgår hvordan branding config sættes

{
    "enable_card_holder_field": true
}

{
    "autojump": true
}

{
    "title": "Sko Butik"
}

"branding_config":{"title":"My new title"}

{
    "title": "2Teest"
}

Muligheder med branding

Fremhæve MobilePay og Apple Pay

På vores blog har vi beskrevet hvordan man ændre i betalingsvinduet, så man i højere grad fremhæver bestemte betalingsmetoder.

I bloggen er der et konkret eksempel på hvordan det laves så MobilePay og Apple Pay fremhæves

Læs mere på /blog/market-analysis/promote-facilitators/

Indsæt billede eller logo

Gå ind på den ønskede branding og klik nu på menu-knappen øverst i højre hjørne, klik nu Upload ny fil

Ændre herefter filen ’templates/layout.liquid'

Så der i stedet står

Koden er følgende

<img src={{images.demologo.png}} alt="{{ model.displayname }}">

Tilføj ekstra tekst

Find filen “templates/form/card.liquid” og tryk “Ret” (blyanten).

Nedest i filen, inde i objektet, kan du tilføje en paragraf med selvvalgt tekst.

Husk at putte teksten ind i et tag.

Husk at gemme.

Dit betalingsvindue skulle gerne nu se sådan her ud:

Egen font

Ønsker man der i betalingsvinduet bruges en anden font end standard gøres dette ved følgende;

Font skal uploades i enten TTF eller Woff/Woff2 format.

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

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

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

Variabler i betalingsvinduet

Afhængigt af jeres shop’s flow, målgruppe og hvilket produkt/service i sælger, kan det for nogle være en god ide at vise ekstra information i betalingsvinduet.

Ved hjælp af branding er det muligt at få vist kundens adresse, kurven med varer eller variabler I selv sætter. Disse informationer kan sendes med når betalingen oprettes, og det kan I læse mere om på vores tech side.

Det er muligt at ændre betalingsvinduet fuldstændigt, og dermed er der også uendeligt mange måder at få tilføjet den ekstra information.

Dette eksempel tager udgangspunkt i, at man gerne vil have vist et kundenummer i betalingsvinduet ved siden af de andre standard informationer. I oprettelsen af betalingen sendes kundenummeret i en variable der er kaldt “customer”.

Herefter skal der oprettes en ny branding under Settings > Brandings i Quickpay manageren, og denne sættes til default.

Download branding, og åben filen templates/order_info.liquid

Her indsættes

<dt>Customer no</dt> <dd>{{ model.variables.customer}}</dd>

I dette eksempel indsættes det i bunden af filen

Når betalingsvinduet åbnes vises det således

Dette er også muligt med andre informationer, der sendes med til betalingsvinduet, såsom invoice_address, shipping_address eller basket

Ønsker man fx at få kundens navn, kan dette gøres ved at skrive

<dt>Dit navn</dt> <dd>{{ model.invoice_address.name}}</dd>

Eller man kan vise kurven ved at skrive

{% for basket in model.basket %}

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

{% endfor %}

Ønsker man at iterere gennem hele kurven, kan man følge følgende guide.

Sprog i betalingsvinduet

Betalingsvinduet er tilgængeligt på en lang række sprog. Man definerer sproget, der vises på betalingssiden, med variablen “language”. Det gøres dér, hvor man kalder Quickpays betalingsvindue fra sin shop. Se nedenstående eksempel.

"language"	 => da

Herudover kan sproget også sættes gennem Quickpay Manager under Settings > Integration, hvor man kan vælge et Default payment window language

Via nedenstående link kan man se de sprog, som aktuelt understøttes.

https://github.com/Quickpay/standard-branding/tree/master/locales

Har man ønske om et alternativt sprog kontakter man os blot, så finder vi en løsning og får det tilføjet.

Oversættelser

Opdager man fejl eller mangler i oversættelserne er man altid velkommen til at skrive til support@quickpay.net.

Rettelserne vil herefter komme med i næste udgivelse af Standard Branding

Manuel tilpasning af oversættelser

Ønsker man at rette en oversættelse specifikt for sit eget betalingsvindue, kan dette gøres ved at bruge sin egen branding.

Som beskrevet i readme filen på Standard Branding, benyttes Gettext til at håndtere oversættelser.

1. Hvis I ikke allerede bruger jeres egen branding, skal I oprette en ny i Quickpay Manager under Settings > Branding, og herefter klikke på den i listen

2. Find locales/de_DE/LC_MESSAGES/branding.po og download denne

3. Åben filen i https://poedit.net og ret oversættelserne.

4. Ved at gemme filen oprettes der automatisk en .mo fil samme sted som den downloadede .po fil ligger. (Hvis ikke kan .mo oprettes gennem menubaren)

5. Upload den nye .mo fil istedet for den eksisterende .mo fil i jeres branding. Erstat ligeledes den eksisterende .po fil med den opdaterede.

Beløb ved oprettelse af abonnement

Ønsker man at vise et beløb i betalingsvinduet ved oprettelse af et abonnement, kan dette gøres igennem vores branding.

• 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 linjen hvor der står:

{% 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:

Gør felter påkrævede

Ønsker du at visse felter, f.eks. cvd, skal udfyldes inden man kan trykke på Betal-knappen, så er det ganske ligetil.

• 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 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">

Og ret 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. %}

Teksten “I confirm I have read the terms and conditions.” skal du have ind i dine sprogfiler, som det er beskrevet i afsnittet “Ændre tekst i betalingsvinduet”.

Best practice

Når fx en ny betalingsmetode introduceres i Quickpay, medfører dette også en ny release af standard-branding. Og benytter I jeres egen branding, bliver denne dermed ikke automatisk opdateret til at håndtere de nye features. Jeres egen branding vil fortsætte med at virke, men bare ikke understøtte den nye betalingsmetode.

Men som hovedregel er det anbefalet at man holder sin egen branding opdateret med nye releases af standard branding.

Vi anbefaler at man i Github laver sin egen fork af standard-branding.

I denne kan man lave de nødvendige ændringer, og herefter downloade som .zip og uploade til Quickpay Manager.

Når der så efterfølgende kommer ændringer til Quickpays standard branding, kan disse automatisk hentes ind i sin egen fork vha Github.

Brug for hjælp til Liquid operators, types osv, så kan vi anbefale at tage et kig på Liquid

Eksempler på hvad man kan lave med en branding