Stripe Connector for Salesforce B2C Commerce 実装ガイド
Business Manager の設定
Stripe Connector for Salesforce B2C Commerce (LINK カートリッジ) を完全に機能させるには、いくつかのカートリッジが必要です。さらに、コントローラーと SFRA のサポートは 2 つの別個のカートリッジに分割されているため、どちらかのモデルをインストールして使用できます。
3 つのカートリッジすべてを UX スタジオにインポートし、Server Connection に関連付けます。
サイトカートリッジの割り当て
- Administration (管理) > Sites (サイト) > Manage Sites (サイトの管理) に移動します。
- Stripe の機能を追加するストアフロントサイトのサイト名をクリックします。
- Settings (設定) タブを選択します。
- Storefront Reference Architecture (SFRA) の場合、カートリッジパスに
app_stripe_sfra:int_stripe_sfra:int_stripe_core
を追加します。
Stripe を導入するストアフロントサイトごとに、この手順を繰り返します。
Business Manager カートリッジの割り当て
- Administration (管理) > Sites (サイト) > Manage Sites (サイトの管理) に移動します。
- Business Manager Site (Business Manager サイト) をクリックしてから、Manage the Business Manager site (Business Manager サイトの管理) リンクをクリックします。
- カートリッジパスに
int_stripe_core
を追加します。
同意書のインポート
- プロジェクトのメタデータフォルダに移動し、
stripe_site_template
フォルダを開きます。 sites
フォルダーを開き、siteIDHere
フォルダーを目的のサイトのサイト ID に編集します。- Stripe を使用するサイトごとにフォルダーを追加します。
- Administration (管理) > Site Development (サイトの開発) > Site Import & Export (サイトのインポートおよびエクスポート) に移動します。
stripe_site_template
フォルダーを zip ファイルに圧縮してインポートします。
Stripe のスタイリングの構築
必要に応じて、同じルートフォルダから package.json
にあるベースの SFRA インストールへのパスを更新します。
通常は最上位のプロジェクトフォルダーがあり、ここに SFRA ベースカートリッジのリポジトリーと必要なすべてのプラグイン、ライブラリ、およびその他の LINK カートリッジが複製されます。Stripe カートリッジもそのフォルダーに複製した場合、paths.base
プロパティを更新する必要はありません。そのフォルダーにカートリッジを複製していない場合は、package.json
の paths.base
プロパティを、Storefront Reference Architecture リポジトリーが格納されているローカルディレクトリーへの相対パスを使用して更新します。デフォルトの paths.base
値は次のとおりです。
"paths": { "base": "../storefront-reference-architecture/cartridges/app_storefront_base/" }
package.json
に SFRA カートリッジへの正しいパスが設定されていることを確認したら、Stripe リポジトリーのルートフォルダーから npm run compile:scss
コマンドを実行します。
新しい決済代行業者の追加
Stripe カートリッジでは、2 つの決済プロセッサーが使用されます。STRIPE_CREDIT
はクレジットカードを処理し、STRIPE_APM
は銀行振込や giropay などの現地の決済手段を処理します。
クレジットの決済代行業者
- Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Processors (決済プロセッサー) に移動し、New (新規) をクリックします。
- 新しいウィンドウで、ID を
STRIPE_CREDIT
に設定し、Apply (適用) をクリックします。
APM の決済代行業者
- Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Processors (決済プロセッサー) に移動し、New (新規) をクリックします。
- 新しいウィンドウで、ID 属性を
STRIPE_APM
値に設定し、Apply (適用) をクリックします。
支払い方法の更新
Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Methods (決済手段) に移動し、CREDIT_CARD 決済手段をクリックして、CREDIT_CARD 詳細セクションのドロップダウンで STRIPE_CREDIT の決済プロセッサーを選択します。
動的な決済手段または支払いリクエストボタンの場合、STRIPE_APM_METHODS を有効にして、Stripe でサポートされている決済手段を含めます。詳細は決済手段ガイドをご覧ください。
Stripe 支払いリクエストボタンを利用するには、STRIPE_PAYMENT_REQUEST_BTN 決済手段を有効にします。詳細については、支払いリクエストボタンをご覧ください。
Stripe Salesforce Commerce アプリをインストールする
Stripe Apps を使用して、Stripe アカウントのセキュリティを強化し、各システムの個々の制限付きキーを使用しやすくします。Salesforce Commerce コネクターの導入には、Stripe App のインストールと新たに生成されるシークレットおよび公開可能のキーの取得のプロセスが不可欠です。この方法を使用することで、自社の制限付きキーの作成やシークレットキーの使用を手動で行う必要がなくなります。Salesforce Commerce アプリを導入してアカウントのセキュリティインフラを強化するには以下の手順を使用します。
- Stripe App Marketplace に移動して、Salesforce Commerce アプリをインストールするをクリックします。
- アプリをインストールする Stripe アカウントを選択します。
- アプリの権限を確認して承認します。テスト環境または本番環境でアプリをインストールして、インストールをクリックします。
- アプリをインストールしたら、キーをなくさないように安全な場所に保管します。保管場所を忘れないようにするため、ダッシュボードにキーに関するメモを残すことができます。
- 新たに生成した公開可能キーとシークレットキーを使用して、Connector の設定を完了します。
- インストール後にアプリを管理したり、新しいセキュリティキーを生成したりするには、テスト環境または本番環境でアプリケーションの設定ページに移動します。
設定
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/v3/
Stripe Payment Request Button Style (Stripe 支払いリクエストボタンのスタイル): 支払いリクエストボタンには、ボタンに使用する制限付きの CSS スタイルを選択します。詳細については、Element のスタイリングをご覧ください。
Apple Pay Verification String (Apple Pay 確認文字列): Stripe ダッシュボードから提供された Apple 確認文字列を入力します。これは 1 回のみ有効です。Stripe コンソールは、セットアップ時に Apple Pay for Web 確認文字列をプロキシします。支払いリクエストボタンがストアフロントでの支払い形式として使用される場合は、これをサンドボックスで設定します。
国コード (Stripe 支払いリクエストボタン): これは、支払いリクエストボタンのデフォルトの国コード (US など) です。複数の国で単一サイトが使用される場合、サイト設定ではなく国コードを動的に渡すために、カスタマイズが必要になることがあります。詳細については、支払いリクエストインスタンスを作成するをご覧ください。
Stripe webhook signing secret (Stripe Webhook 署名シークレット): Stripe ダッシュボードから提供される Webhook 署名シークレットを入力します。Stripe は Webhook イベントに署名し、検証を SFCC に渡します。SFCC は、このシークレットを使用してメッセージの内容を検証します。
Stripe Allowed Webhook Statuses (Stripe で許可される Webhook ステータス): Webhook が応答するための許可ステータスを設定します。
Allowed apm methods (使用可能な apm メソッド):
- Stripe API からの使用可能な決済手段の列挙 (
{ "default": [ "p24", "eps", "sepa_debit", "ideal", "sofort", "bitcoin", "alipay", "bancontact", "giropay" ], "en_UK": [ "p24", "eps" ], "de_AT": [ "sofort", "ideal" ] }
)。サイトのロケールごとにこのフィールドを更新して、各ロケールで有効な代替決済手段を示します。詳細については、ソースをご覧ください。
- Stripe API からの使用可能な決済手段の列挙 (
Stripe Enabled (Stripe の有効化): カートリッジを有効または無効にします。
Webhook エンドポイントと Apple Pay ドメインの設定
Stripe ダッシュボードで Stripe-WebHook コントローラの URL を使用して新しいエンドポイントを設定し、次のイベントを登録します。
review.opened
review.closed
charge.succeeded
source.canceled
source.failed
source.chargeable
payment_intent.succeeded
payment_intent.payment_failed
署名シークレットを Stripe Webhook Signing Secret (Stripe Webhook 署名シークレット) 設定にコピーします。この値が Stripe アカウントの国コードに設定されていることを確認してください。
Apple Pay の場合:
RedirectURL.js
を更新します。
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 つにエイリアスを一時的に設定します。エイリアスは次のようにする必要があります。
{ "__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 の値は、無効にされていないロケールである必要があります。
- 決済手段のドメインページで、新しいドメインを追加するをクリックします。
- ドメイン名を入力します。
- 保存して続けるをクリックします。
- ドメインアソシエーションファイルをダウンロードします。
- このファイルを
/.well-known/apple-developer-merchantid-domain-association
でホストします。たとえば、https://example.com
を登録する場合、https://example.com/.well-known/apple-developer-merchantid-domain-association
でこのファイルを入手できるようにします。 - 確認するをクリックします。
ストアフロントのコードを更新する
ベースの 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
エンドポイントの支払い手段の検証を削除します。
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; } // Validate payment instrument const creditCardPaymentMethod = PaymentMgr.getPaymentMethod(PaymentInstrument.METHOD_CREDIT_CARD); const paymentCard = PaymentMgr.getPaymentCard(billingData.paymentInformation.cardType.value); const applicablePaymentCards = creditCardPaymentMethod.getApplicablePaymentCards( req.currentCustomer.raw, req.geolocation.countryCode, null ); if (!applicablePaymentCards.contains(paymentCard)) { // Invalid payment instrument const invalidPaymentMethod = Resource.msg('error.payment.not.valid', 'checkout', null); delete billingData.paymentInformation; res.json({ form: billingForm, fieldErrors: [], serverErrors: [invalidPaymentMethod], error: true }); return; }
注文作成コードを更新します。
// Re-calculate the payments const calculatedPaymentTransactionTotal = COHelpers.calculatePaymentTransaction(currentBasket); if (calculatedPaymentTransactionTotal.error) { res.json({ error: true, errorMessage: Resource.msg('error.technical', 'checkout', null); }); return next(); } 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(); }
発注コードを更新します。
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 order var placeOrderResult = COHelpers.placeOrder(order, fraudDetectionStatus); if(placeOrderResult.error) { stripeCheckoutHelper.refundCharge(order); res.json({ error: true, errorMessage: Resource.msg('error.technical', 'checkout', null) }); const 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
エンドポイントを次のコードに置き換えます。
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
関数に追加します。
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 ダッシュボードからアクセスできます。実装の監視とテストには 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 コンポーネントです。
Payment Element を有効にするには、Business Manager > Merchant Tools (加盟店ツール) > Ordering (注文) > Payment Methods (決済手段) に移動し、ID が STRIPE_PAYMENT_ELEMENT
に設定された決済手段を有効にします。ストアフロントの Checkout (決済) > Payment (支払い) には、Stripe ダッシュボードで有効化されているすべての決済手段が表示されるウィジェットがあります。
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
に設定します。
決済フローで保存された決済手段のリストを表示するには、Business Manager > Payments Methods (決済手段) に移動して、CREDIT_CARD
決済手段を有効にします。STRIPE_PAYMENT_ELEMENT
も有効にすると、保存されたカードが存在する場合はクレジットカードタブにそのカードのリストが表示されます。
Stripe Radar のインサイトの表示
Stripe LINK カートリッジは、Radar のインサイトビューをサポートし、Business Manager の Orders セクション内にリスクインサイトを表示します。Radar はリアルタイムの不正防止を提供しますが、追加の開発に時間をとられることはありません。不正利用対策の専門家は、Radar for Teams を追加することで、保護をカスタマイズし、より詳細なインサイトを得ることができます。
インサイトの表示を有効にするには、Business Manager > Merchant Tools (加盟店ツール) > Custom Preferences (カスタム設定) > Stripe Configs (Stripe 設定) に移動し、Risk Score Data (リスクスコアデータ) を Yes
に設定します。