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

0781a471438822cdb4f69bcb2efc28e0?s=47 Naoufal Kadhom
September 07, 2017

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

0781a471438822cdb4f69bcb2efc28e0?s=128

Naoufal Kadhom

September 07, 2017
Tweet

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

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  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

  18. 1969

  19. @naoufal

  20. 1971

  21. None
  22. 1989

  23. None
  24. 1991

  25. None
  26. 1994

  27. None
  28. None
  29. - Dan Kohn

  30. - Dan Kohn

  31. - Dan Kohn

  32. 2007

  33. None
  34. None
  35. - Dan Kohn

  36. 2011

  37. - Dan Kohn

  38. - Dan Kohn

  39. 2014

  40. None
  41. None
  42. 2014 1994

  43. 2015

  44. Android Pay

  45. None
  46. 2016

  47. Payment Request API

  48. None
  49. None
  50. None
  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
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. Payment Request with Apple Pay @naoufal

  76. None
  77. None
  78. @naoufal

  79. Payment Request with Android Pay @naoufal

  80. None
  81. None
  82. @naoufal

  83. None
  84. None
  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
  92. None
  93. None
  94. None
  95. https://rnp.nof.me

  96. Payment Response @naoufal

  97. None
  98. None
  99. Payment Processors @naoufal

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

    + + Payment Processors
  101. None
  102. None
  103. Demo @naoufal

  104. Create App @naoufal

  105. None
  106. Install React Native Payments @naoufal

  107. None
  108. Link Native Dependency @naoufal

  109. None
  110. Enable Apple Pay @naoufal

  111. None
  112. Enable Android Pay @naoufal

  113. None
  114. Add Button @naoufal

  115. None
  116. Show Payment Request @naoufal

  117. None
  118. Takeaway

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