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

Transcript

1. 4USJQFܾࡁରԠ
   όϦΧʔτͷ঺հͱ ຊΧʔτγεςϜͰͷ
   4USJQF࿈ܞͷ࢓૊Έ +1@4USJQFT
   ෱Ԭ
   WPM
   

2. About Me ໊લɿ
   ໺ౡ
   ོʢͷ͡·
   ͔ͨ͠ʣ
   ॴଐɿΠϥεςΟοΫίϯαϧλϯπגࣜձࣾ
   
   
   
   
   
   
   
   
   IUUQTFMBTUJDDPOTVMUBOUTDPN
   ‣ (JUIVC5XJUUFS
   OPKJNBHF

3. ࿩͢͜ͱ ‣ όϦΧʔτͷ͝঺հ
   ‣ όϦΧʔτΛ4USJQFܾࡁʹରԠ͢ΔͨΊʹ
   ΍ͬͨ͜ͱ

4. None

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