Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

JP_Stripes 福岡 vol.6
2020/03

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

B63ed943582d5b36a78f3be3c4d659e2?s=128

Takashi Nojima

March 23, 2020
Tweet

Transcript

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

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

  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[PO1BZɺ/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 ‣ ݱࡏͷߪೖϑϩʔʢ֬ೝը໘ͷલʹΧʔυೖྗʣ͔Βɺ஫จ֬ఆޙʹ ΧʔυೖྗΛߦ͏ϑϩʔʹมߋ͢Δඞཁ͕͋Δ

    ‣ 4USJQF1)1-JCYˠY ‣ IUUQTHJUIVCDPNTUSJQFTUSJQFQIQXJLJ.JHSBUJPOHVJEFGPSW
  28. Stripe Elements? ‣ "QQMF1BZ(PPHMF1BZͳͲΧʔυҎ֎ͷܾࡁํ ๏ʹ΋ରԠՄೳ ‣ $IBSHFT"1*ͷ୅ΘΓʹ1BZNFOU*OUFOUT"1*Λ ར༻͢Δ ‣ ࠓͷͱ͜Ζ$IBSHFT"1*ͷഇࢭ༧ఆ͸ͳ͍

  29. Stripe Elements? ‣ ஫จֹ͕ۚ֬ఆͨ͠ޙʹɺαʔόʔ্Ͱ1BZNFOU *OUFOUΛ࡞੒͔ͯ͠ΒɺϑϩϯτΤϯυ΁౉͢ ‣ ސ٬͸4USJQF&MFNFOUTͰ࡞੒͞ΕΔϑΥʔϜ΁ Χʔυ৘ใΛೖྗܾͯ͠ࡁ͢Δ ‣ 4USJQFܾࡁ͕׬ྃͨ͠ޙͷॲཧΛ+BWB4DSJQUͰهड़

    Ͱ͖ΔͷͰɺ஫จͷޙॲཧ΍஫จ׬ྃը໘΁ͷભҠ ͳͲΛߦ͏
  30. ࣭໰ʁ

  31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