Ultimo aggiornamento 4/08/2016

4. Personalizzazione

Questo capitolo introduce due tipi di personalizzazione: di base e avanzata. Nella personalizzazione di base si imparerà ad applicare il proprio file CSS e a personalizzare i colori del testo, dello sfondo e di wrapper. Segue una pagina di pagamento predefinita con i file predefiniti CSS:

Nella personalizzazione avanzata si conosceranno meglio i modelli master/parziali con i segnaposto e verranno personalizzati i contenuti di testo con i file XML. In base alle proprie esigenze, i modelli parziali vengono creati e personalizzati separatamente.

4.1 Personalizzazione di base

La personalizzazione di base include la configurazione del foglio di stile predefinito con il modello Ingenico ePayments predefinito

4.1.1 Modello Ingenico predefinito

Il file CSS può essere personalizzato con un foglio di stile Ingenico ePayments predefinito o con un file CSS caricato in Template File Manager.

Per maggiori informazioni sulla personalizzazione del file CSS consultare la sezione relativa all'uso dei fogli di stile.

4.1.2 Uso dei fogli di stile

È possibile adattare il layout di FlexCheckout applicando un file CSS. Innanzitutto è necessario caricare il file CSS in Template File Manager e collegarlo all'account Ingenico ePayments. Il file CSS è composto da un modulo/contenitore dati e da elementi come data di scadenza, CVC, riquadro informazioni, ecc., da impostare come file CSS predefinito. È possibile collegare ciascun elemento che definisce la formattazione di ogni campo nel modulo/contenitore dati. 

In base alle proprie esigenze aziendali, è possibile modificare la regola di formattazione di ciascun elemento. Fare clic qui per ottenere un elenco degli elementi CSS.

Seguono un modulo/contenitore dati e gli esempi di elementi:

/*---------FORM\DATA CONTAINER-----------*/

#payment-container {width:100%; max-width:768px !important; margin:0 auto;background:#fff;}

#payment-form-container {width:280px !important; padding:0 10px; margin:0 auto; background:#fff;overflow:hidden;}

#payment-data-container {width:260px !important; padding:20px 10px 5px 10px; margin:0 auto; color:#000; background:#fff;overflow:hidden;}

#payment-data-container .payment-label { color:#000; font-size:12px; padding-bottom:3px;}

#payment-data-container .payment-input input { width:248px !important; height:35px; color:#000; font-size:12px; margin-bottom:10px; padding:0 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border:1px solid #000;}

#payment-data-container .payment-input select { width:109px; height:35px; color:#000; font-size:12px; margin-bottom:10px; padding:7px 5px; -webkit-border-radius: 3px;-moz-border-radius: 3px; border-radius: 3px; border:1px solid #000;}

#payment-cardnumber-label-container,#payment-accountowner-label-container{ overflow: hidden;}

/*---------FORM\DATA CONTAINER-----------*/

 Per iniziare, abbiamo creato un file CSS di esempio che può essere scaricato da qui (file zip). È possibile iniziare a creare il proprio CSS con questo file.

È possibile modificare l'interfaccia utente di default (come mostrato qui sotto), applicando il proprio CSS.

Colore di sfondo modulo

CSS interessato:

