Building Hosted Fields

A lightning talk given at Node学園18 in Tokyo on October 8, 2015.

This talk is about what the JS SDK team at Braintree learned when building the new Hosted Fields integration.

1. BUILDING HOSTED FIELDS Jeff Carpenter - @jcarp Engineer at Braintree
2. DISCLAIMER This talk is: > About the front-end, not Node.js > In English, not in ೔ຊޠ
3. > େֶͷ࣌ʹͪΐͬͱ೔ຊޠΛษڧ͠·ͨ͠ > ೔ຊେ޷͖ > Ͷ͋ͭ͜Ί͕޷͖Ͱ͔͢ʁ
4. Braintree helps companies like Uber, Airbnb, GitHub, and Dropbox accept credit cards, PayPal, Venmo, Bitcoin, Apple Pay, and Android Pay
5. CREDIT CARD FORMS
6. Some background...
7. PCI DSS A set of rules that companies accepting credit cards must follow
8. 2015 - PCI DSS VERSION 3 Credit card information must now be entered on the domain of your payment provider
9. <iframe>
10. DROP-IN UI
11. DROP-IN UI: !
12. But what if the Drop-in UI doesn't match the style of your checkout form?
13. HOSTED FIELDS
14. HOSTED FIELDS: A NEW INTEGRATION FOR MATCHING THE STYLE OF YOUR CHECKOUT FORM AND BEING PCI COMPLIANT
15. BUILDING HOSTED FIELDS
16. We decided that the only way to give merchants the most customizability was to make each input an iframe
17. BEFORE <form name="credit-card> <input name="card-number" /> <input name="cvv" /> <input name="expiration" /> </form>
18. AFTER <form name="credit-card> <div name="card-number"></div> <div name="cvv"></div> <div name="expiration"></div> </form>
19. BEFORE
20. AFTER
21. How does the merchant style the iframes?
22. STYLING CONSIDERATIONS > Guard against XSS > Minimal change to existing CSS workflow > Easy and intuitive
23. APPROACHES WE CONSIDERED
24. INFER STYLES FROM CONATINER > ! No extra work for the merchant > " Requires watching for updates > " Black box to the merchant
25. applyIf styles: [ { // base styles color: 'green', fontFamily: 'Helvetica' }, { // setting styles for focused elements applyIf: function(inputElement) { return inputElement.isFocused; }, color: 'limegreen' }, { // media queries applyIf: function() { return window.innerWidth > 600; }, fontSize: '16pt' } ]
26. applyIf > ! Not constrained to CSS rules > ! Anything you can write in JS works > ! Supports media queries > " Not intuitive > " Requires inter-frame communication for every CSS change
27. CSS IN A SCRIPT TAG <script type="braintree/css"> input { font-size: 16pt; color: #ccc; } </script> > ! Intuitive > " Requires parsing CSS in JS
29. stylesheet.insertRule { 'input': { 'font-size': '16pt' } } Becomes: stylesheet.insertRule('input { font-size: 16pt; }');
30. stylesheet.insertRule > ! Close to CSS syntax > ! Supports media queries > ! Makes XSS more difficult { 'input': { 'font-size': '16pt' } }
31. INNER VS. OUTER STYLES
32. OUTER STYLES: APPLIED TO THE CONTAINER Like border or background-color
33. OUTER STYLES: APPLIED TO THE CONTAINER <div id="card-number"></div> <style> #card-number { background-color: white; } </style>
34. INNER STYLES: FOR THE TEXT Like color or font-size
35. INNER STYLES: FOR THE TEXT braintree.setup('client-token', 'custom', { hostedFields: { styles: { 'input': { 'font-size': '16pt' }, ':focus': { 'color': '#ddd' } } } });
36. MEDIA QUERIES ALSO SUPPORTED braintree.setup('client-token', 'custom', { hostedFields: { styles: { '@media any': { 'input': { /*...*/ } } } } });
37. SHOULD WE USE A COOL COMPILE-TO-JS LANGUAGE?
38. WE EVALUATED USING TYPESCRIPT function sum(a: number, b: number): number { return a + b; } > Easy if your entire project is TypeScript > Must write type declarations for all plain JS
39. WE ALSO EVALUATED USING BABEL FOR ES6 > Vanilla JS™ on the merchant page > Babel/ES6 inside iframes
40. WE ALSO EVALUATED JEST > Front-end testing framework from Facebook > Based on jsdom (JS implementation of the DOM) > Auto-mocks everything by default const API = require('api'); console.log(API); // => {}
41. ENDED UP USING KARMA, PHANTOMJS, AND MOCHA FOR TESTING
42. MERCHANT CAN NO LONGER ACCESS CREDIT CARD NUMBER
43. HOW DOES VALIDATION WORK?
44. We thought of ways to expose information merchants need from the form, like events and validation
45. EVENT LIFECYCLE hostedFields: { onFieldEvent: function (event) { if (event.type === "focus") { // Handle focus } else if (event.type === "blur") { // Handle blur } else if (event.type === "fieldStateChange") { // Handle a change in validation or card type console.log(event.isValid); // true|false if (event.card) { console.log(event.card.type); // visa|master-card|american-express|diners-club|discover|jcb|unionpay|maestro } } } }
46. INCREMENTAL VALIDATION
47. VALIDATING AS YOU TYPE 3 => {isValid: false, isPotentiallyValid: true, type: null} 37 => {isValid: false, isPotentiallyValid: true, type: 'Amex'} 373 => {isValid: false, isPotentiallyValid: true, type: 'Amex'} 3736 => {isValid: false, isPotentiallyValid: false, type: null} 4111111111111111 => {isValid: true, isPotentiallyValid: true, type: 'Visa'}
49. HOW DO THE IFRAMES TALK TO EACH OTHER?
50. FRAMEBUS <iframe> <script> bus.on('message', function (data) { console.log(data); // => '͜Μʹͪ͸'; }); </script> </iframe> <iframe> <script> bus.emit('message', '͜Μʹͪ͸'); </script> </iframe>
52. TEAM DYNAMICS > 4 programmers (2 pairs) > Pair programming 100% of the time > Rotate pairs every few days
53. BONOBOS: HOSTED FIELDS + REACT.JS
55. Huge thanks to Kyle, Mrak, Evan, Rohit, Trevor, and everyone else who worked on Hosted Fields
57. Slides and links to everything: https://github.com/jeffcarp/building-hosted-fields
58. Let's talk about JS or payments - @jcarp Thank you!! ͋Γ͕ͱ͏͍͟͝·͢ʂ