Stripe決済対応 バリカートの紹介と本カートシステムでの Stripe連携の仕組み

JP_Stripes 福岡 vol.6
2020/03

バリカート
https://baricart.jp

Transcript

1. 4USJQFܾࡁରԠ
   όϦΧʔτͷ঺հͱ ຊΧʔτγεςϜͰͷ
   4USJQF࿈ܞͷ࢓૊Έ +1@4USJQFT
   ෱Ԭ
   WPM
   
2. About Me ໊લɿ
   ໺ౡ
   ོʢͷ͡·
   ͔ͨ͠ʣ
   ॴଐɿΠϥεςΟοΫίϯαϧλϯπגࣜձࣾ
   
   
   
   
   
   
   
   
   IUUQTFMBTUJDDPOTVMUBOUTDPN
   ‣ (JUIVC5XJUUFS
   OPKJNBHF
3. ࿩͢͜ͱ ‣ όϦΧʔτͷ͝঺հ
   ‣ όϦΧʔτΛ4USJQFܾࡁʹରԠ͢ΔͨΊʹ
   ΍ͬͨ͜ͱ
5. όϦΧʔτ is Headless ‣ ϑϩϯτΤϯυͷ(6*Λ࣋ͨͳ͍
   ‣ ඞཁͳσʔλɺૢ࡞͸"1*ܦ༝Ͱ΍ΓऔΓ͢Δ
   ‣ ϑϩϯτΤϯυͱόοΫΤϯυΛ෼཭ͯ͠ઃஔͰ͖ Δ
   ‣ ͦͷͨΊϑϩϯτΤϯυͷࣗ༝౓͕ߴ͍
6. 'SPOU
   &OE #BDL
   &OE ΧʔτγεςϜ ͜Ε·ͰͷΧʔτγεςϜ όϦΧʔτ 'SPOU
   &OE #BDL
   &OE όϦΧʔτ
7. 'SPOU
   &OE #BDL
   &OE όϦΧʔτ ҰͭͷόϦΧʔτͰෳ਺γϣοϓ։ઃ΋Մೳ 'SPOU
   &OE 'SPOU
   &OE
8. ࣄྫ঺հ
9. νϣΠεδϟύϯגࣜձ༷ࣾ IUUQTIBQQZGBNJMZMJGFKQ IUUQTTJMJDBTJMJDBDPN IUUQTKVLFOPIDPN IUUQTTQBSLMJOHTJMJDBTJMJDBDPN
10. νϣΠεδϟύϯגࣜձ༷ࣾ ‣ ૯߹γϣοϓαΠτͱɺ঎ࡐผʹϥϯσΟϯάϖʔ δʢ-1ʣαΠτΛ࡞੒
    ‣ -1αΠτͰ঎඼Λ௚઀ߪೖՄೳ
11. όϦΧʔτ ‣ ఆظߪೖ
    ‣ ϙΠϯτ෇༩
    ‣ ϨϯλϧΧʔτ
    ‣ 4USJQFɺ1":+1ɺ"NB[PO
    1BZɺ/1ޙ෷͍ɺ
    ۜߦৼࠐɺ୅Ҿ͖ɺ"MJQBZ 4USJQF
    ‣ ഑ૹࣄۀऀ޲͚σʔλॻ͖ग़͠ ‣ εςοϓϝʔϧ
    ‣ ෳ਺ళฮରԠ
12. όϦΧʔτ ‣ "41αʔϏεͱͯ͠ఏڙ
    ‣ ΦϯϓϨϛε൛
13. https://baricart.jp
14. όϦΧʔτΛ
    4USJQFܾࡁʹରԠͨ͠࿩
15. $"6$"5*0/
    ೥લʹ࣮૷͍ͯ͠ΔͷͰ
    4USJQF͕ࣾਪ঑͢Δ࠷৽ͷ૊ΈࠐΈํ๏ͱ͸
    ҟͳΓ·͢
16. ߏ੒ γϣοϓαΠτ
    ߪೖϑΥʔϜ ΧʔτγεςϜ 4USJQF
    DIFDLPVUKT 4USJQF
    "1*  ΧʔυೖྗϑΥʔϜΛදࣔͯ͠
    ΧʔυτʔΫϯΛऔಘ  ஫จΛ֬ఆ
    ΧʔυτʔΫϯΛ౉͢  $IBSHF
17. ࢖͍ͬͯΔStripeͷػೳ ‣ IUUQTDIFDLPVUTUSJQFDPNDIFDLPVUKT
    ‣ Χʔυ৘ใͷೖྗɺΧʔυτʔΫϯͷऔಘ
    ‣ 4USJQF
    "1*
    1)1
    ‣ $IBSHFɺ$VTUPNFSɺ3FGVOE
18. ࡞ͬͨ΋ͷ ‣ ϑϩϯτΤϯυ༻DIFDLPVUKTͷಡΈࠐΈ+4
    ‣ ஫จঢ়ଶมߋ࣌ͷ4USJQF
    "1*ίʔϧ
    ‣ ஫จ֬ఆ࣌
    ‣ ஫จΩϟϯηϧ࣌
19. checkout.jsͷಡΈࠐΈJS ‣ DIFDLPVUKTΛར༻͢Δʹ͸4USJQF
    "1*Ωʔͷࢦఆ ͕ඞཁ
    ‣ "1*Ωʔ͸஫จॲཧͰར༻͢ΔͷͰΧʔτγεςϜ ʹొ࿥͍ͯ͠Δ͕ɺϑϩϯτΤϯυͱόοΫΤϯυ ͕෼཭͍ͯ͠ΔͷͰɺϑϩϯτΤϯυଆʹ΋"1* ΩʔΛॻ͔ͳ͚Ε͹ͳΒͳ͔ͬͨ
    ˠ
    ෆศ
    ϑϩϯτΤϯυͱόοΫΤϯυ͕෼཭͍ͯ͠Δނͷ೰Έ
20. checkout.jsͷಡΈࠐΈJS ‣ ΧʔτγεςϜΑΓ"1*ΩʔΛऔಘ͔ͯ͠Βɺ DIFDLPVUKTΛಡΈࠐΜͰ஫จϑΥʔϜ΁ຒΊࠐΈ Χʔυ৘ใͷೖྗϘλϯΛදࣔͤ͞Δ
    ‣ Χʔυ৘ใ͕ೖྗ͞ΕͨΒΧʔυτʔΫϯ͕औಘͰ ͖ΔͷͰɺͦΕΛ஫จσʔλʹ௥Ճ͢Δ
    ‣ ͱ͍͏ॲཧΛ஫จϑΥʔϜͷ)5.-΁਺ߦ௥Ճ͢Δ ͚ͩͰߦ͑ΔεΫϦϓτΛ࡞ͬͨ
21. ஫จঢ়ଶมߋ࣌ͷAPIίʔϧ ‣ ΧʔτγεςϜ͕ࢧ෷͍ॲཧ༻ͷΠϯλʔϑΣʔε Λ͍࣋ͬͯΔͷͰͦΕʹ߹Θ࣮ͤͯ૷
    ‣ ஫จ֬ఆ࣌
    ‣ a4USJQFa$VTUPNFSaDSFBUF
    ɾɾɾ
    ސ٬ͷ࣍ճҎ߱ͷ஫จͰʮొ࿥ࡁ ΧʔυͰࢧ෷͏ʯΛ࣮ݱ͢ΔͨΊʹΧʔυτʔΫϯͷΈΛొ࿥
    ‣ a4USJQFa$IBSHFaDSFBUF
    DBQUVSF
22. ஫จঢ়ଶมߋ࣌ͷAPIίʔϧ ‣ ஫จΩϟϯηϧ࣌
    ‣ a4USJQFa3FGVOEaDSFBUF
23. ࣮૷ͷϙΠϯτ ‣ ࢧ෷͍Λ֬ఆ͢Δͱֹۚͷมߋ͸Ͱ͖ͳ͍
    ‣ ֹۚมߋΛ൐͏஫จฤू͸ɺ
    
    ஫จΩϟϯηϧ
    ˠ
    ৽ن஫จʹஔ͖׵͑
    
    ͱߟ͑ͨ΄͏ָ͕
24. ࣮૷ͷϙΠϯτ ‣ 4USJQF
    "1*΁ͷϦΫΤετ಺༰ɺϨεϙϯε಺༰͸ ه࿥͓ͯ͘͠
    ‣ 4USJQF
    "1*΁ͷϦΫΤετ͕ࣦഊͨ͠Β஫จঢ়ଶભ ҠΛΩϟϯηϧ͢Δ
    ‣ 4USJQF
    "1*͔ΒͷΤϥʔཧ༝͸ม׵ͯ͠දࣔ͢Δ
25. ࣮૷ͷϙΠϯτ ‣ ༻ҙ͞Ε͍ͯΔػೳ͔Βඞཁͳ΋ͷ͚ͩΛར༻͢Δ
26. $"6$"5*0/
    ೥લʹ࣮૷͍ͯ͠ΔͷͰ
    4USJQF͕ࣾਪ঑͢Δ࠷৽ͷ૊ΈࠐΈํ๏ͱ͸
    ҟͳΓ·͢
27. StripeରԠ TODO ‣ ࠓճͷൃදʹ͋ͨͬͯɺ4USJQFΛௐ΂௚ͯͨ͠Β
    ৭ʑΞοϓσʔτ͞Ε͍ͯΔ
    ‣ DIFDLPVUKT
    ˠ
    4USJQF
    &MFNFOUT
    ‣ ݱࡏͷߪೖϑϩʔʢ֬ೝը໘ͷલʹΧʔυೖྗʣ͔Βɺ஫จ֬ఆޙʹ ΧʔυೖྗΛߦ͏ϑϩʔʹมߋ͢Δඞཁ͕͋Δ
    ‣ 4USJQF
    1)1
    -JC
    Y
    ˠ
    Y
    ‣ IUUQTHJUIVCDPNTUSJQFTUSJQFQIQXJLJ.JHSBUJPOHVJEFGPSW
