Cards & Wallets · PaySuite payment page · Customising the payment page · Skin JavaScript
Custom card behaviour
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
Block corporate cards
JavaScript
Hosted.Cashier.CardInfoClient.bindings.onDataChanged = function(oldValue, newValue) {
if (newValue.cardCategory == "CORPORATE") {
$(".pay-action-button").prop("disabled", true);
}
else {
$(".pay-action-button").removeProp("disabled");
}
};Be aware of when a credit card is being used (for example for surcharging)
JavaScript
Hosted.Cashier.CardInfoClient.bindings.onCardUsageTypeChanged = function(oldValue, newValue) {
if (newValue.cardUsageType == "CREDIT") {
// do some stuff for credit cards here
}
};Surcharge for credit cards
- 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
- In the skin, render the amount as though it were a fixed value - hide the radio controls and the input field
- On card usage type change, select a higher amount from the range behind the scenes - this would appear as the surcharge
- 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