Next.jsとStripeでECサイトを作る – 1

2024.03.27

概要

Next.jsとStripeでECサイトを作ります。
今回の内容はStripeの登録、商品の追加、制限付きAPIキーの作成、動作確認です。

背景

友人からECサイトが作れないか相談を受けたのでデモサイトを作ってみることにしました。

やりかた

Stripeの登録

さっそくですがStripeの登録をします。
商品データはStripeのAPIから拾ってくる仕組みにするので先に商品登録まで済ませてしまいましょう。

Sign Up and Create a Stripe Account | Stripe
Sign up to quickly create a new Stripe account today and get started accepting payments in minutes.
dashboard.stripe.com

アカウント登録とテスト環境の有効化

登録してダッシュボードが開けたら、アカウントの作成とテスト環境の有効化をします。
下の画像の左の赤枠でアカウントを登録します。今回は “demo” としました。
下の画像の右の赤枠でテスト環境を有効にします。

商品の登録

商品を登録します。[その他]-[商品カタログ]をクリックします。

商品を追加をクリックします。

適当に商品情報を入力します。

2,3品登録しておくといいです。

APIキーの取得

商品登録が終わったらAPIキーを取得します。

[開発者]をクリックします。

[APIキー]をクリックします。

テストなのでシークレットキーをそのまま使ってもいいのですが、今回はきちんと制限付きのキーを作成するようにします。
[制限付きのキーを作成]をクリックします。

[キーの名前]に適当な名前をつけます。

次の権限を割り当てて、ページ末尾にある[キーを作成]をクリックします。

リソースタイプ権限
Products読み取り
Prices読み取り
Checkout Sessions書き込み
それ以外なし
こんな感じ

作成したキーの[テストキーを表示]をクリックするとキーを確認することができます。

動作確認

curlで商品情報が取れるか確認してみます。
curlコマンドが無い方はインストールするかWSLを使うかしてください。

PowerShellでやりたいという物好き向けのメモ。basic認証が面倒くさすぎる。

$u = Get-Credential;
# 認証ポップアップが出るのでユーザー名にAPIキー、パスワードは無しでcredentialを作る。
Invoke-WebRequest "https://api.stripe.com/v1/products/<ProductID>" -Credential $u;

まず取得したい商品のページに行き、ProductIDをコピーします。

次のコマンドの、<ProductID>と<APIキー>をそれぞれ置き換えます。

curl https://api.stripe.com/v1/products/<ProductID> -u "<APIキー>"

↓こんな感じになります。

curl https://api.stripe.com/v1/products/prod_PlorMwH7etgkfG -u "rk_test_51Osn****"

実行すると↓のようにパスワード入力を求められますが、そのままエンターキーを押せば大丈夫です。

Enter host password for user 'rk_test_****

商品情報が返ってくれば成功です。

{
  "id": "prod_PlorMwH7etgkfG",
  "object": "product",
  "active": true,
  "attributes": [],
  "created": 1710910672,
  "default_price": "price_1OwHDoHr6EhqgcmiiMcQ24Ok",
  "description": "空気です。ダンボールに詰めて送ります。",
  "features": [],
  "images": [
    "https://files.stripe.com/links/MDB8YWNjdF8xT3NuRTJIcjZFaHFnY21pfGZsX3Rlc3RfSU1HUDRYSEZtTW9jR0d4NkhhZFFWVnFy00fqidvV"
  ],
  "livemode": false,
  "metadata": {},
  "name": "空気",
  "package_dimensions": null,
  "shippable": null,
  "statement_descriptor": null,
  "tax_code": null,
  "type": "service",
  "unit_label": null,
  "updated": 1710910672,
  "url": null
}

Stripeの方の事前準備はこれで終わりです。

おまけ

参考

こちらのワークショップを参考にさせていただきました。
https://zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart

StripeのAPI Referenceはこちらです。
https://docs.stripe.com/api/products/retrieve

コメント