B2C Commerce API でチェックアウトフローをやってみる


※ これから記載する事項は、私が所属する会社とは切関係のない事柄です。

## 概要

B2C Commerce API では基本的な流れとして、買い物カゴを作成し、そこに対して配送先、支払い情報、クーポンといった情報を追加していき、最後に買い物かごのIDを注文作成時に渡すことで購入フローを作成します。（[参考ヘルプ](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=Summary)）


## 実際にやってみる

商品検索から買い物完了に至るまでの基本的な購入フローを下記の流れでAPIを利用して実行していきたいと思います。
今回は、SCAPIのパブリッククライアントを利用してトークンを取得しました。方法については以前紹介した「[Salesforce B2C CommerceのヘッドレスAPIを呼んでみる(ショッパー系API - SCAPIパブリッククライアント編)](https://qiita.com/syunyama/items/89b204486ace9fd10440)」をご覧ください。

1. 商品の検索
1. 買い物カゴの作成
1. 買い物かごに商品を追加
1. カートの情報（配送先住所、支払い方法、配送方法 など）の確認
1. 配送先住所の追加
1. クーポンコードの追加
1. 配送方法の取得
1. 配送方法の選択
1. 支払い方法の取得
1. 支払い方法の選択
1. 購入





### 1. 商品の検索

「Shirts」というキーワードで商品を検索します。今回は、検索結果から商品「The White Dress Shirt (ID : 78916783M-1)」を利用してカートに追加していきます。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-search?meta=productSearch)）

```sh
REQUEST:
GET /search/shopper-search/v1/organizations/{orgID}/product-search?siteId={siteID}&q=Shirts
Host: {shortCode}.api.commercecloud.salesforce.com
Authorization: Bearer {token}
```

![スクリーンショット 2023-01-19 17.14.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/ef0a6f3b-eb56-40a7-daa5-a2afff9d8b25.png)



### 2. 買い物カゴの作成

買い物カゴの作成時に配送先や支払い方法などを一括でできるのですが、今回は完全に空の状態のカートを作成します。レスポンスから basketId (f889a2979b4792ac0cbc257f76) と shipmentId (me) を取得しておきます。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=createBasket)）

```sh
REQUEST:
POST /checkout/shopper-baskets/v1/organizations/{orgID}/baskets?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/json
Authorization: Bearer {token}

BODY:
{}
```

![スクリーンショット 2023-01-19 17.38.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/91c72898-48dc-7497-762c-b8cd0927c292.png)




### 3. 買い物かごに商品を追加

商品（78916783M-1）を買い物かご（f889a2979b4792ac0cbc257f76）に追加します。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=addItemToBasket)）

```sh
REQUEST:
POST /checkout/shopper-baskets/v1/organizations/{orgID}/baskets/f889a2979b4792ac0cbc257f76/items?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/json
Authorization: Bearer {token}

BODY:
[
    {
        "productId": "78916783M-1",
        "quantity": 1
    }
]
```



### 4. カートの情報（配送先住所、支払い方法、配送方法 など）の確認

買い物かごに設定されている内容は下記のAPIで参照可能です。下記画像のように配送先（shippingAddress）がどのように設定されているか確認できます。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getBasket)）

```sh
REQUEST:
GET /checkout/shopper-baskets/v1/organizations/{orgID}/baskets/f889a2979b4792ac0cbc257f76?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Authorization: Bearer {token}
```
![スクリーンショット 2023-01-19 19.18.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/4fd3855d-8eac-d09b-d90a-14b57dd64a35.png)




### 5. 配送先住所の追加

配送先が設定されていない場合、または変更したい場合は下記のAPIで設定を行います。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=updateShippingAddressForShipment)）

```sh
REQUEST:
PUT /checkout/shopper-baskets/v1/organizations/{orgID}/baskets/f889a2979b4792ac0cbc257f76/shipments/me/shipping-address?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/json
Authorization: Bearer {token}

BODY:
{
  "firstName": "John",
  "lastName": "Mayer",
  "address1": "11111 Prospect Valley Road",
  "city": "Woburn",
  "postalCode": "01801",
  "stateCode": "MA",
  "countryCode": "US"
}
```





### 6. クーポンコードの追加

今回は「APITEST」というクーポンコードを持つ全品に対して5%OFFになるクーポンを適用します。レスポンスからクーポンが適用されていることが確認でき、さらに5%割り引かれていることも確認できます。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=addCouponToBasket)）

