How about creating an awesome mobile app, for iOS and Android, using just HTML, JS and CSS? How about using Angular to create an amazing UI that looks and behaves like a native app? And on top of all that, how about make it take Bitcoin, PayPal, as well as credit and debit cards? In this talk, we will go over all the steps necessary to configure your environment (Mac or Windows), to develop/debug/deploy a mobile app built with Cordova and Angular, offering multiple payment options to users, all at once! Are you ready? Fasten your seat belts...

1. 06.23.15
@braintree_dev @demianborba
Making money with
Phonegap and Angular apps
Demian Borba
<developer-advocate/>
@demianborba
github.com/demianborba

2. Demian Borba
<developer-advocate/>
San Francisco & Bay Area
06.23.15
@braintree_dev @demianborba

3. 06.23.15
Making money with
Phonegap and Angular appsCordova
Demian Borba
<developer-advocate/>
@demianborba
@braintree_dev @demianborba

4. 06.23.15
@braintree_dev @demianborba

5. URL: http://phonegapbootcamp.io06.23.15
@braintree_dev @demianborba

6. 06.23.15
@braintree_dev @demianborba
Your
Developer
Toolbox

7. • Mobile Commerce
• Getting started with Cordova
• Powerful libraries and frameworks
• Accepting cards, PayPal and Bitcoin
>Chapters
06.23.15
@braintree_dev @demianborba

8. Chapter one:
Mobile Commerce
06.23.15
@braintree_dev @demianborba

9. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The-
MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile
06.23.15
@braintree_dev @demianborba
$31.6B
MOBILE COMMERCE IN THE US, 2014
11.8% OF TOTAL DIGITAL COMMERCE

10. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The-
MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile
06.23.15
@braintree_dev @demianborba
$11.1B
MOBILE COMMERCE IN THE US, Q1 2015
15.4% OF TOTAL DIGITAL COMMERCE

11. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The-
MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile
06.23.15
@braintree_dev @demianborba
Desktop
Mobile
Share of Online Retail Browsing

12. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The-
MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile
06.23.15
@braintree_dev @demianborba
Desktop
Mobile
Online Retail Browsing vs. Spending by Platform
GAP

13. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The-
MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile
06.23.15
@braintree_dev @demianborba
Smartphone
Tablet
Do not feel secure providing
payment information over mobile devices
Cannot see the product detail
Navigating between screens
is too difficult/slow
Cannot browse between multiple
screens easily to comparison shop
Too difficult to input my name,
address, and payment information
Cannot navigate to
coupons/discounts easily
Connection speeds/spotty service
slows down the browsing process

14. SOLUTION?
06.23.15
@braintree_dev @demianborba

15. 06.23.15
@braintree_dev @demianborba

16. Chapter two:
Getting started with Cordova
06.23.15
@braintree_dev @demianborba

17. based on a true story...
06.23.15
@braintree_dev @demianborba

18. 06.23.15
@braintree_dev @demianborba

19. 06.23.15
@braintree_dev @demianborba

20. 06.23.15
@braintree_dev @demianborba
Source: http://speedtest.net

21. 06.23.15
@braintree_dev @demianborba

22. Source: http://cordova.apache.org06.23.15
@braintree_dev @demianborba

23. Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface06.23.15
@braintree_dev @demianborba

24. Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface06.23.15
@braintree_dev @demianborba

25. Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface06.23.15
@braintree_dev @demianborba

26. Source: https://nodejs.org/download/06.23.15
@braintree_dev @demianborba
8MB
16MB

27. 06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER

28. 06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER

29. 06.23.15
@braintree_dev @demianborba

30. 06.23.15
@braintree_dev @demianborba

31. DEVELOPER DEVELOPER DEVELOPER
06.23.15
@braintree_dev @demianborba

32. Source: http://git-scm.com/06.23.15
@braintree_dev @demianborba
17MB

33. 06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DE

