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

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

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

ͱ͋ΔΤϯδχΞͱ 4USJQFʹ͍ͭͯձ࿩

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

4USJQFͷԿ͕Ͳ͜·Ͱ Ͱ͖Δͷ͔Θ͔Γʹ͍͘ʁ

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

ՄࢹԽͯ͠Έͨ

ࡉ͔͘ݟ͍͖ͯ·͠ΐ͏

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

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

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>

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

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

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

4USJQF&MFNFOU 63-IUUQTRJJUBDPNZ@UPLVJUFNTFFGFEDCCGCDB

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

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

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

঎඼Λ࡞੒

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

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

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

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

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

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

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

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

վΊͯશମΛ၆ᛌ

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

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

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

࣭໰ͳͲ

͋Γ͕ͱ͏͍͟͝·ͨ͠

ࢀߟ 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

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

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

More Decks by gorou_178

Other Decks in Programming

Featured

Transcript