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

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

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

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

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

81011f5622102c067230901506f21e5f?s=128

gorou_178

June 12, 2017
Tweet

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ͷ৔߹

  9. None
  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Λൺֱͯ͠ΈΔ

  18. None
  19. None
  20. None
  21. UI͕΄΅ಉ͡

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

  23. ֤αʔϏεͷUI͕ࣅ͍ͯΔ • ΫϨδοτΧʔυ • Χʔυ൪߸ • ໊ٛ • ༗ޮظݶʢ݄/೥ʣ •

    CVC • ސ٬؅ཧ༻ • ϝʔϧΞυϨε • ഑ૹઌ • ॅॴɺి࿩൪߸
  24. ڞ௨Խ͢Ε͹ΈΜͳϥΫʹͳΔͷͰ͸…

  25. UIΛڞ௨Խ͠Α͏

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

  27. None
  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ͱڞ௨ͷࢧ෷खஈΛఏڙ

  32. None
  33. None
  34. None
  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ܕܾࡁαʔϏε͕ར༻Ͱ͖Δ
  40. None
  41. None
  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Ͱ࡞ͬͯΈΑ͏͔ͳʁ
  57. None
  58. ࣭໰ίʔφ ࠙਌ձͰ࣭໰͓଴ͪͯ͠·͢ɻ

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

  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 Ծ૝௨՟ࢢ৔ͰࠓԿ͕ى͖͍ͯΔͷ͔ʁʕʕ࣌Ձ૯ֹԯυϧ͸όϒϧΛҙຯ͢Δͷ͔