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

0781a471438822cdb4f69bcb2efc28e0?s=128

Naoufal Kadhom

July 10, 2017
Tweet

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

  6. None
  7. None
  8. None
  9. None
  10. Payments @naoufal

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

  12. Web Payments @naoufal

  13. Payment Request @naoufal

  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  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

  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  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

  68. None
  69. Install React Native Payments @naoufal

  70. None
  71. Link Native Dependency @naoufal

  72. None
  73. Enable Apple Pay @naoufal

  74. None
  75. None
  76. Add Button @naoufal

  77. None
  78. Show Payment Request @naoufal

  79. None
  80. Request Contact Info @naoufal

  81. None
  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