Guides
Dashboard ↗

Tokenizing a Combo Card

In Brazil, certain cards, known as "Combo Combo" cards, function as both credit and debit cards. To offer customers a choice in how they pay, merchants can use the preferred_card_type parameter to specify if the card should be tokenized and processed as debit or credit.

This is especially useful for merchants who want to give customers the option of paying with debit for immediate settlement or with credit for installment payments. Merchants can also set a default card type during tokenization without requiring a customer's selection.

Update on form events

One of the events supported by Web SDK is updated to return card IIN. This will be useful for the merchant to look-up the card IIN details with the dedicated method on PO. Refer to Handling form events for more details on the events.

The new field is card_iin and can be accessed with on() function, as shown below.

client.setupForm(formElement, {},
  processoutReadyHander,
  function(err) { ... }
);

function processoutReadyHander(form) {
  form.getNumberField().on("click", function(e) {
    console.log(e.card_iin);
  });
}

Updated event structure detail

FieldDescriptionTypeExample value
card_number_lengthCurrent length of the card fieldInteger16
max_card_number_lengthMaximum length of the card according to its BINInteger19
min_card_number_lengthMinimum length of the card according to its BINInteger12
potentially_validtrue if the current value can match a valid card number once completedBooleantrue
validtrue when the card passes the Luhn checkBooleantrue
schemesList of possible schemes according to the card BINList<String>["visa", "carte bancaire"]
card_iinFirst 6 digits of the entered card number.String424242

Get Card Information with IIN value

New method called getCardInformation is implemented on the SDK. This method takes the IIN value exposed by the event and returns the IIN details of the card. It can be used as shown below.

client.setupForm(formElement, {},
  processoutReadyHander,
  function(err) { ... }
);

function processoutReadyHander(form) {
  form.getNumberField().on("input", function(e) {
    if (e.card_number_length == 6) {
      client.getCardInformation(
        e.card_iin,
        function(cardInfo) {
          ...
        },
        function(err) {
          ...
        }
      )
    }
  });
}

getCardInformation Response Object

FieldDescriptionTypeExample value
bank_nameName of the bank issuing the cardStringPayments UK Limited
brandCard product offered by the card schemeStringvisa classic
categoryIntended use or market segment for the cardStringconsumer
co_schemeOther networks the card operates onStringcarte bancaire
combo_card_typesList of card types the Combo card supportsList<String>["credit", "debit"]
schemesList of possible schemes according to the card BINList<String>["visa", "carte bancaire"]
countryTwo-letter ISO country code of the card's issuing countryStringGB
typeThis field specifies whether the card is a "credit" card, a "debit" card, or "prepaid"Stringcredit

Use combo_card_types to display options for the customer

The card IIN details will include the field called combo_card_types which is a list of card types that the Combo card supports. If this field is empty, it means that the card is most probably not a combo card. If the field is present, it can be used to display options for the customer to select their preferred type. The selected option later can be passed to tokenize method to tokenize and process the Combo card. The example below shows and example.

client.setupForm(formElement, {},
  processoutReadyHander,
  function(err) { ... }
);

function processoutReadyHander(form) {
  // Default value
  let preferredCardType = "credit"

  form.getNumberField().on("input", function(e) {
    if (e.card_number_length == 6) {
      client.getCardInformation(
        e.card_iin,
        function(cardInfo) {
          ...
          if (cardInfo.combo_card_types && Array.isArray(cardInfo.combo_card_types) && cardInfo.combo_card_types.length > 0) {
            ...
            const radioButtons = radioGroup.querySelectorAll('input[name="cardType"]')
            radioButtons.forEach(radio => {
              radio.addEventListener('change', function() {
                preferredCardType = this.value
              })
            })
          }
        },
        function(err) {
          ...
        }
      )
    }
  });
};

form.addEventListener("submit", function (e) {
  e.preventDefault()
  client.tokenize(
    form,
    {
      name: document.getElementById("card-form-name").value,
      preferred_card_type: preferredCardType
    },
    function (token) {
      console.log("Tokenization Success", token)
      client.makeCardPayment(
        invoiceId,
        token,
        ...
      )
    }
  )
})

Other methods that accepts preferred_card_type

Apart from tokenize method, the merchants can choose to override default value based on the requests. This is possible on makeIncrementalAuthorizationPayment, makeCardPayment and initiateThreeDS. preferred_card_type can be passed as part of the options object.

client.setupForm(formElement, {},
  processoutReadyHander,
  function(err) { ... }
);

...

client.makeCardPayment(
  invoiceId,
  token,
  {
    authorize_only: true,
    preferred_card_type: "credit"
  },
  ...
)

Updated about 4 hours ago