React Native Payments: Bringing the Payment Request API to React Native

What if I told you that accepting payments in mobile apps could be easy and that you could use a single API to accept payments across three different platforms? In this talk, we’ll learn about the Payment Request API, a new W3C standard that dramatically simplifies accepting payments on the web, and how we can use React Native Payments to leverage it in our mobile apps.

Event: React Native Europe 2017
Location: Wroclaw, Poland

Transcript

1. React Native Payments @naoufal Bringing the Payment Request API to React Native
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
12. Payments
13. Payments @naoufal Advertising Revenue
14. Payments @naoufal Advertising Revenue Transactional Revenue
15. “Cash rules everything around me.”
16. “Cash rules everything around me.”
17. History of Digital Payments
19. @naoufal
29. - Dan Kohn
30. - Dan Kohn
31. - Dan Kohn
35. - Dan Kohn
37. - Dan Kohn
38. - Dan Kohn
42. 2014 1994
44. Android Pay
47. Payment Request API
51. “First conference in the world to focus on anything and everything React Native. No web, backend or general purpose talks. We've seen it already.”
52. React Native Payments github.com/naoufal/react-native-payments
53. React Native Payments Payment Request Contact Information Shipping Address Payment Processors github.com/naoufal/react-native-payments
54. React Native Payments Payment Request Contact Information Shipping Address Payment Processors github.com/naoufal/react-native-payments Apple Pay
55. React Native Payments Payment Request Contact Information Shipping Address Payment Processors github.com/naoufal/react-native-payments Apple Pay Android Pay
56. React Native Payments Payment Request Contact Information Shipping Address Payment Processors github.com/naoufal/react-native-payments Apple Pay Android Pay
57. React Native Payments Payment Request Contact Information Shipping Address Payment Processors github.com/naoufal/react-native-payments Apple Pay Android Pay
58. React Native Payments Payment Request Contact Information Shipping Address Payment Processors github.com/naoufal/react-native-payments Apple Pay Android Pay
59. Overview of Payment Request
60. Overview of Payment Request Payment Request with Apple Pay
61. Overview of Payment Request Payment Request with Apple Pay Payment Request with Android Pay
62. Overview of Payment Request Payment Request with Apple Pay Payment Request with Android Pay Cross-platform Payments Code
63. Overview of Payment Request Payment Request with Apple Pay Payment Request with Android Pay Cross-platform Payments Code Quick Demo
64. Payment Request @naoufal
65. W3C Standards API Payment Request
66. W3C Standards API Evolution of Autofill Payment Request
67. W3C Standards API Evolution of Autofill Returns Payment Data Payment Request
75. Payment Request with Apple Pay @naoufal
78. @naoufal
79. Payment Request with Android Pay @naoufal
82. @naoufal
85. Sharing Payment Code @naoufal
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. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
90. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
91. Payment Request Server Processing Payment Processor Contact Information Shipping Address Dynamic Shipping Prices
95. https://rnp.nof.me
96. Payment Response @naoufal
99. Payment Processors @naoufal
100. @naoufal Stripe Braintree API to add your own Payment Processor + + Payment Processors
103. Demo @naoufal
104. Create App @naoufal
106. Install React Native Payments @naoufal
108. Link Native Dependency @naoufal
110. Enable Apple Pay @naoufal
112. Enable Android Pay @naoufal
114. Add Button @naoufal
116. Show Payment Request @naoufal
118. Takeaway
119. Thank You @naoufal on Twitter and Github github.com/naoufal/react-native-payments