Stripeとアプリケーションの関係を可視化してみた

 Stripeとアプリケーションの関係を可視化してみた

エンジニアとStripeについて話していたときに、Stripeの各機能を「いつ」「何を」「どうしたら良いのか」の全体像が見えにくいのでは?と思うことがありました。そこで全体を俯瞰した1つの図があると助かりそうだなと思い可視化をしてみました。
Stripe Payment、Stripe Billing、Stripe Radarを俯瞰することで、「私が作りたいものだとこれとこれを使えば作れそう!」が実現すると良いなと思います。

81011f5622102c067230901506f21e5f?s=128

gorou_178

March 23, 2020
Tweet

Transcript

  1. 4USJQFͱΞϓϦέʔγϣϯͷ ؔ܎ΛՄࢹԽͯ͠Έͨ  +1@4USJQFTJO෱ԬWPM

  2. ࣗݾ঺հ • ݀Ҫ ྯ • גࣜձࣾΠϊϕʔλʔɾδϟύϯ • Twitter: @gorou_178 •

    PHPer/AWS/WordPress/Laravel • JP_Stripes ෱ԬӡӦϝϯόʔ • ϥϯχϯά/ίʔώʔ/ϓϦϯ • 2ࣇͷύύ
  3. ͱ͋ΔΤϯδχΞͱ 4USJQFʹ͍ͭͯձ࿩

  4. ͱ͋ΔΤϯδχΞͱͷձ࿩ w "͞ΜʮͲͷλΠϛϯάͰސ٬ͱఆظ՝ۚΛͭ͘Ε͹Α͍ʁʯ w Θͨ͠ʮొ࿥࣌ʹαʔόଆͰ΍Γ·͠ΐ͏ʂʯ w "͞Μʮࢧ෷͍׬ྃɾߋ৽࣌ͷϝʔϧ͸Ͳ͏ૹ͍ͬͯΔͷʁʯ w Θͨ͠ʮ4USJQF͔Β࣮͸ૹΕΔΜͰ͢ʂʯ

  5. 4USJQFͷԿ͕Ͳ͜·Ͱ Ͱ͖Δͷ͔Θ͔Γʹ͍͘ʁ

  6. ຕͷਤͰՄࢹԽͰ͖Δͱ ͱͯ΋ॿ͔ΔͷͰ͸ʁ

  7. ՄࢹԽͯ͠Έͨ

  8. None
  9. ࡉ͔͘ݟ͍͖ͯ·͠ΐ͏

  10. 4USJQF1BZNFOUT w ܾࡁશൠΛ୲͏ w ར༻ऀ͕ΞϓϦέʔγϣϯͷߪೖϖʔδʹ ΞΫηε w Χʔυ৘ใΛೖྗͯ͠ߪೖͨ͠Γܖ໿͢Δ ʢొ࿥ܾࡁʣ w

    طʹܖ໿ࡁΈͰΧʔυ৘ใͷߋ৽Λߦͬͨ Γ͢Δʢ৘ใߋ৽ʣ
  11. 4USJQF1BZNFOUT w $IFDLPVU&MFNFOU w Χʔυ৘ใΛೖྗ͢ΔϑΥʔϜΛఏڙ w ΞϓϦέʔγϣϯଆͰΧʔυ৘ใΛऔΓѻ ΘͣʹߏஙͰ͖Δ

  12. 4USJQF&MFNFOU ͜ΜͳϑΥʔϜ͕͋ͬͨ৔߹ <form action="/charge" method="post" id="payment-form"> <div class="form-row"> <label for="card-element">

    ΫϨδοτΧʔυ൪߸Λೖྗ͍ͯͩ͘͠͞ </label> <div id="card-element"></div> </div> <button>͓ࢧ෷͍</button> </form>
  13. 4USJQF&MFNFOU )5.-ʹ&MFNFOUͷΧʔυ6*ΛϚ΢ϯτʢελΠϧௐ੔Մೳʣ Τϥʔ͕͋ͬͨ৔߹͸%0.ૢ࡞ͳͲͰදࣔ const stripe = Stripe(‘publick_key’); const elements =

    stripe.elements(); const card = elements.create('card', {style: { // ͜͜ʹελΠϧΛࢦఆ }}); card.mount('#card-element'); card.addEventListener('change', function(event) { if (event.error) { // ΧʔυೖྗͰΤϥʔ͕͋Ε͹දࣔ } });
  14. 4USJQF&MFNFOU Χʔυ৘ใ͔ΒτʔΫϯͷ࡞੒ const form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault();

    stripe.createToken(card).then(function(result) { if (result.error) { // Τϥʔදࣔ. console.log(result.error.message); return; } // τʔΫϯΛऔಘ console.log(result.token); }); });
  15. $VTUPNFS࡞੒ ΫϨδοτΧʔυܾࡁՄೳͳ ސ٬ʢ$VTUPNFSʣ͕࡞੒͞ΕΔ $customer = \Stripe\Customer::create([ 'email' => 'user@example.com', 'source'

    => 'card_token' ]);
  16. 4USJQF&MFNFOU 63-IUUQTRJJUBDPNZ@UPLVJUFNTFFGFEDCCGCDB

  17. 4USJQF3BEBS w ෆਖ਼ݕ஌ͯ͘͠ΕΔ w جຊతʹӡӦऀ͸Կ΋͠ͳͯ͘ྑ͍ w 4USJQF͕͏·͘΍ͬͯ͘ΕΔ w ϧʔϧͷ௥Ճʹ͸3BEBSGPS5FBNTʹΞο ϓάϨʔυ͢Δඞཁ͋Γʢ༗ྉʣ

  18. 4USJQF#JMMJOH w ϏδωεશൠΛ؅ཧ w ϏδωεϞσϧ΍঎඼ઃܭ͕͜ͷ#JMMJOHͱ ΄΅ಉ͡ʹͳΔʢಉ͡ʹͨ͠΄͏͕ॊೈʹ ରԠ͠΍͘͢ͳΔʣ w ఆظ՝ۚैྔ՝ۚͷϧʔϧΛఆٛ w

    ϧʔϧʹैͬͯ՝ۚɺ੥ٻɺྖऩͷ؅ཧ͕ Ͱ͖Δ
  19. 4USJQF#JMMJOH w ঎඼ w ఆֹ՝ۚैྔ՝ۚͷϧʔϧΛ࡞੒ w ͜Εʹैͬͯఆظ՝ۚʢ4VCTDSJQUJPOʣ Λ࡞੒͠ސ٬ʢ$VTUPNFSʣʹඥ෇͚੥ ٻʢ*OWPJDFʣɻ w

    ফඅ੫཰͸ɺ4VCTDSJQUJPO࡞੒࣌ʹ੫཰ ʢ5BY3BUFʣΛࢦఆɻ
  20. ঎඼Λ࡞੒

  21. ϓϥϯΛ࡞੒ʢྉۚମܥఆֹ՝ۚʣ

  22. ϓϥϯΛ࡞੒ʢྉۚମܥैྔ՝ۚʣ

  23. 4USJQF#JMMJOH w *OWPJDF w ੥ٻྖऩͷ؅ཧ w ੥ٻ೔ͷिؒલʹ੥ٻ༧໿͞ΕΔ w ੥ٻ࣌ࠁͷ࣌ؒલʹ੥ٻԼॻ͖࡞੒ w

    ܾࡁ͕׬ྃ͢Δͱ੥ٻ͕֬ఆ w ྖऩॻ͕࡞੒͞ΕΔ
  24. 4USJQF#JMMJOH w *OWPJDF w ੥ٻॻΛϝʔϧͰૹΔ͜ͱ͕Մೳʢࢧ෷ ظݶઃఆՄೳʣ w ͨͩ͠ɺࢧ෷͍ํ๏͸೔ຊͩͱΫϨδο τΧʔυͷΈ w

    ੥ٻॻ෷͸ඇରԠ
  25. *OWPJDFʢ੥ٻॻʣ ੥ٻϝʔϧʹهࡌ͞Ε͍ͯΔ 63-Λ։͘ͱ͜ͷΑ͏ͳࢧ෷͍ը໘͕දࣔ͞ΕΔ

  26. *OWPJDFʢྖऩॻʣ ͜ͷΑ͏ͳϝʔϧ͕ಧ͘ 1%'Ͱμ΢ϯϩʔυϒϥ΢βͰӾཡՄೳ

  27. 4USJQFͷศརͳػೳ w ར༻ऀ΁ͷϝʔϧ௨஌ʢ3FDJQFTʣ w ΫϨδοτΧʔυ༗ޮظݶ੾Εલʹ௨஌ ʢظݶ੾ΕͰࣦഊ͢Δલʹɺߋ৽Λࣄલʹ ଅͤΔʣ w ఆظ՝ۚߋ৽લʹ௨஌ʢউखʹܾࡁ͞Εͯ ෆຬʹͳΒͳ͍Α͏ʹʣ

    w ܾࡁ׬ྃޙͷ௨஌ʢྖऩॻΛૹΕΔʣ w τϥΠΞϧऴྃલʹ௨஌ʢࢧ෷͍͕։࢝͞ ΕΔ͜ͱΛ௨஌ʣ
  28. 4USJQFͷศརͳػೳ w 8FCIPPL w ΠϕϯτΛ)551ϦΫΤετͰड͚औΕΔ w ͋ΒΏΔΠϕϯτ͕ൃੜ w ಛఆΠϕϯτͷΈ௨஌ͷՄೳ w

    ୀձɺฦۚɺར༻ఀࢭͷϑοΫ w ӡӦऀ΁ͷ௨஌
  29. վΊͯશମΛ၆ᛌ

  30. None
  31. ՄࢹԽͯ͠վΊͯ ؾ͕͍ͭͨ͜ͱ

  32. ՄࢹԽͯ͠ؾ͕͍ͭͨ఺ w ϓϩμΫτͷ։ൃʹूதͰ͖Δ࢓૊Έʹͳ͍ͬͯΔ w ܾࡁʹ·ͭΘΔॾʑΛߦͬͯ͘ΕΔ w ఆ࣌ͷ՝ۚΛࣗલͰ΍Δͷͱͯ΋େม w ྖऩॻͱ͔΋େม

  33. ·ͱΊ w ՄࢹԽͯ͠ΈͯɺϓϩμΫτ։ൃʹूதͰ͖Δ࢓૊Έʹؾ͕͚ͭͨ w ՄࢹԽʹΑͬͯɺʮ4USJQFͰ΍ͬͯΈΑ͏ʯ͕૿͑Δͱخ͍͠ w ৘ใΛγϯϓϧ͔ͭ޿ൣғʹ͍͖͍ͯͨ͠

  34. ࣭໰ͳͲ

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

  36. ࢀߟ w 4USJQF1BZNFOUTIUUQTTUSJQFDPNKQQBZNFOUT w 4USJQF#JMMJOHIUUQTTUSJQFDPNKQCJMMJOH w 4USJQF3BEBSIUUQTTUSJQFDPNKQSBEBS w 1BZNFOUT$IFDLPVUIUUQTTUSJQFDPNKQQBZNFOUTDIFDLPVU w

    1BZNFOUT&MFNFOUTIUUQTTUSJQFDPNKQQBZNFOUTFMFNFOUT w 4USJQFKT&MFNFOUTΛར༻ܾͯ͠ࡁϑϩʔΛཧղ͢Δ2JJUB
 IUUQTRJJUBDPNZ@UPLVJUFNTFFGFEDCCGCDB w #JMMJOH4VCTDSJQUJPOIUUQTTUSJQFDPNEPDTCJMMJOHTVCTDSJQUJPOTDSFBUJOH w #JMMJOH*OWPJDFIUUQTTUSJQFDPNEPDTCJMMJOHJOWPJDFT w #JMMJOH5BY3BUFIUUQTTUSJQFDPNEPDTCJMMJOHUBYFTUBYSBUFT w 4USJQF3FDJQFTIUUQTTUSJQFDPNEPDTSFDJQFT w 8FCIPPLIUUQTTUSJQFDPNEPDTXFCIPPLTHPMJWF