Placeholder v1
Tout d'abord, pour vous aider à intégrer du JavaScript sur votre formulaire pour améliorer l'expérience de vos clients, voici le code injecté par Dalenys dans votre template, en replacement de votre balise %PLACEHOLDER%.
Attention
Mise à jour 2017 :
Cette version obsolète doit être remplacée par la v2.
Veuillez vous référer à la documentation officielle Dalenys.
<form method="POST" id="B2B-FORM">
<table id="b2b-table">
<tbody>
<tr id="b2b-ccnum">
<th>Card number</th>
<td nowrap="nowrap">
<input type="text" name="CARDCODE" value="" size="20" maxlength="30" id="b2b-ccnum-input" autocomplete="off" />
</td>
</tr>
<tr class="invalid">
<td></td>
<td></td>
</tr>
<tr id="b2b-expiration-date">
<th>Expiration date</th>
<td>
<select name="MONTHDATE" id="b2b-month-input">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="YEARDATE" id="b2b-year-input">
<option value="14">2014</option>
<option value="15">2015</option>
<option value="16">2016</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
<option value="25">2025</option>
<option value="26">2026</option>
<option value="27">2027</option>
<option value="28">2028</option>
</select>
</td>
</tr>
<tr class="invalid">
<td></td>
<td></td>
</tr>
<tr id="b2b-cvv">
<th>Card verification code</th>
<td>
<input type="text" name="CARDCVV" value="" size="3" maxlength="5" id="b2b-cvv-input" autocomplete="off" />
</td>
</tr>
<tr class="invalid">
<td></td>
<td></td>
</tr>
<tr id="b2b-cvv-comment">
<td colspan="2">
<p>The three last digits on the back of your card</p>
</td>
</tr>
<tr id="b2b-fullname">
<th>Name</th>
<td>
<input type="text" name="CARDFULLNAME" value="" size="40" maxlength="40" id="b2b-fullname-input" autocomplete="off" />
</td>
</tr>
<tr class="invalid">
<td></td>
<td></td>
</tr>
<tr id="b2b-email">
<th>Email</th>
<td>
<input type="text" name="CLIENTEMAIL" value="" size="20" maxlength="40" id="b2b-email-input" autocomplete="off" />
</td>
</tr>
<tr class="invalid">
<td></td>
<td></td>
</tr>
<tr id="b2b-buttons">
<td colspan="2">
<input type="SUBMIT" id="b2b-submit" name="B2B-VALIDATE" value="Validate" />
<div id="b2b-loading" style="visibility: hidden;">Processing...</div>
<input type="SUBMIT" id="b2b-cancel" name="B2B-CANCEL" value="Cancel" />
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
if (document.getElementById("B2B-FORM"))
{
document.getElementById("B2B-FORM").onsubmit = function () {
document.getElementById("b2b-submit").style.display = "none";
document.getElementById("b2b-loading").style.visibility = "visible";
// Override this function to prevent multiple submit
this.onsubmit = function () { return false; };
return true;
};
}
if (document.getElementById("b2b-ccnum-input"))
{
document.getElementById("b2b-ccnum-input").onblur = function () {
cardcode = this.value;
this.value = cardcode.replace(/[^\d]/g, '');
};
document.getElementById("b2b-ccnum-input").onkeyup = function () {
cardcode = this.value;
this.value = cardcode.replace(/[^\d]/g, '');
var longueur = this.value.length;
if (longueur > 19) {
this.value = this.value.substr(0,19);
}
};
}
</script>L'objectif ici est de remplacer le texte des labels de champs, des messages d'erreur, du bouton de validation du formulaire et d'autres commentaires qui facilitent la navigation.
L'exemple ci-dessous illustre comment créer une fonction de traduction, en l'occurrence pour le japonais, mais vous pouvez ajouter autant de langues que nécessaire. Ajoutez simplement ce code juste avant la balise fermante </body> :
<script type="text/javascript">
function translateB2B(lang) {
// JAPANESE / 日本語
if( lang == 'JP' ) {
// Card number
if( document.getElementById('b2b-ccnum') ) {
// label
document.getElementById('b2b-ccnum').firstElementChild.innerHTML='カードコード';
// error
document.getElementById('b2b-CARDCODE-errors').firstElementChild.innerHTML='無効なカードコード';
}
// Expiry
if( document.getElementById('b2b-expiration-date') ) {
// label
document.getElementById('b2b-expiration-date').firstElementChild.innerHTML='有効期限';
// error
document.getElementById('b2b-YEARDATE-errors').firstElementChild.innerHTML='無効な有効期限';
}
// Card verification code (CVV / CVC)
if( document.getElementById('b2b-cvv') ) {
// label
document.getElementById('b2b-cvv').firstElementChild.innerHTML='CVV';
// comment
document.getElementById('b2b-CARDCVV-comment').firstElementChild.innerHTML='カード番号の後に出現する3桁の番号。';
// For American Express card only : document.getElementById("b2b-cvv-comment").innerHTML='カード番号の上に表示される4桁の数字。'; // comment Amex
// error
document.getElementById('b2b-CARDCVV-errors').firstElementChild.innerHTML='無効なCVV';
}
// Cardholder full name
if( document.getElementById('b2b-fullname') ) {
// label
document.getElementById('b2b-fullname').firstElementChild.innerHTML='フルネーム';
// error
document.getElementById('b2b-CARDFULLNAME-errors').firstElementChild.innerHTML='行方不明のフルネーム';
}
// Cardholder email
if( document.getElementById('b2b-email') ) {
// label
document.getElementById('b2b-email').firstElementChild.innerHTML='メールアドレス';
// error
document.getElementById('b2b-CLIENTEMAIL-errors').firstElementChild.innerHTML='無効な電子メールアドレス';
}
// Submit button
if( document.getElementById('b2b-submit') ) {
// Button's text
document.getElementById('b2b-submit').value='Ok';
}
// Cancel button
if( document.getElementById('b2b-cancel') ) {
// Button's text
document.getElementById('b2b-cancel').value='キャンセル';
}
}
}
</script>N'oubliez pas d'ajouter un événement onload sur votre balise <body> pour déclencher le remplacement de texte à la volée, et d'ajustez la langue traduite selon vos besoins :
<body onload="translateB2B('JP')">Appareils mobiles
Parce qu'un formulaire plus pratique réduit la friction lors de la finalisation d'une transaction, je recommande vivement de forcer l'affichage du clavier numérique, sur les appareils mobiles, pour faciliter la saisie dans les champs du code de carte et du cryptogramme (CVV).
Il suffit de rajouter un peu de JavaScript :
Astuce
Mise à jour 2021 :
Utilisez plutôt le type number à la place de tel, désormais pleinement compatible avec les smartphones et plus approprié.
<script type="text/javascript">
function displayNumericKeyboard(elemId) {
document.getElementById(elemId).type = "tel";
}
</script>Ajoutez un événement onload sur votre balise <body> pour appliquer la changement de type sur les champs concernés :
<body onload="displayNumericKeyboard('b2b-ccnum-input'); displayNumericKeyboard('b2b-cvv-input');">