Developer Documents

The new Card Info Library integration has been written such that a merchant can bind to any of the callbacks and implement their own logic, as so:
Card Info Event Bindings

Hosted.Cashier.CardInfoClient.bindings = {
 onPanCompleteChanged: function(oldValue, newValue) {},
 onDataChanged: function(oldValue, newValue) {},
 onError: function(errorData) {},
 onValidChanged: function(oldValue, newValue) {},
 onCardTypeChanged: function(oldValue, newValue) {},
 onCardSchemeChanged: function(oldValue, newValue) {},
 onCardUsageTypeChanged: function(oldValue, newValue) {},
 onIssuerCountryChanged: function(oldValue, newValue) {},
 onIssuerChanged: function(oldValue, newValue) {}
};

The skin JavaScript can then provide definitions for these functions.

The skin could

1. Block corporate cards

   Hosted.Cashier.CardInfoClient.bindings.onDataChanged = function(oldValue, newValue) {
    if (newValue.cardCategory == "CORPORATE") {
     $(".pay-action-button").prop("disabled", true);
    }
    else {
     $(".pay-action-button").removeProp("disabled");
    }
   };
   

2. Be aware of when a credit card is being used (for example for surcharging)

   Hosted.Cashier.CardInfoClient.bindings.onCardUsageTypeChanged = function(oldValue, newValue) {
    if (newValue.cardUsageType == "CREDIT") {
      // do some stuff for credit cards here
    }
   };
   

3. Surcharge for credit cards
   1. Create the payment session with an amount ranging from the flat amount up to the amount plus the maximum possible surcharge, with a suggested value of the flat amount
   2. In the skin, render the amount as though it were a fixed value – hide the radio controls and the input field
   3. On card usage type change, select a higher amount from the range behind the scenes – this would appear as the surcharge
   4. Since this is all done in JavaScript and is therefore modifiable by the user, it is strongly recommended to use a preAuth callback to verify that the surcharge was correctly applied

A full set of reference data.

Further documentation on the Card Info Library.