API型決済サービスから見る決済の未来

PHPカンファレンス福岡2017で発表したスライドです。

APIへリクエストを送るだけでクレジットカード決済が出来てしまうAPI型決済サービス。導入もとても簡単で、直接カード情報を取り扱わないのでセキュリティ的にも安心です。 そして、各サービスを利用していると決済UIがとても似ていることに気が付きます。これが共通化されれば特別な実装なしで決済が出来てしまいます。

実はW3Cでは昨年からWeb決済 ""Payment Request API"" の仕様策定が進んでおり、一部ブラウザに既に実装されています。
そんなAPI型決済サービスの現状とPayment Request APIを踏まえて決済の未来についてお話します。

Transcript

1. APIܕܾࡁαʔϏε͔ΒݟΔ ܾࡁͷະདྷ PHPΧϯϑΝϨϯε෱Ԭ2017 ݀Ҫ ྯ @gorou_178 2017.06.10
2. ࣗݾ঺հ • גࣜձࣾΠϊϕʔλʔɾδϟύϯ • ݀Ҫ ྯ(Satoshi Anai) • WebΤϯδχΞ • @gorou_178 • ϑΝΠϧసૹαʔϏεʮtenpuʯ • WordPress • AWS
3. ࠓ೔࿩͢͜ͱ • APIܕܾࡁͷ֓ཁ • ֤ࣾαʔϏεͷUIͱػೳ • Payment Request APIʹ͍ͭͯ • ࠓޙͷܾࡁʹ͍ͭͯ
4. APIܕܾࡁαʔϏεͱ͸
5. APIܕܾࡁαʔϏεͱ͸ • ʮ͜ͷΫϨδοτΧʔυʹ100ԁ՝ۚͯ͠ʯͱ͍͏৘ใ Λૹ৴͢Δ͚ͩͰࢧ෷͍׬ྃ • ࣗ෼ͷαΠτ͚ͩͰ׬݁ • ਺ߦͷίʔυͷίϐϖͰܾࡁʹରԠͰ͖Δ
6. APIܕܾࡁαʔϏεͱ͸ • ʮ͜ͷΫϨδοτΧʔυʹ100ԁ՝ۚͯ͠ʯͱ͍͏৘ใ Λૹ৴͢Δ͚ͩͰࢧ෷͍׬ྃ • ࣗ෼ͷαΠτ͚ͩͰ׬݁ • ਺ߦͷίʔυͷίϐϖͰܾࡁʹରԠͰ͖Δ
7. StripeͰͷࢧ෷͍DEMO https://stripe.com/docs/checkout/tutorial
8. ΫϨδοτΧʔυࢧ෷͍ΛαΠτಋೖ • ެࣜαΠτʹهࡌ͞Ε͍ͯΔHTMLΛίϐϖ͢Δ͚ͩ • Stripeͷ৔߹
10. APIܕܾࡁαʔϏεͰͰ͖Δ͜ͱ • ΫϨδοτΧʔυܾࡁ • ୯ൃͷࢧ෷͍ɺఆظ՝ۚʢຖ݄ɺຖ೥ͳͲʣ • ސ٬؅ཧ • τϥΠΞϧɺΫʔϙϯ • ଟ࠼ͳ௨՟Ͱͷ՝ۚ • Apple PayɺBitcoin
11. ηΩϡϦςΟ͸େৎ෉ʁ
12. PCI DSS: άϩʔόϧηΩϡϦςΟج४ • PCI DSS • Payment Card Industry Data Security Standard • ΫϨδοτΧʔυ৘ใ͓ΑͼऔҾ৘ใΛอޢ͢ΔͨΊ ͷࠃࡍن໿ • ࠷৽൛͸V3.2 • StripeɺPAY.JP͸PCI DSSʹ४ڌ͍ͯ͠Δ
13. αΠτͷ૊ΈࠐΈ͸؆୯Ͱ͕͢ ܾࡁͰ͖Δ·Ͱʹ͸͕͔͔࣌ؒΓ·͢
14. ΫϨδοτΧʔυܾࡁͷར༻৹ࠪ • ΫϨδοτΧʔυܾࡁʹ͸৹͕ࠪඞཁ • ಛఆ঎औҾ๏ʹجͮ͘දࣔ • ঎඼ҰཡͱՁ֨ • ຊਓ֬ೝॻྨɺొهࣄ߲ূ໌ॻ • ৹͕ࠪ׬ྃ͢Δ·Ͱೖۚ͞Εͳ͍ • VisaɺMasterCardͷ৹ࠪ͸໿3Ӧۀ೔ • JCBɺAmexͳͲ͸໿15Ӧۀ೔
15. APIܕܾࡁαʔϏεͰͰ͖Δ͜ͱ • JavascriptΛهड़͢Δ͚ͩͰܾࡁʹରԠՄೳ • ୯ൃ՝ۚɺఆظ՝͕ۚͰ͖Δ • τϥΠΞϧ΍Ϋʔϙϯͷ؅ཧ͕Ͱ͖Δ • ଟ͘ͷ௨՟ʹରԠͰ͖Δ • ΫϨδοτΧʔυ৹ࠪظ͕ؒ͋ΔͷͰ஫ҙ
16. APIܕܾࡁαʔϏεͷ՝୊ • ରԠ௨՟ʹࠩ • ࢧ෷͍ํ๏ͷछྨͷࠩ • ෳ਺ͷAPIܕܾࡁαʔϏεಋೖ͠ͳ͍ͱ͍͚ͳ͍ • ֤αʔϏεͷUIΛͦΕͧΕར༻͠ͳ͍ͱ͍͚ͳ͍ • ౷߹ͨ͠UIΛ࡞੒͠ͳ͍ͱ͍͚ͳ͍
17. ֤αʔϏεͷUIΛൺֱͯ͠ΈΔ
21. UI͕΄΅ಉ͡
22. UI͕΄΅ಉ͡ ͩͬͯΫϨδοτΧʔυ͕ੈքڞ௨
23. ֤αʔϏεͷUI͕ࣅ͍ͯΔ • ΫϨδοτΧʔυ • Χʔυ൪߸ • ໊ٛ • ༗ޮظݶʢ݄/೥ʣ • CVC • ސ٬؅ཧ༻ • ϝʔϧΞυϨε • ഑ૹઌ • ॅॴɺి࿩൪߸
24. ڞ௨Խ͢Ε͹ΈΜͳϥΫʹͳΔͷͰ͸…
25. UIΛڞ௨Խ͠Α͏
26. UI͚ͩͰͳ͘ࢧ෷͍ํ๏΋ڞ௨Խ͠Α͏
28. Payment Request API • W3CͰʮPayment Request APIʯͱ͍͏໊শͰ Working DraftΛ2016೥4݄ʹॳ൛ϦϦʔε • ฤूऀͱͯ͠ɺMicrosoftɺGoogleɺMozillaɺ Facebookͷਓʑ͕ؔΘ͍ͬͯΔ • طʹAndroid Chrome͸࣮૷ࡁΈɺMicrosoft Edge͕ର ԠΛਐΊ͍ͯΔ
29. Payment Request APIͰԿ͕Ͱ͖Δͷ͔
30. ࢖༻͍ͯ͠ΔϜʔϏʔΛ͝ཡ͍ͩ͘͞ https://www.youtube.com/watch?v=hmqZxP6iTpo
31. Payment Request APIͰԿ͕Ͱ͖Δͷ͔ →UIͱڞ௨ͷࢧ෷खஈΛఏڙ
35. ग़య: ΑΓγϯϓϧͳ Web ͷܾࡁํ๏ : Payment Request API ͷ঺հ - Microsoft Edge Japan
36. ग़య: ΑΓγϯϓϧͳ Web ͷܾࡁํ๏ : Payment Request API ͷ঺հ - Microsoft Edge Japan
37. Payment Request APIͷϝϦοτ • ࢧ෷͍ϑΥʔϜ͕ڞ௨ • ΦʔτϑΟϧ͕ޮ͘ • Ұ౓ೖྗ͢Ε͹࠶ೖྗͷඞཁ͕ͳ͍ • →ར༻ऀ: ؆୯ʹߪೖͰ͖Δ • →ఏڙऀ: ߪೖͷোน͕Լ͕Δ • ࢧ෷͍ํ๏ͷબ୒ɺ഑ૹํ๏ͷબ୒΍ઃఆՄೳ • APIܾࡁαʔϏεΛ༗ޮ׆༻Ͱ͖Δ
38. Payment Request APIͷϝϦοτ • ࢧ෷͍ϑΥʔϜ͕ڞ௨ • ΦʔτϑΟϧ͕ޮ͘ • Ұ౓ೖྗ͢Ε͹࠶ೖྗͷඞཁ͕ͳ͍ • →ར༻ऀ: ؆୯ʹߪೖͰ͖Δ • →ఏڙऀ: ߪೖͷোน͕Լ͕Δ • ࢧ෷͍ϑΥʔϜ࡞੒ͷ޻਺࡟ݮ • APIܾࡁαʔϏεΛ༗ޮ׆༻Ͱ͖Δ
39. ग़య: ΑΓγϯϓϧͳ Web ͷܾࡁํ๏ : Payment Request API ͷ঺հ - Microsoft Edge Japan ͜͜ͰAPIܕܾࡁαʔϏε͕ར༻Ͱ͖Δ
42. ग़య: PAY.JP Ͱ Google Chrome ͷ Payment Request API Λ࢖ܾͬͯࡁ͢Δ - PAY.JP Engineering Blog
43. Payment Request API let methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks:['visa', 'jcb'] supportedTypes:['credit'] } }]; • ܾࡁํ๏ͷࢦఆ • ࢧ෷͍ํ๏
44. Payment Request API let details = { displayItems: [ { label: 'hoge', amount: {currency:'JPY', value:'100'} }, { label: 'fuga', amount: {currency:'JPY', value:'200'} } ], total: { label: 'total', amount: {currency:'JPY',value:'300'} } }; • ঎඼৘ใ • ௨՟ • Ձ֨ • ߹ܭ
45. Payment Request API let paymentRequest = new PaymentRequest(methodData, details); paymentRequest.show(); • UIදࣔ • ܾࡁํ๏ͱ঎ ඼৘ใΛ౉͢ • show()Ͱදࣔ
46. ࠓޙͷܾࡁͷະདྷ
47. ࠓޙͷܾࡁͷະདྷ • ϓϩάϨογϒ΢ΣϒΞϓϦ(PWA)ͷྲྀΕ • σόΠε্ͷΞϓϦͷΑ͏ʹಈ͘Webϖʔδ • Webٕज़ʢHTML, JS, CSSʣͰߏஙͰ͖Δ • ܾࡁ΋Webٕज़ͰͰ͖ΔΑ͏ʹ
 →Payment Request API