28. Stripe Elements? ‣ "QQMF
    1BZ
    
    (PPHMF
    1BZͳͲΧʔυҎ֎ͷܾࡁํ ๏ʹ΋ରԠՄೳ
    ‣ $IBSHFT
    "1*
    ͷ୅ΘΓʹ
    1BZNFOU
    *OUFOUT
    "1*
    Λ ར༻͢Δ
    ‣ ࠓͷͱ͜Ζ
    $IBSHFT
    "1*ͷഇࢭ༧ఆ͸ͳ͍
29. Stripe Elements? ‣ ஫จֹ͕ۚ֬ఆͨ͠ޙʹɺαʔόʔ্Ͱ1BZNFOU
    *OUFOUΛ࡞੒͔ͯ͠ΒɺϑϩϯτΤϯυ΁౉͢
    ‣ ސ٬͸4USJQF
    &MFNFOUTͰ࡞੒͞ΕΔϑΥʔϜ΁ Χʔυ৘ใΛೖྗܾͯ͠ࡁ͢Δ
    ‣ 4USJQFܾࡁ͕׬ྃͨ͠ޙͷॲཧΛ+BWB4DSJQUͰهड़ Ͱ͖ΔͷͰɺ஫จͷޙॲཧ΍஫จ׬ྃը໘΁ͷભҠ ͳͲΛߦ͏
30. ࣭໰ʁ
31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