M

ALX DESIGN

HOME / JAVASCRIPT /

Dalenys payment solution - How to add custom languages on your payment form template

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');">

BACK TO HOME

Leave a comment ?