48. ࠓޙͷܾࡁͷະདྷ • Ծ૝௨՟ͷྲྀΕ • BitcoinɺEthereum(ΠʔαϦΞϜ)ɺ Ripple • Ծ૝௨՟ܾࡁ • ࠃڥ͕ͳ͍
49. ܾࡁͱ͍͏ڞ௨ͷ࢓૊Έ͕͋Ε͹ Ͳ͜Ͱ΋ߪೖͰ͖ΔΑ͏ʹͳΔ
50. ܦࡁΛม͑ͯ͠·͏ΠϯύΫτ͋Δٕज़
51. ΤϯδχΞ໨ઢͰݟΔͱ • ܾࡁͷ࢓૊Έͷڞ௨Խ • ޻਺࡟ݮ • ࿈ܞ΍ྲྀ༻͕؆୯ • ϞόΠϧߪೖମݧͷ؆ུԽ • CV͕͋Δ • ച্UP • Ϟνϕʔγϣϯ্͕Δ
52. ΤϯδχΞ໨ઢͰݟΔͱ • ࠓޙͷྲྀΕ͕ؾʹͳΔ • Edge͸ରԠ͓ͯ͠ΓϦϦʔε͕ܾ·͍ͬͯΔ • Firefox͸ϦϦʔε೔ະఆ͕ͩରԠ͸֬ఆ • iOSɺSafari͸ະఆ • iOS Chrome͸WebViewͰରԠ͠Α͏ͱ͍ͯ͠Δ • ͜ͷྲྀΕ͸ແࢹͰ͖ͳ͍
53. ࠓ͔ΒͰ͖Δ͜ͱ • APIܕܾࡁͷྲྀ༻͕Մೳ • APIܕܾࡁαʔϏεͷಋೖΛ͓ͯ͘͠ͱҠߦ͠΍͍͢ • ϓϩάϨογϒ΢ΣϒΞϓϦ΁ͷରԠ • ϞόΠϧͰͷମݧΛΑΓྑ͓ͯ͘͘͠ • ଈ
54. ·ͱΊ • APIܕܾࡁαʔϏεͷಋೖ͸؆୯ • ৹ࠪظؒ͸஫ҙ • UI͸ڞ௨Խ͠Α͏ͱ͍͏ಈ͖ • Payment Request API • ϓϩάϨογϒ΢ΣϒΞϓϦͷྲྀΕ • Ծ૝௨՟ͷྲྀΕ • APIܕܾࡁʹରԠ͍ͯ͠ΔͱҠߦ΋؆୯
55. ิ଍ • APIܕܾࡁαʔϏεΛར༻͢Δ෦෼ ͜ͷ෦෼
56. ิ଍ • ෳ਺ͷAPIܕܾࡁαʔϏεΛར༻͢Δέʔε • ྫ) ೔ຊJCBΧʔυରԠͰ͔ͭυϧܾࡁ͍ͨ͠
 ˠPAY.JPͱStripe • ͦΕͧΕͷαʔϏεͷ࣮૷͕໘౗ • WrapperΛOSSͰ࡞ͬͯΈΑ͏͔ͳʁ