34. Source: http://git-scm.com/06.23.15
@braintree_dev @demianborba
23MB

35. 06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER

36. 06.23.15
@braintree_dev @demianborba

37. 06.23.15
@braintree_dev @demianborba
DEVELOPER DEVEL

38. npm install -g cordova
06.23.15
@braintree_dev @demianborba

39. 06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER D

40. 06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER

41. sudo chown -R {{whoami}} /usr/local/
06.23.15
@braintree_dev @demianborba
Source: https://docs.npmjs.com/getting-started/fixing-npm-permissions

42. 06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER D
Source: https://docs.npmjs.com/getting-started/fixing-npm-permissions

43. 06.23.15
@braintree_dev @demianborba

44. 06.23.15
@braintree_dev @demianborba
demo (create app + add platforms)
cordova create app_folder io.demian.app AppName
cordova platform add ios android

45. Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface06.23.15
@braintree_dev @demianborba

46. 06.23.15
@braintree_dev @demianborba

47. • Download and install JDK 7+
• Download and install Android Studio
• Add /tools and /platform-tools to PATH
• Install SDK packages (API 22 & Build Tools 19+)
>Steps to configure Android
06.23.15
@braintree_dev @demianborba

48. 06.23.15
@braintree_dev @demianborba
Source: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

49. 06.23.15
@braintree_dev @demianborba
Source: http://developer.android.com/sdk/installing/index.html?pkg=studio

50. 06.23.15
@braintree_dev @demianborba

51. 06.23.15
@braintree_dev @demianborba

52. 06.23.15
@braintree_dev @demianborba

53. demo (build + deploy + debug)
cordova build android
cordova run android
chrome://inspect
06.23.15
@braintree_dev @demianborba

54. 06.23.15
@braintree_dev @demianborba

55. 06.23.15
@braintree_dev @demianborba
Xcode Command Line Tools

56. 06.23.15
@braintree_dev @demianborba
xcode-select --install
npm install -g ios-sim
npm install -g ios-deploy

57. demo (build + deploy + debug)
cordova build ios
cordova run ios --simulator
cordova run ios --device
06.23.15
@braintree_dev @demianborba

58. Chapter three:
Powerful libraries and frameworks
06.23.15
@braintree_dev @demianborba

59. • Pixel-perfect UI for iOS and Android (Windows soon)
• Powerful cli (ionic resources, lab, live reload etc)
• Amazing services (analytics, deploy, push etc)
• Focus on performance, built on top of Angular and
Cordova
06.23.15
@braintree_dev @demianborba
Source: http://ionicframework.com/

60. 06.23.15
@braintree_dev @demianborba
Source: http://blog.ionic.io/ionic-lab/

61. > _material
06.23.15
@braintree_dev @demianborba
Source: https://material.angularjs.org
• Following Google Material Design principles and
guidelines
• Powerful components (autocomplete, chips, fab, grid
list, input, menu, subheader, tabs etc)
• Great documentation and sample code

62. • Simple AngularJS wrappers for the most popular
Cordova and PhoneGap plugins available (camera,
touch id, oauth, geolocation, bar scanner,
contacts, device orientation, vibration etc)
• ng-cordova custom build: Great integrations with
Cordova plugins using Angular Services (factories)
> _ng-cordova
06.23.15
@braintree_dev @demianborba
Source: http://ngcordova.com/

63. Chapter four:
Accepting cards, PayPal and Bitcoin
06.23.15
@braintree_dev @demianborba

64. 06.23.15
@braintree_dev @demianborba
consumers (card holders)
merchants
gateways
acquiring banks
processors
card associations
issuing banks
PCI Compliance (Payment Card Industry)

65. 06.23.15
@braintree_dev @demianborba

66. 06.23.15
@braintree_dev @demianborba

67. 06.23.15
@braintree_dev @demianborba

