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

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

Transcript

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

   View Slide

2. ࣗݾ঺հ
   • ݀Ҫ ྯ
   • גࣜձࣾΠϊϕʔλʔɾδϟύϯ
   • Twitter: @gorou_178
   • PHPer/AWS/WordPress/Laravel
   • JP_Stripes ෱ԬӡӦϝϯόʔ
   • ϥϯχϯά/ίʔώʔ/ϓϦϯ
   • 2ࣇͷύύ
   

   View Slide

3. ͱ͋ΔΤϯδχΞͱ
   4USJQFʹ͍ͭͯձ࿩
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. ՄࢹԽͯ͠Έͨ
   

   View Slide

8. View Slide

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

   View Slide

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

    View Slide

11. 4USJQF1BZNFOUT
    w $IFDLPVU&MFNFOU
    w Χʔυ৘ใΛೖྗ͢ΔϑΥʔϜΛఏڙ
    w ΞϓϦέʔγϣϯଆͰΧʔυ৘ใΛऔΓѻ
    ΘͣʹߏஙͰ͖Δ
    

    View Slide

12. 4USJQF&MFNFOU
    ͜ΜͳϑΥʔϜ͕͋ͬͨ৔߹
    
    
    
    ΫϨδοτΧʔυ൪߸Λೖྗ͍ͯͩ͘͠͞
    
    
    
    ͓ࢧ෷͍
    
    

    View Slide

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) {
    // ΧʔυೖྗͰΤϥʔ͕͋Ε͹දࣔ
    }
    });
    

    View Slide

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);
    });
    });
    

    View Slide

15. $VTUPNFS࡞੒
    ΫϨδοτΧʔυܾࡁՄೳͳ
    ސ٬ʢ$VTUPNFSʣ͕࡞੒͞ΕΔ
    $customer = \Stripe\Customer::create([
    'email' => 'user@example.com',
    'source' => 'card_token'
    ]);
    

    View Slide

16. 4USJQF&MFNFOU
    63-IUUQTRJJUBDPNZ@UPLVJUFNTFFGFEDCCGCDB
    

    View Slide

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

    View Slide

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

    View Slide

19. 4USJQF#JMMJOH
    w ঎඼
    w ఆֹ՝ۚैྔ՝ۚͷϧʔϧΛ࡞੒
    w ͜Εʹैͬͯఆظ՝ۚʢ4VCTDSJQUJPOʣ
    Λ࡞੒͠ސ٬ʢ$VTUPNFSʣʹඥ෇͚੥
    ٻʢ*OWPJDFʣɻ
    w ফඅ੫཰͸ɺ4VCTDSJQUJPO࡞੒࣌ʹ੫཰
    ʢ5BY3BUFʣΛࢦఆɻ
    

    View Slide

20. ঎඼Λ࡞੒
    

    View Slide

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

    View Slide

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

    View Slide

23. 4USJQF#JMMJOH
    w *OWPJDF
    w ੥ٻྖऩͷ؅ཧ
    w ੥ٻ೔ͷिؒલʹ੥ٻ༧໿͞ΕΔ
    w ੥ٻ࣌ࠁͷ࣌ؒલʹ੥ٻԼॻ͖࡞੒
    w ܾࡁ͕׬ྃ͢Δͱ੥ٻ͕֬ఆ
    w ྖऩॻ͕࡞੒͞ΕΔ
    

    View Slide

24. 4USJQF#JMMJOH
    w *OWPJDF
    w ੥ٻॻΛϝʔϧͰૹΔ͜ͱ͕Մೳʢࢧ෷
    ظݶઃఆՄೳʣ
    w ͨͩ͠ɺࢧ෷͍ํ๏͸೔ຊͩͱΫϨδο
    τΧʔυͷΈ
    w ੥ٻॻ෷͸ඇରԠ
    

    View Slide

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

    View Slide

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

    View Slide

27. 4USJQFͷศརͳػೳ
    w ར༻ऀ΁ͷϝʔϧ௨஌ʢ3FDJQFTʣ
    w ΫϨδοτΧʔυ༗ޮظݶ੾Εલʹ௨஌
    ʢظݶ੾ΕͰࣦഊ͢Δલʹɺߋ৽Λࣄલʹ
    ଅͤΔʣ
    w ఆظ՝ۚߋ৽લʹ௨஌ʢউखʹܾࡁ͞Εͯ
    ෆຬʹͳΒͳ͍Α͏ʹʣ
    w ܾࡁ׬ྃޙͷ௨஌ʢྖऩॻΛૹΕΔʣ
    w τϥΠΞϧऴྃલʹ௨஌ʢࢧ෷͍͕։࢝͞
    ΕΔ͜ͱΛ௨஌ʣ
    

    View Slide

28. 4USJQFͷศརͳػೳ
    w 8FCIPPL
    w ΠϕϯτΛ)551ϦΫΤετͰड͚औΕΔ
    w ͋ΒΏΔΠϕϯτ͕ൃੜ
    w ಛఆΠϕϯτͷΈ௨஌ͷՄೳ
    w ୀձɺฦۚɺར༻ఀࢭͷϑοΫ
    w ӡӦऀ΁ͷ௨஌
    

    View Slide

29. վΊͯશମΛ၆ᛌ
    

    View Slide

30. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. ࣭໰ͳͲ
    

    View Slide

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

    View Slide

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
    

    View Slide