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
   

   View Slide

2. ࣗݾ঺հ
   • גࣜձࣾΠϊϕʔλʔɾδϟύϯ
   • ݀Ҫ ྯ(Satoshi Anai)
   • WebΤϯδχΞ
   • @gorou_178
   • ϑΝΠϧసૹαʔϏεʮtenpuʯ
   • WordPress
   • AWS
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   • APIܕܾࡁͷ֓ཁ
   • ֤ࣾαʔϏεͷUIͱػೳ
   • Payment Request APIʹ͍ͭͯ
   • ࠓޙͷܾࡁʹ͍ͭͯ
   

   View Slide

4. APIܕܾࡁαʔϏεͱ͸
   

   View Slide

5. APIܕܾࡁαʔϏεͱ͸
   • ʮ͜ͷΫϨδοτΧʔυʹ100ԁ՝ۚͯ͠ʯͱ͍͏৘ใ
   Λૹ৴͢Δ͚ͩͰࢧ෷͍׬ྃ
   • ࣗ෼ͷαΠτ͚ͩͰ׬݁
   • ਺ߦͷίʔυͷίϐϖͰܾࡁʹରԠͰ͖Δ
   

   View Slide

6. APIܕܾࡁαʔϏεͱ͸
   • ʮ͜ͷΫϨδοτΧʔυʹ100ԁ՝ۚͯ͠ʯͱ͍͏৘ใ
   Λૹ৴͢Δ͚ͩͰࢧ෷͍׬ྃ
   • ࣗ෼ͷαΠτ͚ͩͰ׬݁
   • ਺ߦͷίʔυͷίϐϖͰܾࡁʹରԠͰ͖Δ
   

   View Slide

7. StripeͰͷࢧ෷͍DEMO
   https://stripe.com/docs/checkout/tutorial
   

   View Slide

8. ΫϨδοτΧʔυࢧ෷͍ΛαΠτಋೖ
   • ެࣜαΠτʹهࡌ͞Ε͍ͯΔHTMLΛίϐϖ͢Δ͚ͩ
   • Stripeͷ৔߹
   

   View Slide

9. View Slide

10. APIܕܾࡁαʔϏεͰͰ͖Δ͜ͱ
    • ΫϨδοτΧʔυܾࡁ
    • ୯ൃͷࢧ෷͍ɺఆظ՝ۚʢຖ݄ɺຖ೥ͳͲʣ
    • ސ٬؅ཧ
    • τϥΠΞϧɺΫʔϙϯ
    • ଟ࠼ͳ௨՟Ͱͷ՝ۚ
    • Apple PayɺBitcoin
    

    View Slide

11. ηΩϡϦςΟ͸େৎ෉ʁ
    

    View Slide

12. PCI DSS: άϩʔόϧηΩϡϦςΟج४
    • PCI DSS
    • Payment Card Industry Data Security Standard
    • ΫϨδοτΧʔυ৘ใ͓ΑͼऔҾ৘ใΛอޢ͢ΔͨΊ
    ͷࠃࡍن໿
    • ࠷৽൛͸V3.2
    • StripeɺPAY.JP͸PCI DSSʹ४ڌ͍ͯ͠Δ
    

    View Slide

13. αΠτͷ૊ΈࠐΈ͸؆୯Ͱ͕͢
    ܾࡁͰ͖Δ·Ͱʹ͸͕͔͔࣌ؒΓ·͢
    

    View Slide

14. ΫϨδοτΧʔυܾࡁͷར༻৹ࠪ
    • ΫϨδοτΧʔυܾࡁʹ͸৹͕ࠪඞཁ
    • ಛఆ঎औҾ๏ʹجͮ͘දࣔ
    • ঎඼ҰཡͱՁ֨
    • ຊਓ֬ೝॻྨɺొهࣄ߲ূ໌ॻ
    • ৹͕ࠪ׬ྃ͢Δ·Ͱೖۚ͞Εͳ͍
    • VisaɺMasterCardͷ৹ࠪ͸໿3Ӧۀ೔
    • JCBɺAmexͳͲ͸໿15Ӧۀ೔
    

    View Slide

