Stripe Payment Connector for Commercetools Checkout をインストールして設定する
Commercetools Merchant Center を設定して Checkout Connector をインストールする方法をご紹介します。
Stripe Payments と Commercetools Checkout を連携させると、構築済みの決済エクスペリエンスが提供され、安全な決済を実現できます。
![](https://b.stripecdn.com/docs-statics-srv/assets/stripe-connector-commercetools-checkout.a24103434b6b5cf0cfe4391ddfec842d.png)
Commercetools Merchant Center に掲載されている Checkout Connector
はじめに![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Stripe Payment Connector をインストールする前に、次のことを行ってください。
- Stripe アカウントの詳細を入力して、接続を確立します。
- コネクターをインストールする Commercetools インスタンスの組織とプロジェクトを特定します。
- コンポーザブルコマースプロジェクトで Commercetools Checkout を有効にします。
- Commercetools インスタンスから直接コネクターをインストールして設定する準備をします。
コネクターをインストールする![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
- Commercetools インスタンスの Connect Marketplace から、Stripe Payment for Checkout を選択します。
- Commercetools の設定ページで、コネクターをインストールする地域、組織、プロジェクトを選択します。
- 次に、環境変数と設定の詳細を指定します。
- Commercetools Checkout の設定ページで Add payments (支払いを追加) をクリックして、決済手段を有効にします。
- Add payments (決済を追加) ページで、次の操作を行います。
- Payment Connector では、Stripe Payment for Checkout を選択します。
- Drop-in payment integration name (ドロップイン決済連携名) には、表示する連携名を入力します。
- Payment integration key (決済連携キー) には、2 文字から 256 文字の英数字、アンダースコア、ハイフンで構成されたキーを入力します。
- ステータスを切り替えて有効にします。
Stripe Payment Connector を設定する![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
次のインストール変数を使用して、コネクターを設定します。
変数 | 説明 |
---|---|
CTP_ | Commercetools コンポーザブルコマース API の URL。デフォルト値は https://api. です。 |
CTP_ | OAuth 2.0 トークンの生成に使用される Commercetools プラットフォームでの認証用の URL。Commercetools コンポーザブルコマースへのすべての API コールには、OAuth 2.0 トークンが必要です。デフォルト値は https://auth. です。 |
CTP_ | Commercetools コンポーザブルコマースユーザーアカウントのクライアント ID。Commercetools クライアントはクライアント ID を使用して、SDK を介して Commercetools コンポーザブルコマースと通信します。 |
CTP_ | Commercetools コンポーザブルコマースユーザーアカウントの Client Secret。Commercetools クライアントは Client Secret を使用して、SDK を介して Commercetools コンポーザブルコマースと通信します。 |
CTP_ | JSON Web キーセットを提供する URL。 |
CTP_ | JWT 検証プロセスに必要な JSON Web トークンの発行者。 |
CTP_ | Commercetools コンポーザブルコマースプロジェクトのキー。 |
CTP_ | スコープは、Commercetools クライアントがアクセスでき、読み取りと書き込みのアクセス権を持つエンドポイントを定義します。 |
CTP_ | Commercetools プラットフォームでのセッション作成用の URL。コネクターは、作成されたセッションを使用してイネーブラーとプロセッサーの間で情報を共有します。デフォルト値は https://session. です。 |
STRIPE_ | Stripe Elements はデザインのカスタマイズに対応しており、デザインオプションでサイトのデザインと親和性を持たせることができます。この値は、Express Checkout Element のデザインを定義します。 |
STRIPE_ | Stripe Elements はデザインのカスタマイズに対応しており、デザインオプションでサイトのデザインと親和性を持たせることができます。この値は、Payment Element のデザインを定義します。 |
STRIPE_ | Stripe のキャプチャー方法 (手動または自動)。デフォルト値は automatic です。 |
STRIPE_ | Stripe はアカウントの API キーを使用して API リクエストを認証します。デフォルトのシークレット API キーを使用する代わりに、制限付きアクセスキーを作成することをお勧めします。 |
STRIPE_ | Webhook エンドポイントに対する Stripe の一意の識別子。 |
STRIPE_ | Webhook の署名を検証するために公式ライブラリで使用される Stripe シークレットキー。このキーは Stripe ダッシュボードで作成されます。 |
一般的な設定![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
コネクターの設定で、Payment Connector イネーブラーによって生成されたコンポーネントのキャプチャーモード (手動または自動) を変更できます。イネーブラーは、Payment Connector プロセッサーに接続されている支払いコンポーネントを管理します。プロセッサーは、Stripe でそれぞれのメタデータを設定した Payment Intent を作成し、Webhook イベントを Commercetools の支払い取引に変換します。
Stripe Payment Element と Express Checkout Element のデザインは、Stripe Payment Connector の設定から変更できます。
Webhook![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Stripe は、貴社のアカウントでイベントが発生すると、Webhook を使用して貴社のアプリケーションに通知します。Webhook は、顧客の銀行が支払いを確認したときや支払いを拒否したとき、または支払いがキャンセルされたときや返金されたときに、支払い取引を更新するのに便利です。
Stripe は次の Webhook に対応しています。
イベントタイプ | 説明 |
---|---|
charge. | charge. が true の場合、Commercetools で支払いに Refund:Success 取引を追加します。 |
charge. | 支払いがキャプチャーされていない場合は、Commercetools で支払いを作成します。支払いが行われた場合は、Commercetools で支払いに Authorization:Success 取引を追加します。 |
payment_ | Commercetools で支払いに CancelAuthorization:Success 取引を追加します。 |
payment_ | コネクターアプリのプロセッサーログの情報を記録します。 |
payment_ | コネクターアプリのプロセッサーログの情報を記録します。 |
payment_ | このイベントは、次のいずれかのキャプチャー方法を使用して処理できます。
|
変更ログとコードへのアクセス![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
コネクターの変更とアップグレードの最新状況は、Github リポジトリで確認できます。