---
title: "コマースチェックアウトのレンダリング"
slug: "commerce-checkout-renderings"
abstract: "請求、配送、確認ページの作成に使われるCommerce Checkoutレンダリングの概要。"
---
# コマースチェックアウトのレンダリング

SXAツールボックス内のCommerce Checkoutグループには、チェックアウトプロセスを管理する [ためのページ作成に使えるレンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/build-a-storefront-with-commerce-renderings.html "Build a storefront with Commerce renderings") がいくつか含まれています。このトピックでは、ツールボックス内の**Commerce Checkout**セクションからアクセス可能なレンダリングについて説明します。

コンテンツエディター内のページの順序がチェックアウトページの順序を決定します。チェックアウトプロセスの最初のステップとしてどのページが表示されるか、また顧客がプロセスの前進または後退ボタン(例えば **「配達に戻る** 」や **「確認に続** 行」ボタン)をクリックしたときにどのページが表示されるかを決定します。

![Checkout pages in the tree view.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/checkout_pages_in_sequence.png)

## チェックアウトレンダリング開始

顧客がチェックアウトプロセスを開始できるようにするために、開始チェックアウトレンダリングを使用します。この時点で、顧客はチェックアウトページに誘導されます。このページには、ライブサイト上で表示されない「開始チェックアウト」レンダリングのみが含まれていなければなりません。

エクスペリエンスエディターでは、開始チェックアウトのレンダリングは次のような見た目です:

![Start Checkout shown in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_Start_Checkout.png)

Checkout Stepプロバイダーは顧客をどのページにリダイレクトするかを決定します。関連するデータ項目で、レンダリングに表示されるメッセージを設定できます。

ライブストアフロントでは、開始チェックアウトレンダリングが顧客をチェックアウトプロセスの最初の目に見えるステップへリダイレクトします。

> !注カートが空の場合、顧客はショッピングカートページにリダイレクトされます。

## ステップインジケーターレンダリング

ステップインジケーターを使って、チェックアウトの手順の進捗を示します。

![Steps in the checkout process](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_StepIndicator_Live.png)

以下のステップはデフォルトで定義されています:

-   カート
-   配達
-   請求
-   レビュー

ステップインジケーター内のステップの順序は、関連するデータ項目の **ステップ名とラベル** フィールドの設定によって決まります。

![Step indicator](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_step_indicator.png)

左列のステップ名はステップのHTML識別子であり、右列はユーザーインターフェースに表示されるテキストラベルです。

顧客がチェックアウトプロセスを進めると、現在のステップがハイライトされます。各チェックアウトページでは、ステップインジケーターレンダリングの **コントロールプロパティ** ダイアログボックスで現在のステップが設定されています:

![Control Properties for the Step Indicator](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_ControlProperties_CurrentStep.png)

**現在のステップ**フィールドに、関連するデータ項目に表示されるステップ名を入力してください。

## デリバリーレンダリング

配達レンダリングを使って、顧客が商品の発送場所や方法を指定できるようにします。デフォルトでは、配達はチェックアウトプロセスの最初の目に見えるステップです。エクスペリエンスエディターでレンダリングをページに追加すると、次のような見た目になります:

![Delivery rendering in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_Delivery_preferences.png)

ライブストアフロントでは、顧客が配送方法を選択し、住所を入力し、「 **配送オプションを見る」**をクリックすると、配達レンダリングは次のようになります:

![Delivery rendering on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_delivery_shippingoptions.png)

お客様が選択できるオプションはカートの内容によって異なります。SXAストアフロントソリューションでは以下の配達オプションが利用可能で、カスタマイズ可能です:

-   **発送 –** すべての商品はお客様が指定した単一の配送先住所に配達されます。有効な住所を入力すると、以下の配送オプションが利用可能です:
    -   グラウンド
    -   翌日放送
    -   標準
    -   スタンダード・オーバーナイト
-   **商品を個別に発送する –** カート内の各商品に対して異なる配送先住所と配送オプションを指定できます。
-   **デジタル –** 顧客がデジタル商品を注文した場合、配達のためにメールアドレスを入力しなければなりません。

すべての商品に配送先住所と配達オプションがある場合、「 **請求継続」** ボタンが有効になり、顧客は次のチェックアウトステップに進むことができます。

エクスペリエンスエディターでは、レンダリング中のフィールドやボタンが無効になっています。

ライブストアフロントでは、顧客はボタンを使ってチェックアウトの各ステップ間を前後に移動できます。入力済みの配達情報は、顧客が **「請求を続ける**」をクリックしたときに保存され、その後顧客が買い物を続けるためにチェックアウトを離れても保持されます。デフォルトでは、顧客が **「買い物を続ける」** ボタンをクリックするとホームページが表示されます。これはチェックアウトステッププロバイダーによって決定されます。