15. APIܕܾࡁαʔϏεͰͰ͖Δ͜ͱ
    • JavascriptΛهड़͢Δ͚ͩͰܾࡁʹରԠՄೳ
    • ୯ൃ՝ۚɺఆظ՝͕ۚͰ͖Δ
    • τϥΠΞϧ΍Ϋʔϙϯͷ؅ཧ͕Ͱ͖Δ
    • ଟ͘ͷ௨՟ʹରԠͰ͖Δ
    • ΫϨδοτΧʔυ৹ࠪظ͕ؒ͋ΔͷͰ஫ҙ
    

    View Slide

16. APIܕܾࡁαʔϏεͷ՝୊
    • ରԠ௨՟ʹࠩ
    • ࢧ෷͍ํ๏ͷछྨͷࠩ
    • ෳ਺ͷAPIܕܾࡁαʔϏεಋೖ͠ͳ͍ͱ͍͚ͳ͍
    • ֤αʔϏεͷUIΛͦΕͧΕར༻͠ͳ͍ͱ͍͚ͳ͍
    • ౷߹ͨ͠UIΛ࡞੒͠ͳ͍ͱ͍͚ͳ͍
    

    View Slide

17. ֤αʔϏεͷUIΛൺֱͯ͠ΈΔ
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. UI͕΄΅ಉ͡
    

    View Slide

22. UI͕΄΅ಉ͡
    ͩͬͯΫϨδοτΧʔυ͕ੈքڞ௨
    

    View Slide

23. ֤αʔϏεͷUI͕ࣅ͍ͯΔ
    • ΫϨδοτΧʔυ
    • Χʔυ൪߸
    • ໊ٛ
    • ༗ޮظݶʢ݄/೥ʣ
    • CVC
    • ސ٬؅ཧ༻
    • ϝʔϧΞυϨε
    • ഑ૹઌ
    • ॅॴɺి࿩൪߸
    

    View Slide

24. ڞ௨Խ͢Ε͹ΈΜͳϥΫʹͳΔͷͰ͸…
    

    View Slide

25. UIΛڞ௨Խ͠Α͏
    

    View Slide

26. UI͚ͩͰͳ͘ࢧ෷͍ํ๏΋ڞ௨Խ͠Α͏
    

    View Slide

27. View Slide

28. Payment Request API
    • W3CͰʮPayment Request APIʯͱ͍͏໊শͰ
    Working DraftΛ2016೥4݄ʹॳ൛ϦϦʔε
    • ฤूऀͱͯ͠ɺMicrosoftɺGoogleɺMozillaɺ
    Facebookͷਓʑ͕ؔΘ͍ͬͯΔ
    • طʹAndroid Chrome͸࣮૷ࡁΈɺMicrosoft Edge͕ର
    ԠΛਐΊ͍ͯΔ
    

    View Slide

29. Payment Request APIͰԿ͕Ͱ͖Δͷ͔
    

    View Slide

30. ࢖༻͍ͯ͠ΔϜʔϏʔΛ͝ཡ͍ͩ͘͞
    https://www.youtube.com/watch?v=hmqZxP6iTpo
    

    View Slide

31. Payment Request APIͰԿ͕Ͱ͖Δͷ͔
    →UIͱڞ௨ͷࢧ෷खஈΛఏڙ
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. ग़య: ΑΓγϯϓϧͳ Web ͷܾࡁํ๏ : Payment Request API ͷ঺հ - Microsoft Edge Japan
    

    View Slide

36. ग़య: ΑΓγϯϓϧͳ Web ͷܾࡁํ๏ : Payment Request API ͷ঺հ - Microsoft Edge Japan
    

    View Slide

