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

Mobile Payments with React Native

Naoufal Kadhom
July 10, 2017
Technology
2
700

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

See All by Naoufal Kadhom
React Native Payments: Bringing the Payment Request API to React Native
naoufal
2
2.4k
Exposing Native Modules with React Native
naoufal
1
680
An Introduction to React Native
naoufal
0
790

Other Decks in Technology

See All in Technology
從心開始的純軟之路
line_developers_tw
PRO
0
1k
Java in containers and serverless
takesection
0
110
なぜ
リアーキテクティング専任チームを作ったのか
kei_s
PRO
2
1k
分散型SNS最新状況
kojira
0
190
フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記
wakamsha
5
3.9k
EventStormingとRDRA2.0で大規模レガシーシステムのフルリニューアルPJに挑む
leveragestech
0
1.1k
kintone テクニカルライター採用ピッチ資料
cybozuinsideout
PRO
0
710
231116 あつまれ入力デバイスの沼 Ryu.Cyberさん
comucal
PRO
0
170
LangChainとフルサーバーレスですばやくセキュアなRAGアプリをつくるための実践解説/LangChain_Book
yoshidashingo
8
2.9k
技術的負債あるある早く言いたい〜/RookiesLT-link-and-motivation
lmi
0
2k
GPT APIを使ったテキスト生成コンペ@YANS2023に参加した話
naohachi89
2
660
リアルで価値を発揮するデジタルプロダクトを開発する
aki_iinuma
0
940

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
23
5.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
17
1.4k
What's in a price? How to price your products and services
michaelherold
236
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
351
28k
Debugging Ruby Performance
tmm1
68
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
34
2.2k
RailsConf 2023
tenderlove
0
350
Statistics for Hackers
jakevdp
788
220k
Fireside Chat
paigeccino
18
2.3k
Side Projects
sachag
450
39k

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