$30 off During Our Annual Pro Sale. View Details »

Mobile Payments with React Native

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

Naoufal Kadhom

July 10, 2017
Tweet

More Decks by Naoufal Kadhom

Other Decks in Technology

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