HOME / Javascript /
Dalenys payment solution - How to add custom languages on your payment form template
October 14th 2016
The Dalenys payment solution allows to display a payment form in 10 default languages, however it is possible to change the fields labels to create additional translations.
Placeholder V1 (old version)
<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>Here is an example to add japanese language, add this code just before the </body> closing tag :
<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>Add an onload event on your <body> tag to trigger the translation :
<body onload="translateB2B('JP')">Mobile devices
I highly recommend to force numeric keyboard display on mobile devices for the card code and card CVV fields, by adding Javascript:
<script type="text/javascript">
function displayNumericKeyboard(elemId) {
document.getElementById(elemId).type = "tel";
}
</script>Add an onload event on your <body> tag to trigger the translation :
<body onload="displayNumericKeyboard('b2b-ccnum-input'); displayNumericKeyboard('b2b-cvv-input');">