58. ࣭໰ίʔφ ࠙਌ձͰ࣭໰͓଴ͪͯ͠·͢ɻ
59. ͋Γ͕ͱ͏͍͟͝·ͨ͠
60. ࢀߟࢿྉ w 4USJQF
    w 1":+1
    w 1BZNFOU
    3FRVFTU
    "1*
    w 1BZNFOU
    3FRVFTU
    "1*Ͱ؆୯ɾߴ଎ͳܾࡁΛ࣮ݱ͢Δ
    w 1$*σʔληΩϡϦςΟελϯμʔυ
    
    8JLJQFEJB
    w 1$*
    44$ 4FDVSJUZ
    4UBOEBSET
    $PVODJM
    
    ೔ຊޠ༁αΠτ
    w ΑΓγϯϓϧͳ
    8FC
    ͷܾࡁํ๏
    
    1BZNFOU
    3FRVFTU
    "1*
    ͷ঺հ
    w 1BZNFOU
    3FRVFTU
    "1*
    ౷߹ΨΠυ
    w 1BZNFOU3FRVFTU
    4BNQMF
    w 1BZNFOU
    3FRVFTU
    "1*
    
    4USJQF
    %FNP
    w (PPHMF͕΋͏͙͢ϓϩάϨογϒ΢ΣϒΞϓϦ 1SPHSFTTJWF
    8FC
    "QQT Λ"OESPJEʹຊ֨తʹ౷߹
    w Ծ૝௨՟ࢢ৔ͰࠓԿ͕ى͖͍ͯΔͷ͔ʁʕʕ࣌Ձ૯ֹԯυϧ͸όϒϧΛҙຯ͢Δͷ͔