Branding af betalingsvinduet?

Er det muligt at lave et custom betalingsvindue, som ligner shoppen til forveksling, i stedet for standard QP vinduet?

Først og fremmest. Det er ikke vores erfaring at man har lavere konvertering i butikker som anvender vores standard betalingsvindue fremfor vindue i deres eget design.

Undersøgelser har vist at kortholdere typisk er mere trygge ved vores betalingsvindue end butikkens. Men for at svare helt konkret på ønsket er svaret: JA

Den nemme og helt simple løsning: I kan knytte deres logo til betalingsvinduet. Dette gøres via manageren.
Den mere avancerede løsning som tilbyder fuld branding - læs videre nedenstående.
en 3. mulighed er at anvende Shopify som shopmodul. Det er hostet i et PCI-godkendt miljø, hvorfor det er muligt.

Templates

Quickpay standard

Download XML-file

Download CSS-file

Vejledning til Branded betalingsvindue

Et branded betalingsvindue består af en template, et stylesheet og et valgfrit antal billeder. Bemærk dog at der er en øvre grænse for hvad det hele sammenlagt må fylde (512 KB).

- Template filen skal være navngivet branded.xml og skal starte med

<?xml version="1.0" encoding="UTF-8"?>
<body xmlns="http://www.quickpay.net/branded-xhtml" xmlns:qp="http://www.quickpay.net/branded-qp">

og slutte med

</body>

Al HTML mellem body tags skal overholde xHTML standarden. Det er ikke muligt at uploade template som ikke overholder standarden. Det er heller ikke tilladt eller muligt, at bruge javascript.

Til hjælp er der en række qp tags:

<qp:amount/>
Ordre beløb i formatet #.###,##

<qp:shopname/>
Jeres merchant navn

<qp:shoplogo/>
Indsætter img tag med sti til det logo i har uploaded under Settings/Payment Window

<qp:changetype/>
Indsætter link til at skifte betalingstype

<qp:shopvar name="variabel navn"/>
Indsætter valgte shop variabel uden formatering. Følgende variabler er tilgængelige:

currency - Valuta
type - Betaling eller abonnement
ordernumber - Ordrenummer
amount - Beløb

<qp:text name="tekst"/>
Indsætter oversættelse af "tekst" såfremt oversættelse findes. Hvis ikke oversættelse findes indsættes "tekst" uændret. Husk at "tekst"-variablerne starter med stort bogstav.

Currency - Valuta
Type - Betaling eller abonnement
Order number - Ordrenummer
Amount - Beløb

<qp:cancelbutton/>
Indsætter annuller knap som peger på cancelurl.

<qp:payment>
<qp:submittext name="complete" value="Betal" />
<qp:submittext name="continue" value="Fortsæt" />
</qp:payment>
Første knap vises ved alm. betalingskort, hvor der indtastes kortnr. og betales. Anden knap er ved f.eks. eDankort, hvor der først vælges pengeinstitut og man derefter klikker Fortsæt.

<qp:payment/>
Indsætter "Vælg betalings middel", Form til indtast af kort oplysninger, Infotekst og link til ekstern betaling (Danske bank, Nordea osv.) eller Fejlbesked hvis betaling fejlede.

<qp:paytypes/>
Indsætter logoer for hver tilladt kortype. Vises samtidigt med "indtast kort oplysninger", og indikere hvilke kort typer der kan indtastes.

Eksempel som viser Visa-Dankort og Mastercard:
<p id="paytypes">
<img class="paytypes_card" src="/form/gfx/cards-s/dankort.gif" alt="Dankort / Visa-Dankort" title="Dankort / Visa-Dankort"/>
<img class="paytypes_card" src="/form/gfx/cards-s/mastercard.gif" alt="Mastercard" title="Mastercard"/>

<qp:progress/>
Indsætter breadcrumb som viser hvor i betalingsforløb man er. Format er som følger:

<div id="breadCrumbsContainer"><span id="bread-crumb-active">Select payment method</span> » Complete payment » Receipt

<qp:trigger name="variabel_navn" operator="eq/neq" value="værdi">html</qp:trigger>
Indsætter html mellem <qp:trigger ...> og </qp:trigger> hvis shopvar (se <qp:shopvar>) "variabel_navn" er lig/ikke lig med (eq/neq) "værdi".

Sti til billeder skal være på formen "/images/billed.navn"

Mht. CSS er følgende hjælpeklasser som standard defineret. Det anbefales man ikke overruler disse klasser i egen stylesheet fil.

  .bgWhite {
      background: #ffffff;
  }

  .left {
      text-align: left;
  }
  .right {
      text-align: right;
  }
  .center {
      text-align: center;
  }

  .fleft {
      float: left;
  }
  .fright {
      float: right;
  }

  .underline {
      text-decoration: underline; 
  }
  .bold {
      font-weight: bold;
  }

  .inline {
      display: inline;
  }
  .hidden {
      display: inline;
  }
  .block {
      display: block;
  }
  .nowrap {
      white-space: nowrap;    
  }
  .maximize {
      width: 100%;    
  }
  .vmiddle {
      vertical-align: middle; 
  }

Der er også en række muligheder for at ændre på vinduet med CSS:

#cvdHelpBtn { display: none; }
Hvis du gerne vil fjerne vores link til hjælp vedr. cvd.

Branding og transaktionsgebyrer

Forstil dig at nedenstående er en del af en tabel som bruges til at vise ordre detaljer.

Vi bruger en trigger til at styre om fee og total skal vises alt efter om der for den valgte kortype på forhånd kan udregnes fee.

Eksempler