Personalizarea câmpurilor găzduite
Dacă utilizați metoda de integrare Hosted Session, aveți la dispoziție diferite moduri de personalizare a câmpurilor de plată găzduite. Personalizările vă pot ajuta să potriviți aspectul paginii dvs. de plată și să îmbunătățiți accesibilitatea site-ului dvs.
Stilizarea câmpurilor găzduite
Puteți stiliza câmpurile de plată găzduite pentru a se potrivi cu aspectul general al paginii dvs. de plată.
setFocus( ): Setează evidențierea pentru câmpul găzduit specificat.setFocusStyle( ): Setează atributele de stil pentru câmpurile găzduite specificate când acestea sunt evidențiate.setHoverStyle( ): Setează atributele de stil pentru câmpurile găzduite specificate când cursorul mouse-ului trece peste acestea.setPlaceholderStyle( ): Setează atributele de stil pentru textul placeholder afișat în câmpurile găzduite specificate înainte ca plătitorul să îl înlocuiască cu propria sa intrare.setPlaceholderShownStyle( ): Setează atributele de stil pentru câmpurile găzduite specificate atunci când textul substituent este vizibil.
Exemplu de stilizare pentru câmpul de plată
PaymentSession.setFocus('card.number');
PaymentSession.setFocusStyle(["card.number","card.securityCode"], {
borderColor: 'red',
borderWidth: '3px'
});
PaymentSession.setHoverStyle(["card.number","card.securityCode"], {
borderColor: 'red',
borderWidth: '3px'
});
PaymentSession.setPlaceholderStyle(["card.number", "card.nameOnCard"], {
color: 'blue',
fontWeight: 'bold',
textDecoration: 'underline'
});
PaymentSession.setPlaceholderShownStyle(["card.number", "card.nameOnCard"], {
color: 'green',
fontWeight: 'bold',
textDecoration: 'underline'
});
Utilizarea câmpurilor cu liste verticale
Dacă acceptați plățile cu cardul de credit, puteți utiliza valori din liste verticale pentru câmpurile găzduite care definesc luna și anul de validitate a cardului.
Următorul exemplu de cod arată cum să definiți câmpurile cu liste verticale din câmpurile găzduite ale paginii dvs. de plată pentru o plată cu cardul de credit.
<html>
<head>
<!-- INCLUDE SESSION.JS JAVASCRIPT LIBRARY -->
<script src="https://egenius.unicredit.ro/form/version/72/merchant/<MERCHANTID>/session.js"></script>
<!-- APPLY CLICK-JACKING STYLING AND HIDE CONTENTS OF THE PAGE -->
<style id="antiClickjack">body{display:none !important;}</style>
</head>
<body>
<!-- CREATE THE HTML FOR THE PAYMENT PAGE -->
<div>Please enter your payment details:</div>
<div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="1" readonly></div>
<div>Expiry Month:
<select id="expiry-month" class="form-control input-md" required="" readonly>
<option value="">Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div>Expiry Year:
<select id="expiry-year" class="form-control input-md" required="" readonly>
<option value="">Select Year</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
</select>
</div>
<div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="three digit CCV security code" value="" tabindex="4" readonly></div>
<div>Cardholder Name:<input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="3" readonly></div>
<div><button id="payButton" onclick="pay();">Pay Now</button></div>
</script>
</body>
</html>
Configurarea accesibilității
Hosted Session oferă funcționalități pentru a îmbunătăți accesibilitatea site-ului dvs. web. Pentru mai multe informații despre accesibilitatea site-ului web, consultați .
Setarea limbii paginii de plată
Pentru a seta limba paginii generale de plată, adăugați atributul lang la elementul <html>. Definirea limbii paginii ajută tehnologiile de asistență să redea textul mai precis.
<html lang="en">
<head></head>
<body></body>
</html>
Stabilirea setărilor regionale ale câmpului găzduit
Pentru a defini setările locale (limba și regiunea) câmpurilor dvs. găzduite, adăugați argumentul locale la funcția PaymentSession.configure() utilizată pentru configurarea sesiunii.
Când definiți setările locale ale câmpului găzduit, biblioteca Session JavaScript oferă traduceri aplicabile pentru toate elementele textuale legate de câmpurile găzduite, inclusiv etichetele ascunse și mesajele de eroare. Dacă limba nu este setată, aceasta revine implicit la engleză (en_US).
Valorile locale acceptate sunt de_DE, el_GR, en_US, es_MX, es_ES, fr_CA, fr_FR, it_IT, ja_JA, pl_PL, pt_BR, ro_RO și zh_CN.
lang) se potrivește cu limba câmpurilor integrate.
PaymentSession.configure({
fields: {
card: {
nameOnCard: cardHolderNameField ? "#card-holder-name" : null,
number: "#card-number",
securityCode: "#security-code",
expiryMonth: "#expiry-month",
expiryYear: "#expiry-year"
}
},
frameEmbeddingMitigation: ["javascript"],
locale:"fr",
callbacks: {
}
});
Îmbunătățirea experienței utilizatorului pentru câmpurile găzduite
Următoarele opțiuni oferă un control mai bun al experienței utilizatorului pentru plătitorii cu nevoi speciale de accesibilitate:
- Setarea titlului iFrame
Atributul title al cadrului iFrame al câmpului găzduit poate fi controlat cu ajutorul unui atribut title al câmpului. Titlul reprezintă informații utile pentru câmp, cum ar fi un sfat explicativ.
- Setarea atributelor ARIA (Accessibility Rich Internet Application).
Hosted Session acceptă diverse atribute aria-*, pe care le puteți folosi pentru a permite tehnologiilor de asistență să ajute plătitorul. De exemplu, atributul aria-label oferă o etichetă pe care tehnologia de asistență o poate citi pentru a identifica câmpul găzduit pentru plătitor.
- Setarea parametrului de afișare pentru caractere nevalide
Luați în calcul posibilitatea de a accepta toate caracterele în câmpurile găzduite, pentru o experiență mai bună a utilizatorilor care utilizează tehnologii de asistare. Pentru a face acest lucru, setați
interaction.displayControl.invalidFieldCharacters=ALLOWîn cadrul argumentului obiectului de configurare al funcțieiPaymentSession.configure(). - Setarea etichetei ascunse și a mesajelor de eroare
Toate câmpurile găzduite conțin o etichetă ascunsă și toate câmpurile găzduite obligatorii conțin un mesaj de eroare ascuns. Orice erori rezultate din invocarea funcției
PaymentSession.updateSessionFromForm()generează o etichetă de mesaj de eroare. În plus, vă puteți genera propriile erori folosind funcțiaPaymentSession.setMessage().De exemplu, eticheta ascunsă pentru câmpul numărului de card este Număr card. Mesajul de eroare ascuns pentru numărul de card lipsă este Numărul de card lipsește, introduceți o valoare. Mesajul de eroare ascuns pentru numărul de card nevalid este Numărul de card este nevalid, introduceți o valoare corectă. În timp ce navigați printre filele câmpurilor găzduite, cititorul de ecran citește doar eticheta ascunsă și mesajul de eroare ascuns, nu și eticheta sau mesajul de eroare afișat efectiv pe pagină.
<!-- CREATE THE HTML FOR THE PAYMENT PAGE --> <div>Please enter your payment details:</div> <div>Cardholder Name: <input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="1" readonly></div> <div>Card Number: <input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="2" readonly></div> <div>Expiry Month:<input type="text" id="expiry-month" class="input-field" title="expiry month" aria-label="two digit expiry month" value="" tabindex="3" readonly></div> <div>Expiry Year:<input type="text" id="expiry-year" class="input-field" title="expiry year" aria-label="two digit expiry year" value="" tabindex="4" readonly></div> <div>Security Code:<input type="text" id="security-code" class="input-field" title="security code" aria-label="card security code" value="" tabindex="5" readonly></div> <div><button id="payButton" onclick="pay();">Pay Now</button></div>
Manipularea focusului câmpului
Comportamentul implicit de focalizare automată HTML5 nu funcționează cu câmpurile găzduite: atunci când plătitorul face clic pe etichetă, focalizarea nu este mutată automat la elementul de intrare corespunzător.
Pentru a asigura funcționarea corectă a focalizării pe pagina dvs., utilizați funcția setFocus() a bibliotecii Session JavaScript.