68. 06.23.15
@braintree_dev @demianborba
Client-side libraries for iOS, Android,
and Web. Server-side libraries in the
language of your choice.
Source: https://www.braintreepayments.com/v.zero

69. The regular way
06.23.15
@braintree_dev @demianborba

70. 06.23.15
@braintree_dev @demianborba
Source: https://developers.braintreepayments.com/javascript+node/start/overview
npm install braintree
var braintree = require(‘braintree')
example: ejs
npm install braintree-web
bower install braintree-web
braintree.js

71. var gateway = braintree.connect({
environment: braintree.Environment.Sandbox,
merchantId: ‘your_merchant_id’,
publicKey: ‘your_merchant_public_key’,
privateKey: ‘your_merchant_private_key’
});
06.23.15
@braintree_dev @demianborba
Source: https://developers.braintreepayments.com/javascript+node/start/hello-server
app.js

72. app.get('/', function (request, response) {
gateway.clientToken.generate({}, function (err, res) {
response.render('index', {
clientToken: res.clientToken
});
});
});
06.23.15
@braintree_dev @demianborba
app.js

73. <!-- Add Dropin here -->
<div id="checkout"></div>
<script src="braintree.js"></script>
<script>
braintree.setup('<%- clientToken %>', 'dropin', {
container: ‘checkout'
});
</script>
06.23.15
@braintree_dev @demianborba
index.ejs

74. The Angular way
06.23.15
@braintree_dev @demianborba

75. 06.23.15
@braintree_dev @demianborba
Source: https://developers.braintreepayments.com/javascript+node/start/overview
npm install braintree
var braintree = require('braintree')
npm install braintree-web
bower install braintree-web

76. <!-- Add Dropin here -->
<div id="checkout"></div>
<script src="braintree.js"></script>
06.23.15
@braintree_dev @demianborba
Source: https://developers.braintreepayments.com/javascript+node/start/hello-client

77. var gateway = braintree.connect({
environment: braintree.Environment.Sandbox,
merchantId: ‘your_merchant_id’,
publicKey: ‘your_merchant_public_key’,
privateKey: ‘your_merchant_private_key’
});
06.23.15
@braintree_dev @demianborba
Source: https://developers.braintreepayments.com/javascript+node/start/hello-server

78. app.post('/api/v1/token', function (request, response) {
gateway.clientToken.generate({}, function (err, res) {
if (err) throw err;
response.json({
"client_token": res.clientToken
});
});
});
06.23.15
@braintree_dev @demianborba

79. $http({
method: 'POST',
url: 'http://localhost:3000/api/v1/token'
}).success(function (data) {
// handle response
}
06.23.15
@braintree_dev @demianborba

80. // handle response
braintree.setup(data.client_token, 'dropin', {
container: 'checkout',
paymentMethodNonceReceived: function (event, nonce) {
$http({
method: 'POST',
url: 'http://localhost:3000/api/v1/process',
data: {
amount: $scope.amount,
payment_method_nonce: nonce
}
06.23.15
@braintree_dev @demianborba

81. app.post('/api/v1/process', function (request, response) {
var transaction = request.body;
gateway.transaction.sale({
amount: transaction.amount,
paymentMethodNonce: transaction.payment_method_nonce
}, function (err, result) {
if (err) throw err;
response.json(result);
});
});
06.23.15
@braintree_dev @demianborba

82. demo (angular app taking cards, PayPal and Bitcoin)
06.23.15
@braintree_dev @demianborba

83. • Mobile Commerce
• Getting started with Cordova
• Powerful libraries and frameworks
• Accepting cards, PayPal and Bitcoin
>Chapters
06.23.15
@braintree_dev @demianborba

84. 06.23.15
@braintree_dev @demianborba
Your
Developer
Toolbox

85. The end.
Thank you, questions?
Demian Borba
<developer-advocate/>
@demianborba
github.com/demianborba
06.23.15
@braintree_dev @demianborba