Brand selector

Brand selector

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

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.be2bill.com/brand-detector/v1/brand-selector-widget.min.js"></script>

Next step depends on your integration-mode:

Hosted-fields

Then, manage the brand-selector container as 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:
<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'
            },
            'card': {
                id: 'card-container'
            },
            'expiry': {
                id: 'expiry-container'
            },
            'cryptogram': {
                id: 'cvv-container'
            }
        },
        // Choose the language for error messages
        location: "en"
    });
</script>

Hosted-form custom template

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

<link rel="stylesheet" href="https://js.sandbox.be2bill.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.be2bill.com/brand-detector/v1/brand-selector-widget.min.js"></script>
    <script>
        new dalenys.brandSelectorWidget();
    </script>
</body>

Tailor-made brand selector

First of all, you must provide an interface to let the cardholder choose which brand to use during the transaction. (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.

warning

Do not forget to retrieve the selected brand to include it in the POST form, in order to include it in the subsequent server to server payment request.

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.be2bill.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.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"

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.