37. Payment Request APIͷϝϦοτ
    • ࢧ෷͍ϑΥʔϜ͕ڞ௨
    • ΦʔτϑΟϧ͕ޮ͘
    • Ұ౓ೖྗ͢Ε͹࠶ೖྗͷඞཁ͕ͳ͍
    • →ར༻ऀ: ؆୯ʹߪೖͰ͖Δ
    • →ఏڙऀ: ߪೖͷোน͕Լ͕Δ
    • ࢧ෷͍ํ๏ͷબ୒ɺ഑ૹํ๏ͷબ୒΍ઃఆՄೳ
    • APIܾࡁαʔϏεΛ༗ޮ׆༻Ͱ͖Δ
    

    View Slide

38. Payment Request APIͷϝϦοτ
    • ࢧ෷͍ϑΥʔϜ͕ڞ௨
    • ΦʔτϑΟϧ͕ޮ͘
    • Ұ౓ೖྗ͢Ε͹࠶ೖྗͷඞཁ͕ͳ͍
    • →ར༻ऀ: ؆୯ʹߪೖͰ͖Δ
    • →ఏڙऀ: ߪೖͷোน͕Լ͕Δ
    • ࢧ෷͍ϑΥʔϜ࡞੒ͷ޻਺࡟ݮ
    • APIܾࡁαʔϏεΛ༗ޮ׆༻Ͱ͖Δ
    

    View Slide

39. ग़య: ΑΓγϯϓϧͳ Web ͷܾࡁํ๏ : Payment Request API ͷ঺հ - Microsoft Edge Japan
    ͜͜ͰAPIܕܾࡁαʔϏε͕ར༻Ͱ͖Δ
    

    View Slide

40. View Slide

41. View Slide

42. ग़య: PAY.JP Ͱ Google Chrome ͷ Payment Request API Λ࢖ܾͬͯࡁ͢Δ - PAY.JP Engineering Blog
    

    View Slide

43. Payment Request API
    let methodData = [{
    supportedMethods: ['basic-card'],
    data: {
    supportedNetworks:['visa', 'jcb']
    supportedTypes:['credit']
    }
    }];
    • ܾࡁํ๏ͷࢦఆ
    • ࢧ෷͍ํ๏
    

    View Slide

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'}
    }
    };
    • ঎඼৘ใ
    • ௨՟
    • Ձ֨
    • ߹ܭ
    

    View Slide

45. Payment Request API
    let paymentRequest =
    new PaymentRequest(methodData,
    details);
    paymentRequest.show();
    • UIදࣔ
    • ܾࡁํ๏ͱ঎
    ඼৘ใΛ౉͢
    • show()Ͱදࣔ
    

    View Slide

46. ࠓޙͷܾࡁͷະདྷ
    

    View Slide

47. ࠓޙͷܾࡁͷະདྷ
    • ϓϩάϨογϒ΢ΣϒΞϓϦ(PWA)ͷྲྀΕ
    • σόΠε্ͷΞϓϦͷΑ͏ʹಈ͘Webϖʔδ
    • Webٕज़ʢHTML, JS, CSSʣͰߏஙͰ͖Δ
    • ܾࡁ΋Webٕज़ͰͰ͖ΔΑ͏ʹ

    →Payment Request API
    

    View Slide

48. ࠓޙͷܾࡁͷະདྷ
    • Ծ૝௨՟ͷྲྀΕ
    • BitcoinɺEthereum(ΠʔαϦΞϜ)ɺ Ripple
    • Ծ૝௨՟ܾࡁ
    • ࠃڥ͕ͳ͍
    

    View Slide

49. ܾࡁͱ͍͏ڞ௨ͷ࢓૊Έ͕͋Ε͹
    Ͳ͜Ͱ΋ߪೖͰ͖ΔΑ͏ʹͳΔ
    

    View Slide

50. ܦࡁΛม͑ͯ͠·͏ΠϯύΫτ͋Δٕज़
    

    View Slide

51. ΤϯδχΞ໨ઢͰݟΔͱ
    • ܾࡁͷ࢓૊Έͷڞ௨Խ
    • ޻਺࡟ݮ
    • ࿈ܞ΍ྲྀ༻͕؆୯
    • ϞόΠϧߪೖମݧͷ؆ུԽ
    • CV͕͋Δ
    • ച্UP
    • Ϟνϕʔγϣϯ্͕Δ
    

    View Slide