```sh
REQUEST:
POST /checkout/shopper-baskets/v1/organizations/{orgID}/baskets/f889a2979b4792ac0cbc257f76/coupons?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/json
Authorization: Bearer {token}

BODY:
{
  "code": "APITEST"
}
```

![スクリーンショット 2023-01-19 18.26.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/59a32285-6ade-5a94-3047-488841d3c418.png)




### 7. 配送方法の取得

下記のAPIでレスポンス内から配送方法の一覧が取得できます。今回は「Ground」という支払い方法を利用するので配送方法IDの「001」を取得します。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getShippingMethodsForShipment)）

```sh
REQUEST:
GET /checkout/shopper-baskets/v1/organizations/{orgID}/baskets/f889a2979b4792ac0cbc257f76/shipments/me/shipping-methods?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Authorization: Bearer {token}
```

![スクリーンショット 2023-01-19 19.11.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/505164b5-fa72-0be1-c8e8-51ca5588db90.png)






### 8. 配送方法の選択

下記のAPIでは先ほど取得した配送先の一覧から「Ground（ID:001）」という支払い方法を利用するようにリクエストしています。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=updateShippingMethodForShipment)）

```sh
REQUEST:
PUT /checkout/shopper-baskets/v1/organizations/{orgID}/baskets/f889a2979b4792ac0cbc257f76/shipments/me/shipping-method?siteId={siteID}
Host: `{shortCode}.api.commercecloud.salesforce.com`
Content-Type: application/json
Authorization: Bearer {token}

BODY:
{
  "id": "001"
}
```





### 9. 支払い方法の取得

下記のAPIでレスポンス内から支払い方法の一覧が取得できます。今回はクレジットカードを利用するので支払い方法IDの「CREDIT_CARD」を取得します。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getPaymentMethodsForBasket)）

```sh
REQUEST:
GET /checkout/shopper-baskets/v1/organizations/{orgID}/baskets/f889a2979b4792ac0cbc257f76/payment-methods?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Authorization: Bearer {token}
```

![スクリーンショット 2023-01-19 18.48.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/8c22274a-431d-3c53-81b0-5a5c9fa28353.png)




### 10. 支払い方法の選択

下記のAPIでは今回の金額総計である143.05をクレジットカード（ID：CREDIT_CARD）で支払うということを意味しています。同時にカードのトークンやカード情報を送信することができるため、[Hooks](https://qiita.com/syunyama/items/7cea968880505ec303db#scapiocapi-hooks) 内などでオーソリを取りやすくなります。
（[サンプル Hooks](https://github.com/SalesforceCommerceCloud/sfcc-hooks-collection/blob/main/commerce-cloud-code/plugin_hooktacular/cartridge/scripts/hooks/basketPaymentHooks.js)）
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=addPaymentInstrumentToBasket)）

```sh
REQUEST:
POST /checkout/shopper-baskets/v1/organizations/{orgID}/baskets/f889a2979b4792ac0cbc257f76/payment-instruments?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/json
Authorization: Bearer {token}

BODY:
{
  "amount": 143.05,
  "paymentCard": {
    "expirationYear": 1990,
    "expirationMonth": 7,
    "validFromMonth": 8,
    "validFromYear": 2007,
    "issueNumber": "i117",
    "maskedNumber": "*********1234",
    "holder": "Miller",
    "cardType": "Visa",
    "creditCardToken": "shdbviudhvi78yh2i4h9hkfn98323hnnekf"
  },
  "paymentMethodId": "CREDIT_CARD"
}
```




### 11. 購入

最後にこれまで設定を追加してきた買い物かご（ID：f889a2979b4792ac0cbc257f76）を利用して注文を作成します。作成された注文の番号（00000201）を確認しておきます。
（[API リファレンス](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-orders?meta=createOrder)）

```sh
REQUEST:
POST /checkout/shopper-orders/v1/organizations/{orgID}/orders?siteId={siteID}
Host: {shortCode}.api.commercecloud.salesforce.com
Content-Type: application/json
Authorization: Bearer {token}

BODY:
{
    "basketId": "f889a2979b4792ac0cbc257f76"
}
```

![スクリーンショット 2023-01-19 19.42.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/fe98dd61-9370-ca01-632c-4d0586b50bdc.png)




Business Manager からも注文が作成されていることが確認できます。

![スクリーンショット 2023-01-19 19.44.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/a3b257df-5946-385e-e8c1-13ea4bf03b97.png)