Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Stripe x ReactNative でフリマアプリを作った話 - React Nativ...
Search
fxwx23
October 08, 2022
Programming
1
1.1k
Stripe x ReactNative でフリマアプリを作った話 - React Native Matsuri 2022
fxwx23
October 08, 2022
Tweet
Share
More Decks by fxwx23
See All by fxwx23
マルチモジュールにおけるテスト最適化
fxwx23
0
580
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
テスト駆動Kaggle
isax1015
0
300
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.6k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
130
PipeCDのプラグイン化で目指すところ
warashi
1
280
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
How to train your dragon (web standard)
notwaldorf
96
6.1k
How to Ace a Technical Interview
jacobian
278
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Cult of Friendly URLs
andyhume
79
6.5k
Optimizing for Happiness
mojombo
379
70k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
@fxwx23 Stripe x React Native Ͱ ϑϦϚΞϓϦΛ࡞ͬͨ React Native Matsuri
2022 / 2022.10.08
ࣗݾհ ɾᬒ ࢙و (Fumitaka Watanabe) ɾגࣜձࣾNewelse ڞಉۀऀ݉SWE (2014~) ɾGitHub: @fxwx23
ɾTwitter: @fxwx23 ɾࣗࣾϓϩμΫτͷ։ൃશൠΛ୲ (Go, TypeScript)
https://unstreet.jp
UNSTREET AIؑఆ͖ͭεχʔΧʔϑϦϚΞϓϦ ɾεχʔΧʔಛԽͷϑϦϚػೳΛఏڙ։࢝ (20228݄~) ɾAIը૾ؑఆαʔϏεͱఏܞِ͠Λରࡦ ɾ20186݄ εχʔΧʔൃചใΞϓϦͱͯ͠ ϦϦʔε
ຊͷ͓ ɾͳͥ React Native ʹҠߦ͔ͨ͠ ɾSwiftωΠςΟϒΞϓϦ͔ΒͲ͏Ҡߦ͢Δ͔ ɾReact Native ͜Μͳײ͡Ͱͬͯ·͢ ɾϑϦϚʹ͓͚Δ
stripe-react-native ͷ׆༻
Why React Native ?
ϑϦϚҎલ ɾεχʔΧʔͳͲͷൃചใͳͲΛνΣο ΫͰ͖ΔϝσΟΞΞϓϦͱͯ͠ӡ༻͍ͯ͠ ͨ ɾiOSΞϓϦͷΈఏڙɺશSwift ɾUIKit + Interface Builder (Storyboard)
C2C Support
େ෯ͳUIͷมߋ͕ൃੜ ɾUIKit + Interface Builder ർΕͨ😂 ɾ΄΅৽نViewͰɺ࣮࣭ϑϧϦϓϨΠε ▪ Hot reload
ͳ͍ͷͰมߋͷ֬ೝʹBuildɺԹ͔Έͷ͋ΔखಈͷIBOutlet etc ▪ એݴతUI͕ओྲྀʹͳ͖͍ͬͯͯΔ & Interface Builder σΟείϯʹͳΔͷා͍ ɾAndroidग़͍ͨ͠
࣮ࡍʹҠߦલʹߦΘΕͨ GitHub Discussions
ͨΒ͞Εͨબࢶ ɾSwiftUI + UIKit ɾUIKit + Interface Builder ɾReact Native
ɾFlutter
SwiftUI + UIKit ɾকདྷੑ͋Δ͠ɺSwiftࣗମਪͤΔ ɾ৽نViewͷΈSwiftUIΛར༻͢Δݱ࣮࿏ઢ ɾಈ࡞ʹएׯෆ҆ʁ iOS14 ΛΕͳΜͱ͔ͳΔ͔ ɾֶशίετ͋ΓͰɺՌʹAndroidΞϓϦͳ͍…
Flutter ɾຊͰRNΑΓਓޱଟ͍ʁ࠾༻໘Ͱ͍͍ͷ͔ʁ ɾશͯDartʹ͢Δ͘Β͍ͷؾ࣋ͪͳΒΞϦ ɾ৽نϓϩδΣΫτͳΒ࠾༻ͯ͠ྑ͔ͬͨ
React Native ɾࣾͷࣗಈԽπʔϧʹ Firebase Functions/Node.jsɺTypeScript ɾReact (Next.js) ͍ͬͯͨ ɾReact HooksɺLinter
ͳͲͷݟ
React Native Λ࠾༻ ɾࣾͷࣗಈԽπʔϧʹ Firebase Functions/Node.jsɺTypeScript ɾReact (Next.js) ͍ͬͯͨ ɾReact
HooksɺLinter ͳͲͷݟ ɾपғͰ૬ஊͰ͖Δਓ͕͍ͨͷޙԡ͠
Swift → React Native
Ҡߦʹ͋ͨΓ ɾӨڹൣғ͕ͳ͍Android൛ΛઌߦͰϦϦʔε ɾطଘver͔Βͷमਖ਼ϦϦʔεͱฒߦ͢Δඞཁੑ ɾطଘϢʔβʔ͕Ξοϓσʔτͯ͠ࣄނΒͳ͍ etc
Ҡߦʹ͋ͨΓ ɾӨڹൣғ͕ͳ͍Android൛ΛઌߦͰϦϦʔε ɾطଘver͔Βͷमਖ਼ϦϦʔεͱฒߦ͢Δඞཁੑ ɾطଘϢʔβʔ͕Ξοϓσʔτͯ͠ࣄނΒͳ͍ etc
Ҡߦʹ͋ͨΓ ɾӨڹൣғ͕ͳ͍Android൛ΛઌߦͰϦϦʔε ɾطଘver͔Βͷमਖ਼ϦϦʔεͱฒߦ͢Δඞཁੑ ɾطଘϢʔβʔ͕Ξοϓσʔτͯ͠ࣄނΒͳ͍ etc
։ൃΛฒߦ͢Δ্Ͱ ɾBundle ID ΛطଘωΠςΟϒΞϓϦͱ͚ͯ։ൃΛελʔτ ɾωΠςΟϒଆʹमਖ਼͕ൃੜͯ͠ετϨεͳ͘ಈ͚Δ ɾωΠςΟϒଆ͕ίʔυϑϦʔζ͔ͯ͠Β Bundle ID Λಉ͡ͷʹ
Bundle ID: com.newelse.kix Bundle ID: com.newelse.kix Path: /var/abcdef…/KIX.app/ Path: /var/012345…/KIX.app/
ver 4.8.6 ver 5.0.0
Ҡߦςετ ɾطଘωΠςΟϒΞϓϦΛXcodeͰϏϧυͯ͠Πϯετʔϧ ɾͦͷޙʹ React Native ͷΞϓϦΛΠϯετʔϧͯ֬͠ೝ ɾωΠςΟϒΞϓϦͰอଘ͞ΕͨϩʔΧϧσʔλΛਖ਼͘͠ಡΈग़͢ ▪ NSUserDefaultsɺRealmɺSQLite
NSUserDefaults ɾϢʔβʔͷઃఆใ (Preferences) ΛӬଓతʹอଘ͢Δ͜ͱ͕త ɾΞϓϦΛআ͢Δͱ NSUserDefaults ফ͑Δ ɾNSData, NSString, NSNumber,
NSDate, NSArray, or NSDictionary ▪ ࢀর: https://developer.apple.com/documentation/foundation/nsuserdefaults
Settings https://reactnative.dev/docs/settings
AsyncStorage
AsyncStorage ɾAndroidͰಉ͡Λอ࣋͢ΔͨΊɺSettingsಡΈग़͠ݶఆ ɾอଘͰ͖Δͷશͯ string → typeof Ͱௐͯదʹม ɾNSDate, NSData
͖͋ΒΊΔ
NSDate, NSData null ѻ͍ ɾRCTJSONClean Ͱॲཧ͞ΕΔσʔλΫϥεݶΒΕΔ ▪ NSString, NSMutableString,
NSNumber, NSNull ͷΈ ▪ ࢀর: https://github.com/facebook/react-native/blob/main/React/Base/RCTUtils.m#L165 ɾNSUserDefaultsͷσʔλඞͣ RCTJSONClean Λ௨Δ
Realm JS ɾSwift SDK Ͱ࡞ͨ͠σʔλ ಡΈࠐΊΔ ▪ [ ] Ͱ
Realm.List<T> Λදݱ ▪ ࢀর: https://www.mongodb.com/docs/realm/sdk/react- native/examples/de fi ne-a-realm-object-model/ #supported-property-types ɾSchemaͰఆٛ ɾHermes Support ݱ࣌ͰRC
React Native Ͱͷߏ ɾExpo Modules ɾExpo Bare Work fl ow
ɾRecoil, Sentry, Realm, React Navigation (v6) ɾBase Component
React Native Ͱͷߏ ɾExpo Modules ɾExpo Bare Work fl ow
ɾRecoil, Sentry, Realm, React Navigation (v6) ɾBase Component
Done SwiftΞϓϦͷRepositoryͷݴޠߏ React NativeΞϓϦͷRepositoryͷݴޠߏ
Stripe https://stripe.com/jp
Stripe Connect ϓϥοτϑΥʔϜͱϚʔέοτϓϨΠεͷͨΊͷܾࡁΠϯϑϥ ɾച্ͷೖۚΛAPIͰཧ ɾ135 Ҏ্ͷ௨՟ͱ֤ࠃͷ͞·͟·ͳࢧ͍ํ๏ʹରԠ ɾސ٬֬ೝ (KYC) ʹରԠ https://stripe.com/jp/connect
@stripe/stripe-react-native ɾReactNative͚ͷStripe༻ܾࡁϥΠϒϥϦ ɾओʹܾࡁใͷऩूͱܾࡁͷ֬ఆΛ୲͍ɺͦͷͨΊͷUIͱը໘ཁૉΛఏڙ ɾstripe-android, stripe-ios Λར༻͢ΔͨΊͷϒϦοδ
Getting Started ɾinitStripe ͔ StripeProvider ͰॳظԽॲཧ ɾuseStripe ͢ΔલʹॳظԽ͓ͯ͘͠ඞཁ͕͋Δ ɾॳظԽ࣌ʹͤΔ Params
ಉ͡
None
ܾࡁใͷऩू ɾCardField Component ͔ Payment Element Λར༻
ܾࡁใͷऩू ɾCardField Component ͔ Payment Element Λར༻
Payment Element ҆શͰຒΊࠐΈՄೳͳ 1 ͭͷ UI ίϯϙʔωϯτ ɾೖྗϑΟʔϧυΛࣗಈతʹௐ͠ɺࢧ͍ํ๏ͱࠃʹج͍ͮͯใΛऩू ɾೖྗݕূɺϚεΩϯάɺελΠϧॲཧɺΤϥʔॲཧ ɾސ٬ͷΧʔυใΛཧ
Payment Element ҆શͰຒΊࠐΈՄೳͳ 1 ͭͷ UI ίϯϙʔωϯτ ɾೖྗϑΟʔϧυΛࣗಈతʹௐ͠ɺࢧ͍ํ๏ͱࠃʹج͍ͮͯใΛऩू ɾೖྗݕূɺϚεΩϯάɺελΠϧॲཧɺΤϥʔॲཧ ɾސ٬ͷΧʔυใΛཧ
None
None
None
None
None
None
None
ܾࡁॲཧͱ ࢥ͑ͳ͍΄Ͳ ؆ܿ
@stripe/stripe-react-native ɾγϯϓϧͳΠϯλʔϑΣΠεͰωΠςΟϒରԠͷUIΛར༻Ͱ͖Δ ɾ3DηΩϡΞʹ༰қʹରԠՄೳ ɾޱ࠲ใͷొʹରԠ (createToken)
@stripe/stripe-react-native ɾγϯϓϧͳΠϯλʔϑΣΠεͰωΠςΟϒରԠͷUIΛར༻Ͱ͖Δ ɾ3DηΩϡΞʹ༰қʹରԠՄೳ ɾޱ࠲ใͷొʹରԠ (createToken) https://stripe.com/docs/payments/accept-a-payment?platform=react-native
React Native ʹҠߦͯ͠Έͯ ɾ։ൃ͕֨ஈʹ্͕ͬͨ ▪ ಉ࣌ʹAndroid (or iOS) ͕Ͱ͖͕͋ΔͷΫϩεϓϥοτϑΥʔϜͷޣຯ ɾTypeScript,
React ͷݟԠ༻ͷαΠΫϧ͕ճΔ ɾWebϑϩϯτΤϯυͱͷ༥߹ ▪ React GUI, Expo Router etc ɾΫϥΠΞϯταΠυͷ૯߹֨ಆٕ
We are hiring!
We are hiring!
ࣗݾհ ɾᬒ ࢙و (Fumitaka Watanabe) ɾגࣜձࣾNewelse ڞಉۀऀ݉SWE (2014~) ɾGitHub: @fxwx23
ɾTwitter: @fxwx23 ɾࣗࣾϓϩμΫτͷ։ൃશൠΛ୲ (Go, TypeScript)
Thanks