.payment-form-container{ Background:#f8f8f8; }

 

Colore wrapper modulo

CSS interessato:

#payment-data-container{ Background:#5F5F5F; }

 

Colore testo

CSS interessato:

#payment-data-container .payment-label{color:#FFFFFF;}

#payment-data-container{color:#6E6E6E;}

Colore bordo di input

CSS interessato:

#payment-data-container .payment-input input{border:1px solid #FFFFFF;}

 

Casella messaggio di convalida

CSS interessato:

.payment-error { color:#ab1500; background:#ffe9e8; border:1px solid #ab1500;} 

#payment-data-container .payment-input-error input { color:#ab1500; border:1px solid #ab1500;} #payment-data-container .payment-input-error select { color:#ab1500; border:1px solid #ab1500;}

Casella informazioni di guida

CSS interessato:


#payment-cvc-info-container span.aroowImg {background: #5F5F5F url(arrow-top.png) 0 0 no-repeat;}

#payment-cvc-info-container p.cvc-info-txt{color: #6E6E6E;}
#payment-cvc-info-container div.help-box {border: 1px solid #000000;background: #FFFFFF;}

 

Icona informazioni

CSS interessato:

.payment-method-info {background:url(payment_info.png) 4px 1px no-repeat;}

 

Pulsante Invia/Annulla

CSS interessato:

#payment-data-container #payment-submit {background:#c6ef84;color: #134600;}
#payment-cancel-container input {background:#f8f8f8;border-color:#000;}

 

Colore di sfondo

CSS interessato:

#payment-container {background:# e9e9e9}

 

CSS di esempio

#payment-container {background:# e9e9e9} .payment-form-container{ Background:#f8f8f8; }
#payment-data-container{ Background:#666; }
#payment-data-container .payment-label{color:fff;}

#payment-data-container .payment-input input{border:1px solid #fff;}































































































































.payment-error { color:#ab1500; background:#ffe9e8; border:1px solid #ab1500;}































































































































#payment-data-container .payment-input-error input { color:#ab1500; border:1px solid #ab1500;}































































































































#payment-data-container .payment-input-error select { color:#ab1500; border:1px solid #ab1500;}































































































































#payment-cvc-info-container div.help-box {border: 1px solid #000;background: fff;}































































































































#payment-cvc-info-container span.aroowImg {background: #fff url(arrow-top.png) 0 0 no-repeat;}































































































































#payment-cvc-info-container p.cvc-info-txt{color: #000;}































































































































.payment-method-info {background:url(payment_info.png) 4px 1px no-repeat;}































































































































#payment-data-container #payment-submit {background:#c6ef84;color: #134600;}































































































































#payment-cancel-container input {background:#f8f8f8;border-color:#000;}

4.2 Personalizzazione avanzata

Per offrire maggiore flessibilità, ora è possibile creare e personalizzare modelli master e modelli parziali. In base alle proprie esigenze, i modelli parziali vengono creati e personalizzati separatamente. È altresì possibile personalizzare i contenuti di testo con i file XML.

È possibile scegliere di applicare un tag $$$PAYMENT ZONE$$$ che richiede un modello semplice oppure personalizzare il modello parziale tramite i segnaposto.

4.2.1 Uso dei segnaposto

È possibile personalizzare e formato il loro modello master (master.html) e i modelli parziali possono inserire direttamente i segnaposto in master.html.

È anche possibile definire l'aspetto della pagina di pagamento tramite un file CSS personalizzato (newuser.css) da collegare al file master.html. Se si sceglie di personalizzare il file CSS, il file CSS modificato deve essere caricato in Template File Manager e impostato come predefinito.

I segnaposto vengono classificati in tre gruppi: segnaposto principali, elementi e raggruppati.

Segnaposto principali

Segue un elenco dei segnaposto principali:

  • $$$PAYMENT ZONE$$$: rappresenta un marchio richiesto o un metodo di pagamento mediante un modello personalizzato (con un modello parziale disponibile) o il modello predefinito.
  • $$$TP RESOURCES URL$$$: rende disponibile l'URL per la directory in cui si trovano i file nel Servizio di File Hosting.

È inoltre possibile usare script personalizzati che devono essere collegati a un file JavaScript personalizzato. Il riferimento al file JavaScript può essere creato quando il file viene caricato in Template File Manager. Ad esempio, il file JavaScript di riferimento in <script type="text/javascript" src="$$$TP RESOURCES URL$$$/existinguser.js"></script> è existinguser.js.

Per usare le raccolte JavaScript nei modelli (ad es. JQuery), caricare i file JavaScript in Template File Manager. Dopo aver caricato i file, usare $$$TP RESOURCE URL$$$ per creare il riferimento agli script. Questa procedura deve essere eseguita per tutti i file a cui si fa riferimento nel modello: CSS, immagini, caratteri, ecc., e garantisce che lo script eseguito sia il JavaScript dedicato.

Nota: non è possibile eseguire il push/pull di tutti i dati da un host di terzi non conforme a PCI, pertanto l'uso di JavaScript incide sull'idoneità dell'esercente per PCI SAQ A.

  • $$$DISABLE MASKING$$$: disattiva la mascheratura della casella di input.
  • $$$SUBMIT$$$: rappresenta un pulsante di inoltro per il modulo. Ad esempio:
<div id="payment-submit-container">

    <input id="payment-submit" type="submit" value="Submit"/> 

</div>
  • $$$CANCEL$$$: rappresenta un pulsante di annullamento per il modulo. Ad esempio:
<div id="payment-cancel-container">

    <input id="payment-cancel" name="cancel" type="submit" value="Cancel"  class="cancel" />

</div>

un modello master contenente $$$PAYMENT ZONE$$$ non deve includere i segnaposto di inoltro e di annullamento. I segnaposto di inoltro e di annullamento devono però essere inclusi se un modello parziale è configurato per ogni metodo di pagamento o se un modello master è configurato senza il segnaposto $$$PAYMENT ZONE$$$.

Segnaposto degli elementi

Il controllo effettivo <element> è rappresentato all'interno di un contenitore di elementi: <div id="payment-<input_name>-<element>-container" class="payment-<element>">. Per semplificare lo stile CSS, ID e classe usano la stessa convenzione per i nomi.

  • $$$<input_name><element>$$$: come controllo di input del numero di carta.
  • $$$CARD NUMBER.INPUT$$$ - CARD NUMBER: come <input_name>, in cui l'INPUT è l'<element> HTML.
  • $$$<input_name>LABEL$$$: esegue il rendering dell'elemento <input_name>.

Ad esempio, il segnaposto $$$CARD NUMBER LABEL$$$ rappresenta:

<div id="payment-cardnumber-label-container" class="payment-label">

<label for="payment-cardnumber" id="lbl_CreditCardInputModel_CardNumber" title="CardNumber">Card number</label> 

</div>

Per tutte le etichette verrà rappresentato un div per fungere da contenitore:

 <div id="payment-<input_name>-label-container" class="payment-label">

La classe di un contenitore di etichetta sarà "etichetta del pagamento" in modo che lo stile venga applicato a tutte le etichette insieme. Viene sempre rappresentata un'etichetta per il controllo dell'etichetta:

<label for="payment-<input_name>" id="lbl_CreditCardInputModel_CardNumber" 

title="CardNumber">Card number</label>

Per applicare uno stile al controllo dell'etichetta, applicare il file CSS all'ID del contenitore e non all'ID di controllo.

$$$<input_name> INPUT$$$ rappresenta il controllo dell'input per <input_name>:

<div id="payment-<input_name>-input-container" class="payment-input">

<input Id="payment-<input_name>" autocapitalize="off" autocomplete="off"

autocorrect="off" class="inp-txt" id="txt_CreditCardInputModel_CardNumber"

maxlength="40" name="CreditCardInputModel.CardNumber" pattern="[X0-9]*"

spellcheck="False" type="tel" value=""></input>

<div>

Per applicare uno stile al controllo dell'input, applicare il file CSS all'ID del contenitore e non all'ID di controllo.

$$$<input_name> INFO$$$ rappresenta un collegamento a una descrizione del campo <input_name>:

<div id="payment-<input_name>-info-container" class="payment-info">

     <span id="payment-<input_name>-info"></span>

</div>

Associare le eventuali informazioni per questo campo nella lingua selezionata.

$$$<input_name> ERROR$$$ rappresenta il contenitore dei messaggi di errore da <input_name>:

<div id="payment-<input_name>-error-container">

<span class="field-validation-valid" data-valmsg-for="CreditCardInputModel.CardNumber"

data-valmsg-replace="true"></span>

</div>

Qui è possibile inserire i messaggi di convalida.

Segnaposto raggruppati

È possibile inserire i segnaposto degli elementi come gruppo usando i segnaposto Raggruppati. Segue un contenitore rappresentato con un segnaposto raggruppato:<div id="payment-<input_name>-container"></div>. Nel quale verranno inseriti i segnaposto dell'elemento in questo gruppo. Di fatto viene rappresentato questo:
<div id="payment-<input_name>-container">
$$$<INPUT_NAME> LABEL$$$
$$$<INPUT_NAME> INPUT$$$
$$$<INPUT_NAME> ERROR$$$
$$$<INPUT_NAME> INFO$$$
</div>

Un modello master può contenere al suo interno dei segnaposto <div id="paymentForm">. I segnaposto (come $$$CARD NUMBER$$$, $$$CARDHOLDER NAME$$$, $$$EXPIRY DATE$$$, ecc.) definiscono il contenuto del modulo della carta di credito. Gli esercenti possono scegliere i segnaposto più adatti alle loro esigenze.

Segue un esempio di un modello master con segnaposto per un modulo di carta di credito etichettato "paymentForm":

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="$$$TP RESOURCES URL$$$/newuser.css"/>
    </head>
<body>
    <div id="paymentForm">
$$$CARD NUMBER$$$
$$$CARDHOLDER NAME$$$
$$$EXPIRY DATE$$$
$$$CVC$$$
$$$SUBMIT$$$
$$$CANCEL$$$
    </div>
</body>
</html>

Per creare un modulo di addebito diretto, gli esercenti possono utilizzare i segnaposto di addebito diretto, come il seguente:

$$$ACCOUNT OWNER$$$
$$$BANK ACCOUNT$$$
$$$BIC$$$

Il nome del conto bancario, il codice IBAN e il codice BIC rappresentano un modulo di addebito diretto.

Per gli esercenti che desiderano un modello che supporti diversi metodi di pagamento, si può creare un modello master e un modello parziale per i metodi di pagamento.

Un modello master è come il seguente:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>   
    <script src="$$$TP RESOURCES URL$$$/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="$$$TP RESOURCES URL$$$/user.css"/>
    <script type="text/javascript" src="$$$TP RESOURCES URL$$$/existinguser.js"></script>
</head>
<body>
    <div id="paymentForm">
        $$$PAYMENT ZONE$$$
    </div>
</body>
</html>

Un modello parziale è come il seguente ed è realizzato con segnaposto ($$$CARD NUMBER$$$, $$$CARDHOLDER NAME$$$, $$$EXPIRY DATE$$$, and so on):

<div id="paymentForm">
$$$CARD NUMBER$$$
$$$CARDHOLDER NAME$$$
$$$EXPIRY DATE$$$
$$$CVC$$$
$$$SUBMIT$$$
$$$CANCEL$$$
</div>

Se gli esercenti non vogliono rappresentare il modulo di pagamento predefinito con $$$PAYMENT ZONE$$$, possono inserire invece un modello parziale.

Se ad esempio il metodo di pagamento richiesto è una carta di credito, viene usato un modello parziale con il nome master.creditcard.htm. Se si tratta di addebito diretto, viene usato invece un modello parziale con il nome master.directdebit.htm.

Gli esercenti devono caricare il modello parziale in File Manager. Devono attenersi rigorosamente alla convenzione di denominazione. Se ad esempio il modello master esistente si chiama master.html e se gli esercenti intendono inviare un addebito diretto come metodo di pagamento, in File Manager dovrà essere caricato un modello parziale di nome master_directdebit.html.

4.2.2 Personalizzazione dei contenuti di testo con XML

È altresì possibile personalizzare l'aspetto del testo nelle pagine di tokenizzazione con un file XML. Se non viene applicato un file XML ,viene usato il modulo di tokenizzazione. Dopo aver personalizzato il file XML è necessario caricarlo in Template File Manager e usare lo stesso nome di file come modello master. Requisito preliminare: il modello master deve essere caricato in anticipo.

Insieme al file XML devono sempre essere presenti degli elementi identificativi dei campi. Si prega di cliccare qui per una lista complete di elementi. Segue un esempio di un elemento (CardHolderNameInput) per l'immissione del nome del titolare della carta:

<Element ElementId="CardHolderName" >



    <Languages>



      <Language Id="en_us">Card Holder Name only en</Language>



      <Language Id="fr">Card Holder Name only  fr</Language>



    </Languages>



  </Element>

In questo elemento nell'ID lingua vengono specificate le lingue inglese americano e francese.  Anche il tag ID specifica il codice della cultura ISO.

Se non viene specificato alcun elemento viene usato il testo predefinito dell'elemento. Se non viene specificata la lingua di un elemento viene usata la lingua predefinita.

Nota:

l'ultima riga del file XML deve sempre iniziare con <root>. L'ultima riga del file XML deve sempre finire con </root>.

4.3 Template File Manager

Template File Manager consente di gestire facilmente i modelli e i vari file ad essi associati.

Per iniziare a usare File Manager, accedere al proprio account Ingenico ePayments, quindi aprire "Configurazione" > "Modello" > "File Manager".

4.3.1 Caricamento di file modello

Caricamento di file modello

Sotto "Carica file modello", selezionare il pulsante "File..." per cercare i file che si desidera caricare. È possibile caricare css e immagini (.css, .jpg, .jpeg, .gif, .png), con un massimo di 7 MB a file, e 10 MB in totale.

Effettuare la selezione e confermare.

4.3.2 Controllo e gestione dei file caricati

Al termine del caricamento, i file appariranno nella stessa pagina nella sezione "File caricati".

I file presenteranno prima lo stato "Convalida", durante il quale vengono eseguiti alcuni necessari controlli di sicurezza/antivirus (ciò può richiedere alcuni minuti).

I file potranno essere usati quando lo stato passa a "Convalidato".

Fare clic sul pulsante di aggiornamento  per verificare l'attuale stato dei file / fare clic sul pulsante di eliminazione  per eliminare il file in modo permanente.

Un file assumerà lo stato "Rifiutato" se non passa il controllo di sicurezza. Ciò può essere dovuto a un virus o, ad esempio, se l'estensione del file è errata.

4.3.3 Integrazione

Nel codice si fa riferimento ai file caricati con un codice che segue questa struttura: $$$TP RESOURCES URL$$$/[nome file].

Ingenico ePayments è un provider mondiale di servizi di pagamento digitale, Ingenico Payment Services fornisce una risposta efficace alla complessità di pagamenti qualunque sia il canale: in rete, con il cellulare o in un negozio. Procura soluzioni innovative per il commercio in rete, per quanto riguardano l’aspetto finanziario, l’aspetto commerciale e la complessità dei canali, sostiene i commercianti a gestire, incassare e proteggere i propri pagamenti, prevenendo le frodi ed aumentando le entrate attraverso conversioni più elevate. Ingenico ePayments fa parte del gruppo Ingenico, leader mondiale nel settore di pagamenti in rete.

Questo sito web utilizza i cookie per essere in grado di darvi la migliore esperienza utente. Se non si desidera accettare i cookie, è possibile modificare le impostazioni dei cookie. Cliccate su 'Accetta' per consentire tutti i cookie di questo sito.

Impostazioni dei cookie

Introduzione

Funzionale

I cookies funzionali sono necessari per il funzionamento corretto del sito web. Non è possibile disattivare questi cookie.

Ottimizzato

I cookies per l’ottimizzazione ci permettono di analizzare l'utilizzo del sito in modo che possiamo monitorare e migliorare il nostro sito.
Questo รจ il livello predefinito.

Personalizzata

Cookies di personalizzazione vengono utilizzati per i social media e per personalizzazione avanzata, permettendoci di mostrarvi le informazioni collegate alla vostra azienda.


Esempio delle funzionalità consentite

  • Salvare le preferenze riguardanti il paese
  • Salvare le preferenze riguardanti la lingua

Esempio delle funzionalità non consentite

  • Salvataggio dei dati personali
  • Tracciamento per scopi di remarketing
  • Tracciamento anonimo tramite Google Analytics

Esempio delle funzionalità consentite

  • Salvare le preferenze riguardanti il paese
  • Salvare le preferenze riguardanti la lingua
  • Tracciamento anonimo tramite Google Analytics
  • Tracciamento per scopi di remarketing

Esempio delle funzionalità non consentite

  • Salvataggio dei dati personali
  • Tracciamento per scopi di remarketing

Esempio delle funzionalità consentite

  • Salvare le preferenze riguardanti il paese
  • Salvare le preferenze riguardanti la lingua
  • Tracciamento anonimo tramite Google Analytics
  • Mostrare contenuto in linea con i vostri interessi
  • Mostrare pubblicità in linea con i vostri interessi
  • Tracciamento per scopi di remarketing

Esempio delle funzionalità non consentite

  • Salvataggio dei dati personali