EC機能 API設定とSwagger UIを利用した動作確認の方法

本チュートリアルでは、ECサイト構築の際、必要になるAPIの設定とSwagger UIを使った注文手順の確認方法を記載します。
本手順ではEC機能 店舗情報の設定と商品登録の方法のチュートリアルの設定が既に行われている前提となります。

APIの作成

まずはEC用のAPIを作成します。
APIのページから[新しいAPIを作成する]をクリックします。 Title, Version, Descriptionを入力して[ADD]をクリックします。 今回は下記のように設定しました。

設定項目	設定
Title	EC API
Version	1
Description	EC

次にセキュリティの設定します。
先ほど作成したAPIのページから[セキュリティ]をクリックします。 セキュリティをDynamic TokenもしくはCookieに設定します。
今回はCookieに設定して進めて行くので、Cookieを選択し[Save]をクリックします。
参考：セキュリティ設定についてはAPI Securityを参照ください。

次にCORSの設定します。 先ほど作成したAPIのページから[CORSを設定する]をクリックします。 下記のように設定し、[Save]をクリックします。

設定項目	設定
CORS_ALLOW_ORIGINS	管理画面URL フロントエンド ドメイン ローカルドメイン(例：http://localhost:3000)
CORS_ALLOW_METHODS	GET POST

エンドポイントの作成

次にエンドポイントを作成します。 APIのページから[Configure Endpoint]をクリックします。 注文に必要なエンドポイントは下記になりますのでそれぞれ作成してください。

ログイン用エンドポイント

設定項目	設定
パス	login
	有効/無効	有効
モデル	カテゴリー	認証
	モデル	Login
	オペレーション	Login_challenge

プロフィール情報取得用エンドポイント

設定項目	設定
パス	user/profile
	有効/無効	有効
モデル	カテゴリー	認証
	モデル	Login
	オペレーション	profile

カートへの商品追加用エンドポイント

設定項目	設定
パス	ec/cart/add
	有効/無効	有効
モデル	カテゴリー	EC
	モデル	ECCart
	オペレーション	add

商品処理用エンドポイント

設定項目	設定
パス	ec/order/purchase
	有効/無効	有効
モデル	カテゴリー	EC
	モデル	ECOrder
	オペレーション	purchase

以上でエンドポイントの作成完了です。今回は下記４つのエンドポイントを作成しました。

APIの動作確認

エンドポイントの設定ができたら、対象のエンドポイントをSwaggerUIで動作させ、商品の購入ができることを確認していきます。

ログイン

今回のケースでは会員として登録済みのメンバーにログインをさせた状態での購入を想定していますので、SwaggerUI画面からログイン処理を行う必要があります。

備考

注文時に利用する為、メンバー編集の[プロフィール情報]ページでログインに使用するメンバーの住所登録は事前に行っておいてください。

APIのページから[Swagger UI]をクリックしてSwagger UIのページに遷移します。 loginのエンドポイントをクリックします。
[Try it out]をクリックします。 Request bodyフィールドが表示されますので、下記のようにログイン情報を記載して、[Execute]をクリックします。

Request body

{
  "email": "YOUR_MAIL_ADDRESS@example.com",
  "password": "PASSWORD",
  "login_save": 0
}

注意

YOUR_MAIL_ADDRESS@example.com と PASSWORD にはご自身のメールアドレスとパスワードを入力ください。

ログインに成功すると、レスポンスコード:200でデータがレスポンスされます。 補足)APIのセキュリティ設定をDynamic Tokenで利用する場合
リクエストヘッダにトークンを付与する必要があるので、Swagger UIを利用して、APIのセキュリティを確認するで説明しているログインの方法を参照してください。

カートIDの取得

ログイン処理が完了したらカートIDを取得します。
カートIDはログインユーザーの情報に紐づけされているため、profileのエンドポントから取得します。
user/profileのエンドポイントをクリックします。 [Try it out]をクリックします。 [Execute]をクリックします。 レスポンスコード:200でデータがレスポンスされますので、ec_cart_idの値をメモしておきます。 このケースでは1306がカートIDとなります。

カートに商品を追加する

購入したい商品の商品IDを確認し、そのIDを指定して商品をカートに追加します。
まずは商品設定のページを参考に購入したい商品のIDを確認します。 このケースでは41211が商品IDとなります。

Swagger UIのページに戻り、/ec/cart/addのエンドポイントをクリックします。 [Try it out]をクリックします。 Request bodyフィールドが表示されますので、下記のようにカートIDと、商品の情報を記載して、[Execute]をクリックします。

設定が必要なパラメータは下記の通りです。

• ec_cart_id: 事前に確認したカートID
• product_id: 購入する商品ID
• quantity: 購入個数

今回は下記のように設定しました。

設定項目	設定
ec_cart_id	1306
product_id	41211
quantity	1

Request body

{
  "ec_cart_id": 1306,
  "item": {
    "product_id": 41211,
    "quantity": 1
  }
}

商品の追加が完了すると、レスポンスコード:200でデータがレスポンスされ、messagesに"新規追加しました。"の表示がされます。

カートの商品を購入する

商品の購入時、支払方法を指定する必要があるので、支払方法設定のページで、支払い方法のIDを確認します。 今回は銀行振込のID58で購入します。

Swagger UIのページに戻り、/ec/order/purchaseのエンドポイントをクリックします。 [Try it out]をクリックします。 Request bodyフィールドが表示されますので、下記のようにカートIDと支払方法のIDを記載して、[Execute]をクリックします。

設定が必要なパラメータは下記の通りです。

注意

今回は必須パラメータのみで進めます。他のパラメータは状況に応じて変更をしてください。
ec_cart_id: 事前に確認したカートID
ec_payment_id: 決済する支払い方法のID

今回は下記のように設定しました。

設定項目	設定
ec_cart_id	1306
ec_payment_id	58

Request body

{
  "ec_cart_id": 1306,
  "ec_payment_id": 58
}

商品の購入が完了すると、レスポンスコード:200でデータがレスポンスされ、messagesに"注文が完了しました。"、idsに注文IDが返却されます。
また、購入者のメールアドレス宛に「ご購入完了のお知らせ」のメールが届きます。
注文はカートの状態により配送単位で複数に分かれることもあります。

注文情報の確認

先ほどSwagger UIを利用して購入した注文は注文一覧から確認できます。 以上でECサイト構築の際、必要になるAPIの設定とSwagger UIを使った注文手順の確認方法の説明を終了します。