Brand selector

Depending on your integration method, there are different ways to integrate the bank card brand selector:

Hosted-fields

Brand selector component

The brand selector container is created as for the others hosted-fields:

  • Add a dedicated container:
<form method="post" action="https://myshop.com/payment/process">
    <p><label>Card brand</label> <span id="brand-container"></span></p>
    <p><label>Card code</label> <span id="card-container"></span></p>
    <p><label>Card expiry</label> <span id="expiry-container"></span></p>
    <p>
        <label>Card Validity Code (CVV)</label> <span id="cvv-container"></span>
    </p>
    <p><input type="submit" value="Pay" /></p>
</form>
  • Manage this container while configuring the hosted-fields library:
info

A new version of the brand selector component that allows more transparency regarding the scheme choice for payers is available. We strongly encourage you to use this by setting the parameter ‘useInlineSelection’ to ‘true’.

<script type="text/javascript">
    // Initialize the hosted-fields library
    var hfields = dalenys.hostedFields({
        // Use your Public API Key
        key: {
            id: "a1b2c3d4-e5f6-g7h8-i9j0-a1b2c3d4e5f6",
            value: "uAr3s0133t#gLhF",
        },
        // Link and configure each hosted input field by providing the corresponding container ID
        fields: {
            brand: {
                id: "brand-container",
                useInlineSelection: true, // to use the new version of the brand selector component   
                isCbPreferredNetwork: true // select CB as default network            
            },
            card: {
                id: "card-container",
            },
            expiry: {
                id: "expiry-container",
            },
            cryptogram: {
                id: "cvv-container",
            },
        },
        // Choose the language for error messages
        location: "en",
    });
</script>

Then there are 2 ways to get the selected brand:

  • As a onInput callback of the brand objects:
{ "element": "brand", "type": "input", "brand": "visa" }
  • During the token creation:
{
    "execCode": "0000",
    "message": "Operation succeeded.",
    "cardCode": "499003XXXXXX6764",
    "cardValidityDate": "12-31",
    "cardType": "visa",
    "selectedBrand": "visa",
    "hfToken": "7337d65b-3242-4e04-8400-6108c8e8838e"
}
info

‘You have to add the selected brand to the form submit request (by adding an hidden input for example) and to add the dedicated SELECTEDBRAND parameter to your following payment request. See our live demo’

$> curl --request POST --url "https://secure-test.dalenys.com/front/service/rest/process" \
--data "method=payment" \
--data "params[IDENTIFIER]=Demo Shop" \
--data "params[OPERATIONTYPE]=payment" \
--data "params[ORDERID]=1234" \
--data "params[AMOUNT]=1000" \
--data "params[CLIENTIDENT]=john.snow" \
--data "params[CLIENTEMAIL]=john.snow@example.com" \
--data "params[CLIENTREFERRER]=https://your_shop.com/order?id=1234" \
--data "params[CLIENTUSERAGENT]=Mozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0" \
--data "params[CLIENTIP]=10.1.1.1" \
--data "params[CARDFULLNAME]=JOHN SNOW" \
--data "params[DESCRIPTION]=Knows nothing" \
--data "params[SELECTEDBRAND]=cb" \
--data "params[HFTOKEN]=17730892-b3f7-4411-bc81-557471ffcede" \
--data "params[HASH]=15477dcb8687adf90fa51e418f3c1a2d025f40b177a978c2734514734633b3c4" \
--data "params[VERSION]=3.0" \

Tailor-made brand selector

This option requires you to provide an interface to let the cardholder choose which brand to use during the transaction, instead of using a container dedicated to the brand. (ex: input select, radio buttons…)

Then, you’ll need to get the detected brands from the brand event of the card container entry field (see the hosted-fields event types) and make them available in the dedicated interface.

Hosted-form custom template

info

‘Merchants using default Dalenys payment forms, without customization don’t have to manage the brand selector.’

Brand selector widget

First of all, you must include the Dalenys brand selector widget dedicated library, by adding the following code just before the closing </body> tag in your HTML:

<script type="text/javascript" src="https://js.sandbox.dalenys.com/brand-detector/v1/brand-selector-widget.min.js"></script>

Link the default brand selector widget CSS between the <head> and </head> tags in your HTML:

<link
    rel="stylesheet"
    href="https://js.sandbox.dalenys.com/brand-detector/v1/brand-selector-widget.min.css"
    type="text/css"
/>

Then call the dalenys.brandSelectorWidget() method:

    ...
    %PLACEHOLDER%
    ...
    <script type="text/javascript" src="https://js.sandbox.dalenys.com/brand-detector/v1/brand-selector-widget.min.js"></script>
    <script>
        new dalenys.brandSelectorWidget();
    </script>
</body>

Brand detector library

You can use our brand-detector library to determine the brands of a bank card from its BIN (its first 8 digits).

First of all, you must include the Dalenys hosted-fields dedicated library, by adding the following code between the <head> and </head> tags in your HTML:

<script type="text/javascript" src="https://js.sandbox.dalenys.com/brand-detector/v1/brand-detector.min.js"></script>
danger

The brand-detector library must always be called online. Using a downloaded version hosted on your own server can cause serious malfunctions, especially in the case of an update of the API.

Then call the dalenys.detectBrandsByBin method:

<script type="text/javascript">
    var bin = "41111111";
    dalenys.brandDetector.detectBrandsByBin(bin, function (brands) {
        console.log(brands);
        //todo: handle the detected brands
    });
</script>

This example should return something like this in the console:

0:
    brand: "cb"
    service_type: "debit"
1:
    brand: "visa"
    service_type: "debit"

Server-to-server

BIN API

You can make a server to server API call to retrieve the brands of a specified BIN.

Please see the BIN API documentation.

Brand detector library

Please refer to the hosted-form brand detector libray for identical functioning.