Betalingsvindue

Denne artikel gennemgår de muligheder merchants har for at ændre på betalingsvinduet gennem branding samt hvordan man indsætter sit eget logo i betalingsvinduet.

Bemærk at oprettede brandings faktureres 19,- kr /mdr.


For at få sit logo vist i betalingsvinduet skal man blot uploade sit logo igennem manageren, og logoet indsættes herefter automatisk.

  1. Gå til Settings > Merchant i QuickPay Manager

  2. Klik på UPLOAD NEW LOGO og upload et logo i passende størrelse (fx 250x250).

Herefter vil logoet automatisk vises i det nye betalingsvindue.

upload-logo

Benytter man version 1.x.x af Standard Branding (hvis branding er oprettet før 13. marts 2017), er det ikke muligt at uploade logo gennem manager.

Der skal man istedet ændre i layout.liquid i sin branding, så den bruger et uploaded logo.

Flere logoer

Ønsker man at bruge flere logoer på sin shop, skal ekstra logoer indsættes via brandings.

Indsæt logo direkte i branding

Ønsker man at indsætte sit logo direkte igennem en branding, kan dette stadig lade sig gøre.

Man skal være opmærksom på, at ekstra brandings faktureres jvf. quickpay.net/pricing.

Opret en ny branding i QuickPay Manager under Settings > Brandings.

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 at gøre brug af en speciel font, er dette også muligt. Vi understøtter TTF og Woff/Woff2 fonte. Når man har fundet den font man ønsker at gøre brug af, skal man downloade den.

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


Branding Config

Det er gennem branding configs muligt at ændre visse elementer i betalingsvinduet.

Branding config kan ændres i betalings-request eller ved at oprette en branding.

En del shopsystem-moduler understøtter endnu ikke branding-config, og det skal dermed sættes gennem branding.

Betalings-request

I oprettelsen af form kaldet eller betalingslink skal følgende sendes med.

branding_config[enable_3d_card_field] => true

Default branding configs

Det er også muligt at definere indstillingerne så de bruges på den standard (default) branding man har valgt. Dette gøres ved at gå til Settings > Brandings og så klikke på Default branding configs, her kan man så vælge diverse indstillinger. branding-config

Kortholders navn i betalingsvinduet

Ønsker man at kortholder skal indtaste sit navn i betalingsvinduet, kan dette aktiveres ved at sætte

branding_config[enable_card_holder_field] => true

I betalingsvinduet vil der herefter automatisk være et felt til at indtaste kortholders navn.

branding-config

Navnet vil herefter kunne findes under betalingen, under metadata > issued_to

Kortholder aktivering af 3-D Secure

Ønsker man at kortholder selv skal kunne tvinge en betaling gennem 3-D Secure kan dette gøres ved at sætte

branding_config[enable_3d_card_field] => true

Kortholder kan herefter aktivere 3-D Secure i betalingsvinduet.

branding-config

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

Sæt title i browser

Ønsker man at bestemme den ‘title’ som browseren viser i toppen af betalingsvinduet, kan dette sættes ved

branding_config[title] => 'Sko Butik'

Autojump

Ønsker man at indtastnings-fokus automatisk skal hoppe fra fx kortnummer til udløbsmåned, kan dette sættes ved

branding_config[autojump] => true

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

payment-window-variables

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 %}

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


Ændre 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 og den skal uploades til din branding.


Brug af Integration

Ønsker du at bruge iteration i betalingsvinduet, så findes der naturligvis også en guide til det.


Eksempler på hvad man kan lave med en branding

Branding designer

Hvis man ikke selv har mod på at kaste sig over et større redesign af sit betalingsvindue, så har vi fået lov til at henvise til en af vores kunder der arbejder med design og på deres egen shop har givet vinduet en større overhaling. Så hvis du kunne tænke dig at få hjælp til at redesigne dit eget betalingsvindue, så skriv en mail til webdesign@esportrait.com

QuickPay gør opmærksom på at et evt samarbejde med en ekstern designer, er en sag imellem Jer selv og det eksterne firma. Og derfor på eget ansvar


Kontakt QuickPay Support
Brug for hjælp?

support@quickpay.net