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.

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.

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.

Æ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.


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.

upload-logo

Ø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 på nedenstående knap, kan man få vist hele sektionen der gennemgår hvordan branding config sættes

Muligheder med branding configs

Kortholder navn

Ved at sætte enable_card_holder_field til true, kommer der et ekstra input felt over kortnummer, hvor det er muligt for kortholder at indtaste deres navn.

Navnet kan herefter findes på betalingen i QuickPay Manager, eller direkte gennem API.

{
    "enable_card_holder_field": true
}

Auto jump mellem felter

Når autojump aktiveres flyttes indtastningsfokus/cursoren automatisk efter kortholder har indtastet hver del af sine kortinfo.

{
    "autojump": true
}

Title

Med title kan der sættes en specifik html title, som er den tekst der vises for brugeren i toppen af browser-vinduet.

{
    "title": "Sko Butik"
}

Opsæt branding config

Branding configs kan sættes på 3 forskellige måder

Betalingsrequest

I oprettelsen af betalingslink kan branding config sendes med i følgende format

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

Rettes i selve branding

Bruger man sin egen branding, kan værdierne sættes direkte i branding.

Dette gøres ved at rette i config.json filen

{
    "title": "2Teest"
}

Default branding configs

Det er også muligt at sætte standard værdier for branding configs. Disse benyttes hvis der ikke sættes andet på betalingsrequest eller i selve brandingen.

Disse sættes i QuickPay Manager under Settings > Brandings > Edit branding configs

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å https://learn.quickpay.net/blog/2021/01/13/promote-facilitators.html

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

upload-logo

Ændre herefter filen ‘templates/layout.liquid’

branding-layout

Så der istedet står

branding-layout-logo

Koden er følgende

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

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.

Step 1 - Log ind i QuickPay Manageren og naviger til Settings > Brandings

Step 2 - Klik dig ind på den givne branding, hvor du ønsker at benytte din font.

Step 3 - Klik på menu-knappen oppe i højre hjørne og vælg Upload new file upload-logo

Step 4 - Vælg nu font filen. Når du har valgt filen og klikket ok, skal du angive en sti foran filnavnet. I skal blot angive “fonts/” foran jeres filnavn, som vist på billedet herunder. upload-logo

Step 5 - Find filen “stylesheets/paymentwindow.css” og klik på Edit

Indsæt nu følgende kode i filen (i dette eksempel bruger vi en font der hedder Lobster-Regular)

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

Step 6 - Find nu følgende i koden

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

Og tilføj nu navnet på din font så det ser således ud

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

Afslut ved at klikke Save.

Klik nu på Back to branding, og her klikker du så på Preview ud for den branding du har ændret i. Så åbnes betalingsvinduet og du kan nu se din nye font. upload-logo


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

branding-variables

Når betalingsvinduet åbnes vises det således

betalingsvariabler

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: subscription-amount


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


Kontakt QuickPay Support
Brug for hjælp?

support@quickpay.net