This will attach an event listener to the element that will update the bin as the consumer types it in. The BIN value will update automatically if they change cards or need to correct an entry.

Style 2 - Event Based 

A. Event Based - bin.process

The bin.process event is the recommended event base profiling which allows Cardinal’s recommended BIN Detection implementation. It provides the merchant, or integrator, the greatest flexibility to initiate the device profiling wherever profiling wherever they prefer is the best point in their purchase flow. It is best practice to initiate profiling.  The merchant will need to bin.process immediately upon receiving the customer’s card number. Whenever possible, provide a minimum of the first 9 (e.g. BIN) up to the full card number of the consumer (e.g. max of 19 digits).  The more digits of the card number provided the better chances of matching if there is a corresponding EMV 3DS BIN digits of the customer’s card number on bin.process. Merchants that provide fewer than the first 9 digits are at risk of running the incorrect issuer Method URL.

Cardinal.trigger("bin.process", '1234567894561237');

B. Event Based - accountNumber.update

The accountNumber.update event allows the merchant or integrator to initiate the device profiling when there is an update to the account number that will be used to make the purchase. The merchant will need to provide the full account number between the standard credit card number range of 13-19 digits.   Whenever possible, provide a minimum of the first 9 BIN digits of the customer’s card number on accountNumber.update.

For example, in a card-on-file use case, the accountNumber.update could be called when the card number that is being used to make the purchase changes.  This allows the merchant to collect the credit card number themselves, then only call this event when there is an update to this value.  When the accountNumber.update event is called, Songbird will update the in memory cached order object to include the new card number.  

Cardinal.trigger("accountNumber.update", '123456789');

Style 3 - Configuration Based

If you already have the credit card number and just need to pass it to Cardinal, you can pass it within an order object as part of the setup object passed in on Cardinal.setup. You can only pass the card number once using this methodology, making it ideal in a flow where the consumer has already entered their payment information. If you do need to update the BIN value, you can pair this implementation with the event based implementation to push updated BINs to Cardinal.

var orderObject = {
  Consumer: {
    Account: {
      AccountNumber: '1234567894561237' 
    }
  }
};

Cardinal.setup('init', {
  jwt: 'ey...',
  order: orderObject
});