52. ΤϯδχΞ໨ઢͰݟΔͱ
    • ࠓޙͷྲྀΕ͕ؾʹͳΔ
    • Edge͸ରԠ͓ͯ͠ΓϦϦʔε͕ܾ·͍ͬͯΔ
    • Firefox͸ϦϦʔε೔ະఆ͕ͩରԠ͸֬ఆ
    • iOSɺSafari͸ະఆ
    • iOS Chrome͸WebViewͰରԠ͠Α͏ͱ͍ͯ͠Δ
    • ͜ͷྲྀΕ͸ແࢹͰ͖ͳ͍
    

    View Slide

53. ࠓ͔ΒͰ͖Δ͜ͱ
    • APIܕܾࡁͷྲྀ༻͕Մೳ
    • APIܕܾࡁαʔϏεͷಋೖΛ͓ͯ͘͠ͱҠߦ͠΍͍͢
    • ϓϩάϨογϒ΢ΣϒΞϓϦ΁ͷରԠ
    • ϞόΠϧͰͷମݧΛΑΓྑ͓ͯ͘͘͠
    • ଈ
    

    View Slide

54. ·ͱΊ
    • APIܕܾࡁαʔϏεͷಋೖ͸؆୯
    • ৹ࠪظؒ͸஫ҙ
    • UI͸ڞ௨Խ͠Α͏ͱ͍͏ಈ͖
    • Payment Request API
    • ϓϩάϨογϒ΢ΣϒΞϓϦͷྲྀΕ
    • Ծ૝௨՟ͷྲྀΕ
    • APIܕܾࡁʹରԠ͍ͯ͠ΔͱҠߦ΋؆୯
    

    View Slide

55. ิ଍
    • APIܕܾࡁαʔϏεΛར༻͢Δ෦෼
    ͜ͷ෦෼
    

    View Slide

56. ิ଍
    • ෳ਺ͷAPIܕܾࡁαʔϏεΛར༻͢Δέʔε
    • ྫ) ೔ຊJCBΧʔυରԠͰ͔ͭυϧܾࡁ͍ͨ͠

    ˠPAY.JPͱStripe
    • ͦΕͧΕͷαʔϏεͷ࣮૷͕໘౗
    • WrapperΛOSSͰ࡞ͬͯΈΑ͏͔ͳʁ
    

    View Slide

57. View Slide

58. ࣭໰ίʔφ
    ࠙਌ձͰ࣭໰͓଴ͪͯ͠·͢ɻ
    

    View Slide

59. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide

60. ࢀߟࢿྉ
    w 4USJQF
    w 1":+1
    w 1BZNFOU3FRVFTU"1*
    w 1BZNFOU3FRVFTU"1*Ͱ؆୯ɾߴ଎ͳܾࡁΛ࣮ݱ͢Δ
    w 1$*σʔληΩϡϦςΟελϯμʔυ8JLJQFEJB
    w 1$*44$ 4FDVSJUZ4UBOEBSET$PVODJM
    ೔ຊޠ༁αΠτ
    w ΑΓγϯϓϧͳ8FCͷܾࡁํ๏1BZNFOU3FRVFTU"1*ͷ঺հ
    w 1BZNFOU3FRVFTU"1*౷߹ΨΠυ
    w 1BZNFOU3FRVFTU4BNQMF
    w 1BZNFOU3FRVFTU"1*4USJQF%FNP
    w (PPHMF͕΋͏͙͢ϓϩάϨογϒ΢ΣϒΞϓϦ 1SPHSFTTJWF8FC"QQT
    Λ"OESPJEʹຊ֨తʹ౷߹
    w Ծ૝௨՟ࢢ৔ͰࠓԿ͕ى͖͍ͯΔͷ͔ʁʕʕ࣌Ձ૯ֹԯυϧ͸όϒϧΛҙຯ͢Δͷ͔
    

    View Slide