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
   

   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. Payments
    @naoufal
    

    View Slide

11. Payments
    Mobile Payments
    Web Payments
    React Native Payments
    @naoufal
    

    View Slide

12. Web Payments
    @naoufal
    

    View Slide

13. Payment Request
    @naoufal
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. Payment Request
    Saves Credit Cards
    Displays Purchase Summary
    Payment Information
    Contact Information
    Shipping Address
    One-click Purchase
    @naoufal
    

    View Slide

24. Payment Request
    Saves Credit Cards
    Displays Purchase Summary
    Payment Information
    Contact Information
    Shipping Address
    One-click Purchase
    @naoufal
    

    View Slide

25. Payment Request
    Saves Credit Cards
    Displays Purchase Summary
    Payment Information
    Contact Information
    Shipping Address
    One-click Purchase
    @naoufal
    

    View Slide

26. Payment Request
    Saves Credit Cards
    Displays Purchase Summary
    Payment Information
    Contact Information
    Shipping Address
    One-click Purchase
    @naoufal
    

    View Slide

27. Payment Request
    Saves Credit Cards
    Displays Purchase Summary
    Payment Information
    Contact Information
    Shipping Address
    One-click Purchase
    @naoufal
    

    View Slide

28. Payment Request
    Saves Credit Cards
    Displays Purchase Summary
    Payment Information
    Contact Information
    Shipping Address
    One-click Purchase
    @naoufal
    

    View Slide

29. Payment Request
    Saves Credit Cards
    Displays Purchase Summary
    Payment Information
    Contact Information
    Shipping Address
    One-click Purchase
    @naoufal
    

    View Slide

30. Payment Request
    Saves Credit Cards
    Displays Purchase Summary
    Payment Information
    Contact Information
    Shipping Address
    One-click Purchase
    @naoufal
    

    View Slide

31. Mobile Payments
    @naoufal
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. Saves Credit Cards
    Displays Purchase Summary
    Payment Data/Token
    Contact Information
    Shipping Address
    Touch ID Purchase
    @naoufal
    

    View Slide

39. Saves Credit Cards
    Displays Purchase Summary
    Payment Data/Token
    Contact Information
    Shipping Address
    Touch ID Purchase
    @naoufal
    

    View Slide

40. Saves Credit Cards
    Displays Purchase Summary
    Payment Data/Token
    Contact Information
    Shipping Address
    Touch ID Purchase
    @naoufal
    

    View Slide

41. Saves Credit Cards
    Displays Purchase Summary
    Payment Data/Token
    Contact Information
    Shipping Address
    Touch ID Purchase
    @naoufal
    

    View Slide

42. Saves Credit Cards
    Displays Purchase Summary
    Payment Data/Token
    Contact Information
    Shipping Address
    Touch ID Purchase
    @naoufal
    

    View Slide

43. Saves Credit Cards
    Displays Purchase Summary
    Payment Data/Token
    Contact Information
    Shipping Address
    Touch ID Purchase
    @naoufal
    

    View Slide

44. Saves Credit Cards
    Displays Purchase Summary
    Payment Data/Token
    Contact Information
    Shipping Address
    Touch ID Purchase
    @naoufal
    

    View Slide

45. Saves Credit Cards
    Displays Purchase Summary
    Payment Data/Token
    Contact Information
    Shipping Address
    Touch ID Purchase
    @naoufal
    

    View Slide

46. Similar Stories
    @naoufal
    

    View Slide

47. Similar Stories
    Fetch
    Geolocation
    StyleSheet
    Flexbox
    Payment Reques
    @naoufal
    

    View Slide

48. Similar Stories
    Fetch
    Geolocation
    StyleSheet
    Flexbox
    Payment Reques
    @naoufal
    

    View Slide

49. Similar Stories
    Fetch
    Geolocation
    StyleSheet
    Flexbox
    Payment Reques
    @naoufal
    

    View Slide

50. Similar Stories
    Fetch
    Geolocation
    StyleSheet
    Flexbox
    Payment Reques
    @naoufal
    

    View Slide

51. Similar Stories
    Fetch
    Geolocation
    StyleSheet
    Flexbox
    Payment Reques
    @naoufal
    

    View Slide

52. Similar Stories
    Fetch
    Geolocation
    StyleSheet
    Flexbox
    Payment Request !
    @naoufal
    

    View Slide

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

    View Slide

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

    View Slide

55. React Native Payments
    Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    github.com/naoufal/react-native-payments
    

    View Slide

56. React Native Payments
    Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    github.com/naoufal/react-native-payments
    

    View Slide

57. React Native Payments
    Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    github.com/naoufal/react-native-payments
    

    View Slide

58. React Native Payments
    Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    github.com/naoufal/react-native-payments
    

    View Slide

59. React Native Payments
    Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    github.com/naoufal/react-native-payments
    

    View Slide

60. React Native Payments
    Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    github.com/naoufal/react-native-payments
    

    View Slide

61. React Native Payments
    Payment Request
    Server Processing
    Payment Processor
    Contact Information
    Shipping Address
    Dynamic Shipping Prices
    github.com/naoufal/react-native-payments
    

    View Slide

62. React Native Payments
    Better Conversion
    No Checkout Forms
    Cross-platform Code
    github.com/naoufal/react-native-payments
    

    View Slide

63. React Native Payments
    Better Conversion
    No Checkout Forms
    Cross-platform Code
    github.com/naoufal/react-native-payments
    

    View Slide

64. React Native Payments
    Better Conversion
    No Checkout Forms
    Cross-platform Code
    github.com/naoufal/react-native-payments
    

    View Slide

65. React Native Payments
    Better Conversion
    No Checkout Forms
    Cross-platform Code
    github.com/naoufal/react-native-payments
    

    View Slide

66. Demo
    @naoufal
    

    View Slide

67. Create App
    @naoufal
    

    View Slide

68. View Slide

69. Install React Native Payments
    @naoufal
    

    View Slide

70. View Slide

71. Link Native Dependency
    @naoufal
    

    View Slide

72. View Slide

73. Enable Apple Pay
    @naoufal
    

    View Slide

74. View Slide

75. View Slide

76. Add Button
    @naoufal
    

    View Slide

77. View Slide

78. Show Payment Request
    @naoufal
    

    View Slide

79. View Slide

80. Request Contact Info
    @naoufal
    

    View Slide

81. View Slide

82. Sharing Payment Code
    @naoufal
    

    View Slide

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

    View Slide

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

    View Slide

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

    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. github.com/naoufal/react-native-payments
    

    View Slide

90. github.com/naoufal/react-native-payments
    

    View Slide

91. github.com/naoufal/react-native-payments
    

    View Slide

92. github.com/naoufal/react-native-payments
    

    View Slide

93. Connect
    @naoufal on Twitter and Github
    

    View Slide