インタラクティブ Drupal決済導入ガイド

シンプルなフォームから本格的なECサイトまで

1. 導入アプローチの選択

Drupalに決済機能を導入するには、主に2つのアプローチがあります。サイトの要件に合わせて最適な方法を選択することが重要です。

A. シンプルな直接導入アプローチ

「寄付フォーム」や「単一商品の決済」など、特定の目的のために決済機能だけを素早く実装したい場合に最適です。

  • ✓ 軽量・シンプル: サイトに不要な機能を追加せず、構成をシンプルに保てます。
  • ✓ 迅速な実装: WebformとStripeモジュール等を組み合わせ、短時間で実装可能です。

B. Drupal Commerceを利用する本格的なアプローチ

在庫管理、送料計算、クーポン、注文履歴など、多機能なeコマースサイトを構築する場合のベストプラクティスです。

  • ✓ 高機能・体系的: ECサイトに必要な機能が網羅されており、体系的な販売管理が可能です。
  • ✓ 高い拡張性と信頼性: 豊富な連携モジュールがあり、将来的な機能拡張にも柔軟に対応できます。

2. 必要なモジュールのインストール

選択したアプローチに応じて、Composerを利用して必要なモジュールをインストールします。

A. シンプルな直接導入の場合

WebformとStripeを連携させるためのモジュールをインストールします。

composer require drupal/webform drupal/stripe_webform

B. Drupal Commerceを利用する場合

eコマースの基盤となるモジュール群をインストールします。

composer require "drupal/commerce"
composer require "drupal/commerce_stripe"
補足: このガイドの「Stripe設定」「PayPal設定」タブでは、より多くのユースケースに対応できる **B. Drupal Commerceを利用するアプローチ** を前提として手順を解説しています。

Stripe決済の導入・設定手順 (Commerce利用)

このセクションでは、Drupal Commerceと連携してStripeを導入する手順を解説します。各ステップをクリックして詳細を確認してください。

Stripeダッシュボードから「公開可能キー」と「シークレットキー」を取得します。

  1. Stripeダッシュボードにログインします。
  2. 開発者 > APIキー へ移動します。
  3. 以下の2つのキーをコピーします:
    • 公開可能キー (Publishable key): pk_test_...
    • シークレットキー (Secret key): sk_test_...
注意: これらはテスト用のキーです。本番環境では必ず本番用のキーに切り替えてください。

Drupalの管理画面でStripeを決済ゲートウェイとして追加し、APIキーを設定します。

  1. 管理 > Commerce > 設定 > 決済 > 決済ゲートウェイ へ移動します。
  2. [+] 決済ゲートウェイを追加 ボタンをクリックします。
  3. プラグインで Stripe | Credit Card を選択します。
  4. 表示名（例: クレジットカード決済）、モード（テスト）、APIキーを入力して保存します。

Stripeからの通知（支払い成功など）をDrupalサイトが受け取れるように設定します。これにより注文ステータスが自動で更新されます。

  1. Stripeダッシュボードの 開発者 > Webhook へ移動します。
  2. [+] エンドポイントを追加 をクリックします。
  3. エンドポイントURLに、Drupalの決済ゲートウェイ設定画面に表示されているWebhook URLを入力します。
    例: https://あなたのサイトURL/payment/notify/stripe
  4. 作成されたWebhookの「署名シークレット」（whsec_...）をコピーし、DrupalのStripe設定画面に貼り付けて保存します。

PayPal決済の導入・設定手順 (Commerce利用)

世界中で広く利用されているPayPalをDrupal Commerceと連携させる手順を解説します。

PayPal Developer Dashboardから「Client ID」と「Secret」を取得します。

  1. PayPal Developer Dashboardにログインします。
  2. My Apps & Credentials へ移動します。
  3. REST API apps セクションで Create App をクリックし、新しいアプリを作成します。
  4. 作成されたアプリの詳細画面で、以下の情報をコピーします (Sandboxモード):
    • Client ID
    • Secret

Drupalの管理画面でPayPalを決済ゲートウェイとして追加し、API認証情報を設定します。

  1. 管理 > Commerce > 設定 > 決済 > 決済ゲートウェイ へ移動します。
  2. [+] 決済ゲートウェイを追加 ボタンをクリックします。
  3. プラグインで PayPal Checkout を選択します。
  4. 表示名（例: PayPal）、モード（Sandbox）、Client ID、Secretを入力して保存します。
注意: 本番環境ではモードを `Live` に変更し、本番用のAPI認証情報に差し替える必要があります。

UI/UXとデザインに関する考慮事項

決済機能はサイトのコンバージョンに直結する重要な部分です。デザインと使いやすさには細心の注意を払いましょう。

シームレスな体験

Stripe Elementsなどを活用し、ユーザーを外部サイトに遷移させずに決済を完了させることで、離脱率を低減できます。

明確なエラー表示

カード情報の入力ミスや決済失敗時に、何が原因でエラーになっているのかを分かりやすく伝えることが重要です。

レスポンシブデザイン

決済画面は、PC、タブレット、スマートフォンなど、あらゆるデバイスで正しく表示・操作できるように設計致します。

アクセシビリティ

全てのユーザーが利用できるよう、フォームのラベル付けやキーボード操作への対応など、アクセシビリティ基準を満たしましょう。

まとめ：成功のためのキーポイント

Drupalへの決済機能導入を成功させるには、要件に合ったアプローチを選択し、以下の重要なポイントを常に念頭に置くことが大切です。

  • ✓アプローチの選択: シンプルな決済には「直接導入」、本格的なECサイトには「Drupal Commerce」が適しています。
  • ✓堅牢なシステム構築（ベストプラクティス）: 将来的な拡張性や信頼性を重視する場合、Drupal Commerceの利用が最善の方法です。
  • ✓重要設定: どのアプローチでも、APIキーとWebhook（特にStripe）の正確な設定が、決済システムが正しく機能するための鍵となります。
  • ✓テスト: 本番公開前に、テストモード（Sandbox）で十分に動作確認を行い、決済フロー全体を検証してください。
  • ✓品質: ユーザーの信頼を得るために、UI/UXとセキュリティを常に意識した実装を心がけましょう。