$30 off During Our Annual Pro Sale. View Details »

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

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

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

gorou_178

March 23, 2020
Tweet

More Decks by gorou_178

Other Decks in Programming

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' => '[email protected]',
    '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