# Stripe app for Salesforce B2C Commerce 実装ガイド ## Business Manager の設定 Stripe App for Salesforce B2C Commerce (LINK Cartridge) を完全に機能させるには、いくつかのカートリッジが必要です。さらに、コントローラーと SFRA のサポートは 2 つの別個のカートリッジに分割されているため、どちらかのモデルをインストールして使用できます。 3 つのカートリッジすべてを UX スタジオにインポートし、Server Connection に関連付けます。 ### サイトカートリッジの割り当て 1. **Administration (管理) > Sites (サイト) > Manage Sites (サイトの管理)** に移動します。 1. Stripe の機能を追加するストアフロントサイトのサイト名をクリックします。 1. **Settings (設定)** タブを選択します。 1. Storefront Reference Architecture (SFRA) の場合、カートリッジパスに `app_stripe_sfra:int_stripe_sfra:int_stripe_core` を追加します。 Stripe を導入するストアフロントサイトごとに、この手順を繰り返します。 ### Business Manager カートリッジの割り当て 1. **Administration (管理) > Sites (サイト) > Manage Sites (サイトの管理)** に移動します。 1. **Business Manager Site (Business Manager サイト)** をクリックしてから、**Manage the Business Manager site (Business Manager サイトの管理)** リンクをクリックします。 1. カートリッジパスに `int_stripe_core` を追加します。 ### 同意書のインポート 1. プロジェクトのメタデータフォルダに移動し、`stripe_site_template` フォルダを開きます。 1. `sites` フォルダーを開き、`siteIDHere` フォルダーを目的のサイトのサイト ID に編集します。 1. Stripe を使用するサイトごとにフォルダーを追加します。 1. **Administration (管理) > Site Development (サイトの開発) > Site Import & Export (サイトのインポートおよびエクスポート)** に移動します。 1. `stripe_site_template` フォルダーを zip ファイルに圧縮してインポートします。 ### Stripe のスタイリングの構築 必要に応じて、同じルートフォルダから `package.json` にあるベースの SFRA インストールへのパスを更新します。 通常は最上位のプロジェクトフォルダーがあり、ここに SFRA ベースカートリッジのリポジトリーと必要なすべてのプラグイン、ライブラリ、およびその他の LINK カートリッジが複製されます。Stripe カートリッジもそのフォルダーに複製した場合、`paths.base` プロパティを更新する必要はありません。そのフォルダーにカートリッジを複製していない場合は、`package.json` の `paths.base` プロパティを、Storefront Reference Architecture リポジトリーが格納されているローカルディレクトリーへの相対パスを使用して更新します。デフォルトの `paths.base` 値は次のとおりです。 ```json "paths": { "base": "../storefront-reference-architecture/cartridges/app_storefront_base/" } ``` `package.json` に SFRA カートリッジへの正しいパスが設定されていることを確認したら、Stripe リポジトリーのルートフォルダーから `npm run compile:scss` コマンドを実行します。 ### 新しい決済代行業者の追加 Stripe カートリッジでは、2 つの決済代行業者が使用されます。`STRIPE_CREDIT` はクレジットカードのみを処理し、`STRIPE_APM` は [Payment Element](https://docs.stripe.com/payments/payment-element.md) と [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md) による決済手段を処理します。 #### クレジットの決済代行業者 1. **Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Processors (決済プロセッサー)** に移動し、**New (新規)** をクリックします。 1. 新しいウィンドウで、ID を `STRIPE_CREDIT` に設定し、**Apply (適用)** をクリックします。 #### APM の決済代行業者 1. **Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Processors (決済プロセッサー)** に移動し、**New (新規)** をクリックします。 1. 新しいウィンドウで、ID 属性を `STRIPE_APM` 値に設定し、**Apply (適用)** をクリックします。 ### 支払い方法の更新 **Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Methods (支払い方法)** に移動し、**CREDIT\_CARD** 支払い方法をクリックして、**CREDIT\_CARD** 詳細セクションのドロップダウンで **STRIPE\_CREDIT** の決済プロセッサーを選択します。 動的な決済手段または支払いリクエストボタンの場合、**STRIPE\_APM\_METHODS** を有効にして、Stripe でサポートされている決済手段を含めます。詳細は[決済手段ガイド](https://stripe.com/guides/payment-methods-guide)をご覧ください。 Stripe 支払いリクエストボタンを利用するには、**STRIPE\_PAYMENT\_REQUEST\_BTN** 支払い方法を有効にします。詳細については、[支払いリクエストボタン](https://docs.stripe.com/stripe-js/elements/payment-request-button.md)をご覧ください。 ## Stripe Salesforce Commerce アプリをインストールする Stripe Apps を使用し、Stripe アカウントのセキュリティを強化し、各システムの個々の制限付きキーを使用しやすくできます。Salesforce Commerce コネクターの導入には、Stripe App のインストールと新たに生成されるシークレットおよび公開可能[キー](https://docs.stripe.com/keys.md)の取得のプロセスが不可欠です。この方法を使用することで、自社の制限付きキーの作成やシークレットキーの使用を手動で行う必要がなくなります。Salesforce コマースアプリを導入してアカウントのセキュリティインフラを強化するには以下の手順の通り操作します。 1. [Stripe App Marketplace](https://marketplace.stripe.com/) に移動して、[Salesforce Commerce アプリをインストールする](https://marketplace.stripe.com/apps/install/link/com.stripe.SalesforceCommerce)をクリックします。 1. アプリをインストールする Stripe アカウントを選択します。 1. アプリの権限を確認および承認してからテスト環境または本番環境でアプリをインストールし、**インストール** をクリックします。 1. アプリをインストールしたら、キーをなくさないように安全な場所に保管します。保管場所を忘れないようにするため、[ダッシュボードにキーに関するメモを残す](https://docs.stripe.com/keys.md#reveal-an-api-secret-key-live-mode)ことができます。 1. 新たに生成した公開可能キーとシークレットキーを使用して、App の設定を完了します。 1. インストール後のアプリ管理や新しいセキュリティキーの生成は、[サンドボックス](https://dashboard.stripe.com/test/settings/apps/com.stripe.SalesforceCommerce) または[本番環境](https://dashboard.stripe.com/settings/apps/com.stripe.SalesforceCommerce) のアプリケーションの設定ページで行います。 ## 設定 **Merchant Tools (加盟店ツール) > Site Preferences (サイト設定) > Custom Site Preferences (カスタムサイト設定) > Stripe Configurations (Stripe 設定)** をサイト固有の値で更新します。 - Stripe Salesforce Commerce アプリから Stripe シークレット API キーに値を入力します。 - Stripe Salesforce Commerce アプリから公開可能 API キーに値を入力します。 - **Is this SFRA installation (SFRA インストールですか):** 現在のサイトで SFRA を使用している場合は、`yes` に設定します。 - **Capture Funds on Stripe Charge (Stripe 支払いで資金をキャプチャーする):** デフォルト値は `true` (はい) です。Stripe 支払いをオーソリするには、`false` (いいえ) に設定します。 - **Stripe card element CSS style (Stripe カード Element CSS スタイル)**: カード Element ボタンがストアフロントのスタイル全体に収まるように CSS スタイリングを設定します `{"base": {"fontFamily": "Arial, sans-serif","fontSize": "14px","color": "#C1C7CD"},"invalid": {"color": "red" } }` など)。 - **Stripe API URL:** `https://js.stripe.com/dahlia/stripe.js` - **Stripe Payment Request Button Style (Stripe 支払いリクエストボタンのスタイル):** 支払いリクエストボタンには、 limited CSS styling for the button (ボタン用の制限付き CSS スタイル) を選択します。詳細については、[Element のスタイル設定](https://docs.stripe.com/stripe-js/elements/payment-request-button.md#styling-the-element) をご覧ください。 - **Apple Pay Verification String (Apple Pay 確認文字列)**: Stripe ダッシュボードから提供された Apple 確認文字列を入力します。これは 1 回のみ有効です。Stripe コンソールは、セットアップ時に Apple Pay for Web 確認文字列をプロキシします。支払いリクエストボタンがストアフロントでの支払い形式として使用される場合は、これをサンドボックスで設定します。 - **国コード (Stripe の支払いリクエストボタン):** これは、支払いリクエストボタンのデフォルトの国コード (US など) です。1 つのサイトが複数の国で使用される場合、サイト設定ではなく国コードを動的に渡すようにカスタマイズする必要があります。詳細については、[支払いリクエストインスタンスを作成する](https://docs.stripe.com/stripe-js/elements/payment-request-button.md)をご覧ください。 - **Stripe webhook signing secret (Stripe Webhook 署名シークレット):** Stripe ダッシュボードから提供される *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) 署名シークレットを入力します。Stripe は Webhook イベントに署名し、検証を SFCC に渡します。SFCC は、このシークレットを使用してメッセージの内容を検証します。 - **Stripe Allowed Webhook Statuses (Stripe で許可される Webhook ステータス)**: Webhook が応答するための[許可ステータス](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/implementation-guide.md#stripe-dashboard-set-up)を設定します。 ![](https://b.stripecdn.com/docs-statics-srv/assets/configuration-webhook-statuses.01dca58aedb406537570122a457afa09.png) - **Stripe Enabled (Stripe の有効化)**: カートリッジを有効または無効にします。 ## Stripe Quick Setup (Stripe クイック設定) または、**Stripe Quick Setup** を使用して Business Manager で Stripe を設定できます 1. Business Manager にログインします。 1. **Administration (管理)** の **Business Manager** 内で「Stripe Quick Setup」を検索します。 1. Stripe を設定するサイトを選択します。 1. Stripe Salesforce Commerce アプリから取得した `Stripe Publishable Key` と `Restricted Access key` を入力します。 1. **Quick Setup (クイック設定)**\* をクリックします。 ## Apple Pay を設定する Apple Pay の場合: `RedirectURL.js` を更新します。 ```javascript server.extend(page); server.replace('Start', function (req, res, next) { const URLRedirectMgr = require('dw/web/URLRedirectMgr'); // Intercept the incoming path request if (URLRedirectMgr.getRedirectOrigin() === '/.well-known/apple-developer-merchantid-domain-association') { res.render('stripe/util/apple'); return next(); } const redirect = URLRedirectMgr.redirect; const location = redirect ? redirect.location : null; const redirectStatus = redirect ? redirect.getStatus() : null; if (!location) { res.setStatusCode(404); res.render('error/notFound'); } else { if (redirectStatus) { res.setRedirectStatus(redirectStatus); } res.redirect(location); } return next(); }); ``` Stripe ダッシュボードでドメインを確認できるように、サンドボックスのサイトの 1 つにエイリアスを一時的に設定します。エイリアスは次のようにする必要があります。 ```json { "__version": "1", "settings": { "http-host": "your.sandbox.domain.demandware.net", "https-host": "your.sandbox.domain.demandware.net", "default": "true", "site-path": "/", }, "your.sandbox.domain.demandware.net": [ { "locale": "en_GB", "if-site-path": "/", } ] } ``` locale の値は、無効にされていないロケールである必要があります。 1. [支払い方法のドメインページ](https://dashboard.stripe.com/settings/payment_method_domains)で、**新しいドメインを追加する**をクリックします。 1. ドメイン名を入力します。 1. **保存して続ける**をクリックします。 1. [ドメインアソシエーションファイル](https://stripe.com/files/apple-pay/apple-developer-merchantid-domain-association)をダウンロードします。 1. このファイルを `/.well-known/apple-developer-merchantid-domain-association` でホストします。たとえば、`https://example.com` を登録する場合、`https://example.com/.well-known/apple-developer-merchantid-domain-association` でこのファイルを入手できるようにします。 1. **確認する**をクリックします。 ## ストアフロントのコードを更新する ベースの LINK カートリッジコードには、Stripe でサポートされているすべてのクレジットカードのサポートが含まれています。ストアフロントで使用できるカードのリストは、Business Manager のクレジット/デビットカードリストによる制限も受けます (Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Methods (支払い方法) > Credit/Debit Cards (クレジット/デビットカード))。 Storefront コードを次のように更新します。この例は、SFRA バージョン 4.4 をベースとします。後続のセクションでは、SFRA コードに対するカスタマイズについて詳しく説明します。 コントローラーエンドポイントの中には、置き換えられるのではなく追加されるものが多く存在します。これらのエンドポイントは何もしなくても機能するため、ここでは触れません。 実装でエンドポイントがすでに置き換えられている場合があるため、コントローラーの更新は、エンドポイントが置き換えられた場合にのみ必要です。ベースカートリッジに加えられた変更を、すでに置き換えられているコントローラーに追加します。これらのエンドポイントを拡張/置換していない場合は、必要な操作は何もありません。 ### コントローラー: CheckoutServices.js パス: `app_stripe_sfra/cartridge/controllers/CheckoutServices.js` `SubmitPayment` エンドポイントの決済手段の検証を削除します。 ```javascript if (!paymentMethodID && currentBasket.totalGrossPrice.value > 0) { const noPaymentMethod = {}; noPaymentMethod[billingData.paymentMethod.htmlName] = Resource.msg( 'error.no.selected.payment.method', 'payment', null ); delete billingData.paymentInformation; res.json({ form: billingForm, fieldErrors: [noPaymentMethod], serverErrors: [], error: true }); return; } ``` 注文作成コードを更新します。 ```javascript const stripeCheckoutHelper = require('int_stripe_core').getCheckoutHelper(); const order = stripeCheckoutHelper.createOrder(currentBasket); if (!order) { res.json({ error: true, errorMessage: Resource.msg('error.technical', 'checkout', null); }); return next(); } ``` 発注コードを更新します。 ```javascript var isAPMOrder = stripeCheckoutHelper.isAPMORder(order); if (!isAPMOrder) { var stripePaymentInstrument = stripeCheckoutHelper.getStripePaymentInstrument(order); if (stripePaymentInstrument && order.custom.stripeIsPaymentIntentInReview) { res.json({ error: false, orderID: order.orderNo, orderToken: order.orderToken, continueUrl: URLUtils.url('Order-Confirm').toString() }); return next(); } // Places the orderconst fraudDetectionStatus = hooksHelper( 'app.fraud.detection', 'fraudDetection', currentBasket, require('*/cartridge/scripts/hooks/fraudDetection').fraudDetection ); if (fraudDetectionStatus.status === 'fail') { Transaction.wrap(function () { OrderMgr.failOrder(order); }); // Fraud detection failed req.session.privacyCache.set('fraudDetectionStatus', true); res.json({ error: true, cartError: true, redirectUrl: URLUtils.url('Error-ErrorCode', 'err', fraudDetectionStatus.errorCode).toString(), errorMessage: Resource.msg('error.technical', 'checkout', null); }); return next(); } COHelpers.sendConfirmationEmail(order, req.locale.id); // Reset usingMultiShip after successful Order placement req.session.privacyCache.set('usingMultiShip', false); res.json({ error: false, orderID: order.orderNo, orderToken: order.orderToken, continueUrl: URLUtils.url('Order-Confirm').toString() }); return next(); } ``` ### コントローラー: PaymentInstruments.js パス: `app_stripe_sfra/cartridge/controllers/PaymentInstruments.js` `DeletePayment` エンドポイントを次のコードに置き換えます。 ```javascript server.replace('DeletePayment', function(req, res, next) { var stripeHelper = require ('int_stripe_core').getStripeHelper(); var wallet = stripeHelper.getStripeWallet(customer); var UUID = req.querystring.UUID; wallet.removePaymentInstrument({ custom: { stripeId: UUID }}); res.json({ UUID: UUID }); next(); }); ``` ### コントローラー: RedirectURL.js パス: `app_stripe_sfra/cartridge/controllers/RedirectURL.js` 次のコードを `Start` 関数に追加します。 ```javascript server.replace('Start', function (req, res, next) { const URLRedirectMgr = require('dw/web/URLRedirectMgr'); // Intercept the incoming path request if (URLRedirectMgr.getRedirectOrigin() === '/.well-known/apple-developer-merchantid-domain-association') { res.render('stripe/util/apple'); return next(); } const redirect = URLRedirectMgr.redirect; const location = redirect ? redirect.location : null; const redirectStatus = redirect ? redirect.getStatus() : null; if (!location) { res.setStatusCode(404); res.render('error/notFound'); } else { if (redirectStatus) { res.setRedirectStatus(redirectStatus); } res.redirect(location); } return next(); }); ``` ## 外部インターフェイス Stripe 機能は、Stripe サービスへの外部コールに大きく依存しています。外部インターフェイスはすべて、Stripe API との通信にサービスフレームワークを使用しています。 Stripe アカウントは、無料で作成して使用できます。Stripe のサービスとの通信のほとんどはログに記録され、[Stripe ダッシュボード](https://dashboard.stripe.com)からアクセスできます。実装の監視とテストには Stripe ダッシュボードを使用することをお勧めします。Stripe のサービスの実装に関する主な設定は、Administration (管理) > Operations (運用) > Services with a different service for each external call (各外部呼出しに異なるサービスを使用するサービス) にあります。 - `stripe.http.addCard` - `stripe.http.authorizePayment` - `stripe.http.createCharge` - `stripe.http.createCustomer` - `stripe.http.deleteCard` - `stripe.http.fetchCustomerCards` - `stripe.http.fetchCustomerSources` - `stripe.http.refundCharge` - `stripe.http.retrieveCustomer` - `stripe.http.service` - `stripe.http.updateCard` これらのサービスはすべて、同じプロファイルと認証情報を使用します。異なる可能性があるのは、ログ名のプレフィックスと、通信ログが有効かどうかです。 ## Stripe Payment Element Stripe カートリッジは、支払い方法として Stripe Payment Element に対応します。 Payment Element は、1 つの実装で 25 種類以上の支払い方法の受け付けを可能にする埋め込みの UI コンポーネントです。 ![](https://b.stripecdn.com/docs-statics-srv/assets/Payment-Element-SPM-Link.1cf2bf285665f1c139d20d08e6969ea0.png) 支払い Element を有効にするには、**Business Manager > Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Methods (決済手段)** に移動し、ID が `STRIPE_PAYMENT_ELEMENT` に設定された決済手段を有効にします。ストアフロント決済 > 支払いには、Stripe [ダッシュボード](https://dashboard.stripe.com/settings/payment_methods) ですべての決済手段が有効になっているウィジェットがあります。 Business Managerで Payment Element を有効にすると、他のすべての支払い方法を置き換えることができます。支払い方法をすべて無効にして、代わりに `STRIPE_PAYMENT_ELEMENT` を使用することができます。 Stripe Payment Element からの決済手段を将来の使用に備えて保存できるようにするには、**Business Manager> Custom Preferences (カスタム設定)> Stripe Configs (Stripe 設定)** に移動し、**Stripe Payment Element: Enable Save Payment Method for Future Purchases (Stripe Payment Element: 将来の購入に備えて決済手段を保存)** を `Yes` に設定します。 Checkoutで保存された決済手段のリストを表示するには、**Business Manager > 決済手段** に移動して、`CREDIT_CARD` 決済手段を有効にします。`STRIPE_PAYMENT_ELEMENT` も有効にすると、保存されたカードが存在する場合はクレジットカードタブにそのカードのリストが表示されます。 ## Stripe Radar のインサイトの表示 Stripe LINK カートリッジは、Business Manager の Orders セクション内にリスクに関するインサイトを表示する Radar インサイトビューをサポートします。[Radar](https://docs.stripe.com/radar.md) はリアルタイムの不正利用防止を提供し、追加の開発は不要です。不正利用対策の専門家は、[Radar for Teams](https://stripe.com/radar/fraud-teams) を追加することで、保護をカスタマイズし、より詳細なインサイトを得ることができます。 ![](https://b.stripecdn.com/docs-statics-srv/assets/radar-insights-sfcc.bc57c92d0232d38564a8d68fdb0fa94e.png) インサイトの表示を有効にするには、**Business Manager** > **Merchant Tools (加盟店ツール)** > **Custom Preferences (カスタム設定)** > Stripe Configs (Stripe 設定)** に移動し、**リスクスコアデータ**を `Yes` に設定します。 ## See also - [ユーザーガイド](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/user-guide.md)