Building an Open-Source Payments Toolkit for the Web
Internally, we use CommonJS and its pattern of composing products via small, focused libraries to write our JavaScript. Since the launch of v.zero last year, we have built up a number of these small libraries. Our latest addition to the JavaScript SDK is our Hosted Fields product which allows for full control over UI/UX while helping keep merchants compliant with the latest PCI regulations. We have decided that there is a lot of value in creating these libraries and want to share it with others to see where they can take it.
Framebus
For our communication between iframes, and to assist in their networking and orchestration we have been using framebus. On the surface it is simple -- it provides a pub/sub event bus. The interesting part about it is that it works transparently across iframe and domain borders. The emitting end and the listening end of an event do not need to know about each other, even if they are in different iframes or even on different domains.
This greatly reduced the complexity of juggling iframe and window references, keeping track of which was the merchant page, which was our own, and where certain state was contained. This gave us the decoupling benefits of events without having to take into account where we were publishing or subscribing from.
// iframe 1
var bus = require('framebus');
bus.on('Marco', function (reply) { reply('Polo!'); });
// iframe 2
var bus = require('framebus');
bus.emit('Marco', function (response) {
console.log('Got "' + response + '" back!');
});
Form-Napper (pending)
We make use of "hijacking" native form submissions to be able to asynchronously tokenize credit card information and give back a one-time-use nonce to the merchant. In order to do this, you’ll need to find the form, attach a submit handler, enter a new value, and submit (bypassing any attached handlers) at the end. We wrote a small library that did just this, and only this. When released, here is what that API will look like:
var form = new FormNapper('my-form-id');
form.hijack(function (event) {
console.log('This form\'s submit has been hijacked.');
form.inject('ransomNote', 'Send ransom to...');
form.submit(); // if we're feeling nice
});
Credit card type detection
Being able to identify the type of card based on the card number is its own class of problem. What maxlength should I use for the input as soon as I know it's an Amex? How long is the security code field? What icon do I show? These questions and more can be deduced (usually) by the time the first few digits are entered.
We abstracted this concept with credit-card-type. Given a partial or full card number, give me the answers to the above questions.
var getCardType = require('credit-card-type');
var card = getCardType('4111');
console.log(card);
//{
// niceType: 'Visa',
// type: 'visa',
// pattern: '^4[0-9][\\s\\d]*