## 請求レンダリング

請求レンダリングを使って、顧客が支払い情報を指定できるようにします。顧客は請求オプションを選択し、請求情報を入力します。顧客の選択に応じて関連するフィールドが表示されます。

![Billing rendering in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_billing.png)

レンダリングは現在、以下の支払いオプションをサポートしています:

-   Braintreeの第三者決済管理サービスによるフェデレートペイメント
-   ギフトカード支払い

顧客はギフトカードの金額を注文に適用でき、現在の残高はクレジットカードで支払うことができます。

> !注チェックアウト時にオンライン決済を可能にするため、ストアフロントのサイトテンプレートにはBrainTreeとの連携が含まれています。BrainTreeに連絡して契約交渉を行い、必要な加盟店IDを取得してください。開発者アカウントはストアフロント開発やテスト用に利用可能です。カスタムコマースコンポーネントを作成して、お好みの決済プロバイダーを統合することも可能です。

請求先住所には以下のオプションがあります:

-   **配送先住所と同様に** 、配達ページで「 **全商品の単一発送** 」オプションを選択している場合のみ利用可能です。複数の配送先住所が指定されている場合、顧客は登録済みの住所から選択するか、新しい住所を入力する必要があります
-   **登録済み住所から選択** してください。過去に使用された請求先および配送先住所がすべて表示されます。
-   **別の住所を使う** こと – 新しい住所を入力してください。

レンダリングはBraintreeのフェデレーテッド決済制御を使ってクレジットカード支払いを受け付けます。顧客はクレジットカード情報を入力し、その後「 **支払いの検証** 」をクリックして金額を確認します。

ギフトカードの支払いを追加するには、お客様が **ギフトカードの適用** セクションを展開し、ギフトカード番号を入力して「 **残高を取得する**」ボタンを押します。ギフトカードが有効であれば残高が表示されます。顧客は注文金額の全額を支払いとして適用するか、より少額の金額を入力して適用することができます。

> !注支払いの一部にギフトカードを適用し、その後クレジットカードで残高を支払う場合は、まずギフトカードを入力しなければなりません。クレジットカード情報を入力した時点で現在の残額がクレジットカードに適用され、その後のクレジットカード金額は変更できません。

エクスペリエンスエディターでは、レンダリング中のフィールドやボタンが無効になっています。

ライブストアフロントでは、支払い情報入力が完了すると **「継続確認** 」ボタンが有効になり、顧客は次のチェックアウトステップに進めます。

顧客はボタンを使って、チェックアウトの各ステップ間を前後に移動できます。入力済みの請求情報はBraintreeによって記憶されます。顧客がレジに戻ってきてショッピングカートや配送情報が変わっていなければ、先に入力したカード情報を利用できます。しかし、ショッピングカートや配送情報が変更されている場合は、顧客はカード情報を再度入力しなければなりません。

## レビューレンダリング

レビューレンダリングを使って、顧客が注文を確認し確認できるようにします。これは請求および配送のステップが完了した後に行われます。レビューレンダリングは注文を要約し、顧客が現在の注文を確認し購入を確定できるようにします。

エクスペリエンスエディターのレンダリングは次のようになります:

![Review rendering in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_Review.png)

ライブストアフロントのレンダリングは次のようになります:

![Review rendering on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_ReviewLive.png)

顧客が注文を行いたい場合、顧客は **「注文確認**」をクリックします。デフォルトでは「 **注文確認** 」は顧客を注文確認ページに誘導します。

##### 構成

[コントロールプロパティ](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/configure-a-commerce-rendering.html "Configure a Commerce rendering")のダイアログボックスで、レビューレンダリング用の以下のプロパティを設定できます。

財産

使用方法

請求ページURL(請求ページURL)

請求先アドレスの編集リンクを設定してください。

配達ページURL(Delivery Page URL)

「配送先住所編集」リンクを設定してください。

> !注例えば、訪問者がクライアント側の検証を回避しようとすると、ConfirmレンダリングでページのURLに直接アクセスして注文を送信すると、Commerceエンジンは注文を拒否しエラーが表示されます。

## 注文確認レンダリング

注文確認を使って顧客の注文が提出されたことを確認します。

エクスペリエンスエディターでは、注文番号と注文状況のプレースホルダーデータが表示されます:

![Order Confirmation rendering in the Experience Editor](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/Checkout_OrderConfirmation.png)