Tender Type Identification

Radial's foundational JavaScript library provides a client-side offering to identify the tender type (for example, Visa, Mastercard, Amex, Discover) as the credit or debit card number is entered by the customer. To identify the tender type, you load radial_payments.js and invoke the appropriate method as needed, as detailed in the following sections.

Note: The checkout flow should not be blocked in the case where the JavaScript is not loaded properly or if there is a problem invoking the tender identification functions in the JavaScript. The webstore should ensure that appropriate implementation is in place to handle this scenario.

Include radial_payments.js

When using radial_payments.js, you begin by including the library. Add this script tag to your page:

• Test Environment

  <script src=http://tst.payments.radial.com/hosted-payments/radial_payments.js></script>

• Production Environment

  <script src=https://hostedpayments.radial.com/hosted-payments/radial_payments.js></script>

Tender Type Identification without Logo

When the logo of the card network (for example, the Visa or Mastercard logo) does not need to be displayed at the client side, then include these functions as part of the onkeypress(), onkeyup() and onblur() events on credit card number input field as shown below

    <div class="card-container">
        <div id="card-type" class="card-type"></div>
        <input type="text" id="cc-num"
               onkeypress="return Radial.allowOnlyNumericChars(event)"
               onkeyup="Radial.onCardChangeEvent(event, false, callbackFunction)"
               onblur="Radial.updateCardResult(event)"
            placeholder="4111 1111 1111 1111" />
    </div>

In this code example, the 'callbackFunction' is a Javascript function that will be invoked with the results of the tender type identification. You should provide your own 'callbackFunction()' that will include as a parameter the result object of the tender type check. The function should contain the following values:

• result.primaryCardNetwork - Tender type / Primary card network of the given card (for example, Visa, Mastercard, Discover, Amex)
• result.issuingNetwork - Actual issuing network (for example, Diners, UnionPay, JCB, Maestro)
• result.tenderCode - Tender code of the given card (for example, VC for Visa, MC for Mastercard)
• result.valid - true if the given card is valid, otherwise false (based on Luhn check and card length validation)

For any custom error message to be displayed when an invalid card number is entered, you can add the following <div> tag in the payment page where the error message is to be shown:

    <div class="help-block-hide" id='errorMsg'>
        <span class="svg-icon">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px"
                height="15px" viewBox="0 0 24 24" version="1.1">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <rect x="0" y="0" width="24" height="24" />
                    <circle fill="#bb0628" opacity="0.3" cx="12" cy="12" r="10" />
                    <rect fill="#bb0628" x="11" y="7" width="2" height="8" rx="1" />
                    <rect fill="#bb0628" x="11" y="16" width="2" height="2" rx="1" />
                </g>
            </svg>
            Please enter valid card number.
        </span>
    </div>

Please note that the id value of this <div> tag should be 'errorMsg' as shown above. The exact id value enables this part to be displayed or hidden based on the result of the validity when 'Radial.updateCardResult' function is invoked.

Tender Type Identification with Logo

At this moment, logo image files of the card networks and corresponding stylesheets are not included as part of the JavaScript integration. However, you can download these files as a reference from the links below and include them in your payments page:

• CSS File
• Card Networks Logo

The steps to integrate tender type identification with logo display is quite similar to the process detailed above, and you can extend the 'callbackFunction()' to display the relevant logo depending on the resulting tender type. We have provided a sample JavaScript callbackFunction() below for displaying the appropriate logo using these stylesheets:

    <script>
    	const callbackFunction = (result) => {
            document.getElementById('card-type').className = '';
            document.getElementById('card-type').classList.add('card-type');
            if (result.primaryCardNetwork) {
                document.getElementById('card-type').classList.add(result.primaryCardNetwork);
            }
    	}
    </script>