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
   

   View Slide

2. Hi, I’m Naoufal
   Naoufal
   @naoufal
   

   View Slide

3. Hi, I’m No-Fell
   Senior Software Engineer @ Netflix
   @naoufal
   

   View Slide

4. Hi, I’m No-Fell
   Senior Software Engineer @ Netflix
   @naoufal
   

   View Slide

5. Hi, I’m No-Fell
   Senior Software Engineer @ Netflix
   @naoufal
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Payments
    

    View Slide

13. Payments
    @naoufal
    Advertising Revenue
    

    View Slide

14. Payments
    @naoufal
    Advertising Revenue
    Transactional Revenue
    

    View Slide

15. “Cash rules everything around me.”
    

    View Slide

16. “Cash rules everything around me.”
    

    View Slide

17. History of Digital Payments
    

    View Slide

18. View Slide

19. @naoufal
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. - Dan Kohn
    

    View Slide

30. - Dan Kohn
    

    View Slide

31. - Dan Kohn
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. - Dan Kohn
    

    View Slide

36. View Slide

37. - Dan Kohn
    

    View Slide

38. - Dan Kohn
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. Android Pay
    

    View Slide

45. View Slide

46. View Slide

47. Payment Request API
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

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.”
    

    View Slide

52. React Native Payments
    github.com/naoufal/react-native-payments
    

    View Slide

53. React Native Payments
    Payment Request Contact Information
    Shipping Address
    Payment Processors
    github.com/naoufal/react-native-payments
    

    View Slide

54. React Native Payments
    Payment Request Contact Information
    Shipping Address
    Payment Processors
    github.com/naoufal/react-native-payments
    Apple Pay
    

    View Slide

55. React Native Payments
    Payment Request Contact Information
    Shipping Address
    Payment Processors
    github.com/naoufal/react-native-payments
    Apple Pay
    Android Pay
    

    View Slide

56. React Native Payments
    Payment Request Contact Information
    Shipping Address
    Payment Processors
    github.com/naoufal/react-native-payments
    Apple Pay
    Android Pay
    

    View Slide

57. React Native Payments
    Payment Request Contact Information
    Shipping Address
    Payment Processors
    github.com/naoufal/react-native-payments
    Apple Pay
    Android Pay
    

    View Slide

58. React Native Payments
    Payment Request Contact Information
    Shipping Address
    Payment Processors
    github.com/naoufal/react-native-payments
    Apple Pay
    Android Pay
    

    View Slide

59. Overview of Payment Request
    

    View Slide

60. Overview of Payment Request
    Payment Request with Apple Pay
    

    View Slide

61. Overview of Payment Request
    Payment Request with Apple Pay
    Payment Request with Android Pay
    

    View Slide

62. Overview of Payment Request
    Payment Request with Apple Pay
    Payment Request with Android Pay
    Cross-platform Payments Code
    

    View Slide

63. Overview of Payment Request
    Payment Request with Apple Pay
    Payment Request with Android Pay
    Cross-platform Payments Code
    Quick Demo
    

    View Slide

64. Payment Request
    @naoufal
    

    View Slide

65. W3C Standards API
    Payment Request
    

    View Slide

66. W3C Standards API
    Evolution of Autofill
    Payment Request
    

    View Slide

67. W3C Standards API
    Evolution of Autofill
    Returns Payment Data
    Payment Request
    

    View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. Payment Request
    with Apple Pay
    @naoufal
    

    View Slide

76. View Slide

77. View Slide

78. @naoufal
    

    View Slide

79. Payment Request
    with Android Pay
    @naoufal
    

    View Slide

80. View Slide

81. View Slide

82. @naoufal
    

    View Slide

83. View Slide

84. View Slide

85. Sharing Payment Code
    @naoufal
    

    View Slide

86. Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    

    View Slide

87. Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    

    View Slide

88. Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    

    View Slide

89. Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    

    View Slide

90. Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    

    View Slide

91. Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    

    View Slide

92. View Slide

93. View Slide

94. View Slide

95. https://rnp.nof.me
    

    View Slide

96. Payment Response
    @naoufal
    

    View Slide

97. View Slide

98. View Slide

99. Payment Processors
    @naoufal
    

    View Slide

100. @naoufal
     Stripe
     Braintree
     API to add your own Payment Processor
     +
     +
     Payment Processors
     

     View Slide

101. View Slide

102. View Slide

103. Demo
     @naoufal
     

     View Slide

104. Create App
     @naoufal
     

     View Slide

105. View Slide

106. Install React Native Payments
     @naoufal
     

     View Slide

107. View Slide

108. Link Native Dependency
     @naoufal
     

     View Slide

109. View Slide

110. Enable Apple Pay
     @naoufal
     

     View Slide

111. View Slide

112. Enable Android Pay
     @naoufal
     

     View Slide

113. View Slide

114. Add Button
     @naoufal
     

     View Slide

115. View Slide

116. Show Payment Request
     @naoufal
     

     View Slide

117. View Slide

118. Takeaway
     

     View Slide

119. Thank You
     @naoufal on Twitter and Github
     github.com/naoufal/react-native-payments
     

     View Slide