Mobile Payments with React Native

In this talk, we’ll dive into the payments landscape and explore the various ways that we can accept payments in our React Native applications. We’ll then focus in on mobile wallets and see how we can leverage them to eliminate the payment form and reduce friction in our checkouts. Finally, we’ll learn how we can do all this while sharing our payment code across platforms.

Event: Chain React 2017
Location: Portland, OR
Video: https://www.youtube.com/watch?v=sTretbawbkg

Transcript

1. Mobile Payments with React Native @naoufal
2. Hi, I’m Naoufal Naoufal @naoufal
3. Hi, I’m No-Fell Senior Software Engineer @ Netflix @naoufal
4. Hi, I’m No-Fell Senior Software Engineer @ Netflix @naoufal
5. Hi, I’m No-Fell Senior Software Engineer @ Netflix @naoufal
10. Payments @naoufal
11. Payments Mobile Payments Web Payments React Native Payments @naoufal
12. Web Payments @naoufal
13. Payment Request @naoufal
23. Payment Request Saves Credit Cards Displays Purchase Summary Payment Information Contact Information Shipping Address One-click Purchase @naoufal
24. Payment Request Saves Credit Cards Displays Purchase Summary Payment Information Contact Information Shipping Address One-click Purchase @naoufal
25. Payment Request Saves Credit Cards Displays Purchase Summary Payment Information Contact Information Shipping Address One-click Purchase @naoufal
26. Payment Request Saves Credit Cards Displays Purchase Summary Payment Information Contact Information Shipping Address One-click Purchase @naoufal
27. Payment Request Saves Credit Cards Displays Purchase Summary Payment Information Contact Information Shipping Address One-click Purchase @naoufal
28. Payment Request Saves Credit Cards Displays Purchase Summary Payment Information Contact Information Shipping Address One-click Purchase @naoufal
29. Payment Request Saves Credit Cards Displays Purchase Summary Payment Information Contact Information Shipping Address One-click Purchase @naoufal
30. Payment Request Saves Credit Cards Displays Purchase Summary Payment Information Contact Information Shipping Address One-click Purchase @naoufal
31. Mobile Payments @naoufal
38. Saves Credit Cards Displays Purchase Summary Payment Data/Token Contact Information Shipping Address Touch ID Purchase @naoufal
39. Saves Credit Cards Displays Purchase Summary Payment Data/Token Contact Information Shipping Address Touch ID Purchase @naoufal
40. Saves Credit Cards Displays Purchase Summary Payment Data/Token Contact Information Shipping Address Touch ID Purchase @naoufal
41. Saves Credit Cards Displays Purchase Summary Payment Data/Token Contact Information Shipping Address Touch ID Purchase @naoufal
42. Saves Credit Cards Displays Purchase Summary Payment Data/Token Contact Information Shipping Address Touch ID Purchase @naoufal
43. Saves Credit Cards Displays Purchase Summary Payment Data/Token Contact Information Shipping Address Touch ID Purchase @naoufal
44. Saves Credit Cards Displays Purchase Summary Payment Data/Token Contact Information Shipping Address Touch ID Purchase @naoufal
45. Saves Credit Cards Displays Purchase Summary Payment Data/Token Contact Information Shipping Address Touch ID Purchase @naoufal
46. Similar Stories @naoufal
47. Similar Stories Fetch Geolocation StyleSheet Flexbox Payment Reques @naoufal
48. Similar Stories Fetch Geolocation StyleSheet Flexbox Payment Reques @naoufal
49. Similar Stories Fetch Geolocation StyleSheet Flexbox Payment Reques @naoufal
50. Similar Stories Fetch Geolocation StyleSheet Flexbox Payment Reques @naoufal
51. Similar Stories Fetch Geolocation StyleSheet Flexbox Payment Reques @naoufal
52. Similar Stories Fetch Geolocation StyleSheet Flexbox Payment Request ! @naoufal
53. React Native Payments github.com/naoufal/react-native-payments
54. React Native Payments github.com/naoufal/react-native-payments
55. React Native Payments Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices github.com/naoufal/react-native-payments
56. React Native Payments Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices github.com/naoufal/react-native-payments
57. React Native Payments Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices github.com/naoufal/react-native-payments
58. React Native Payments Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices github.com/naoufal/react-native-payments
59. React Native Payments Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices github.com/naoufal/react-native-payments
60. React Native Payments Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices github.com/naoufal/react-native-payments
61. React Native Payments Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices github.com/naoufal/react-native-payments
62. React Native Payments Better Conversion No Checkout Forms Cross-platform Code github.com/naoufal/react-native-payments
63. React Native Payments Better Conversion No Checkout Forms Cross-platform Code github.com/naoufal/react-native-payments
64. React Native Payments Better Conversion No Checkout Forms Cross-platform Code github.com/naoufal/react-native-payments
65. React Native Payments Better Conversion No Checkout Forms Cross-platform Code github.com/naoufal/react-native-payments
66. Demo @naoufal
67. Create App @naoufal
69. Install React Native Payments @naoufal
71. Link Native Dependency @naoufal
73. Enable Apple Pay @naoufal
76. Add Button @naoufal
78. Show Payment Request @naoufal
80. Request Contact Info @naoufal
82. Sharing Payment Code @naoufal
83. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
84. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
85. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
86. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
87. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
88. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
89. github.com/naoufal/react-native-payments
90. github.com/naoufal/react-native-payments
91. github.com/naoufal/react-native-payments
92. github.com/naoufal/react-native-payments
93. Connect @naoufal on Twitter and Github