WooCommerceのテスト
Stripe側の設定
Stripeのダッシュボードへアクセスします。
「ホーム」画面で、「開発者」スイッチをONにするとテストモードに切り替わります。
StripeとWordPressが通信する時の認証キーが表示されていますので、クリックしてコピーします。
また、テスト環境に切り替わっていることを確認します。
WordPressにログインし、左側のメニューから「WooCommerece」-「設定」をクリックし、「決済」タブを選択します。
下へスクロールすると「Stripe-クレジットカード」がONになっているのを確認し、「管理」ボタンをクリックします。
WordPressでのStripeの管理画面が表示されますので、「設定」タブを選択します。
「Enable test mode(テストモード)」のチェックをONにし、「Edit account keys」ボタンをクリックします。
先ほどStripeダッシュボードでコピーしたキーを貼付け、「接続テスト」ボタンをクリックします。
キーを貼付け、「接続テスト」リンクをクリックすると通信が開始され、成功すると「接続に成功！」と表示されます。
Webhookエンドポイントをコピーします。
「Save test keys」ボタンをクリックして保存します。
Stripeダッシュボードに戻り、「開発者」をクリックします。
支払いフォームの設定
WooCommerceは英語圏で開発されているため、支払い時のフォームが「名、姓」や住所表示など英語圏向けとなっています。
このサイトで販売するものはダウンロード商品で配送の必要がないため、住所などの入力欄を非表示にし、入力項目を最小限にします。
プラグインのインストール
WooCommerceに組み込まれた支払いフォームを直接変更するのは大変ですのでプラグインを使用します。
「Checkout field editor」プラグインをインストールします。
検索欄に「Checkout field editor」と入力し、以下のプラグインを探します。「今すぐインストール」をクリックしてインストールします。
インストールが完了しましたら、「有効化」します。
WordPress左側のメニューから「WooCommerce」-「購入手続きフォーム」を選択します。
入力項目が表示されますので、一番左のアイコンをドラッグし、「姓、名」のように順番を変更します。
ダウンロード商品のため配送関連の項目は不要ですので、不要な項目（住所、電話番号）にチェックを入れ、下にある「無効化」ボタンをクリックします。
入力項目は、「姓、名、メールアドレス」のみにしています。また、「追加フィールド」タブにある「注文メモ」も無効化しています。
変更が完了しましたら「変更を保存」ボタンで保存します。
WordPress左側のメニュー「WooCommerce」-「設定」を選択し「税」タブを選択します。
「行を挿入」ボタンをクリックし、率「10%」の設定を行います。
WordPress左側のメニュー「固定ページ」を選択します。WooCommerceのインストールで追加されている「支払いページ」の「表示」をクリックします。
以下のように
- 請求先情報の詳細は、「姓、名、メールアドレス」のみ
- 注文フォームには、税10％と合計
- クレジットフォームにはStripe
が表示されます。
商品の作成
販売用のAIイラストの圧縮ファイルを作成し、AIイラストを挿入します。
以下の例では、10枚の画像をzipファイルに圧縮しセット商品にしています。
WordPress左側のメニュー「WooCommerce」−「商品」を選択します。「商品を作成」ボタンをクリックします。
商品作成画面です。
- タイトル
- 説明
- 価格
- 「ファイルを追加」ボタンでZipファイルを選択
- 商品画像
- 商品カテゴリ
を設定し「公開」ボタンをクリックします。
WooCommerceプラグインのインストールで追加されている「固定ページ」-「ショップページ」を表示します。
以下のように商品一覧が表示されます。
商品をクリックすると、商品詳細ページを表示します。「買い物カゴに追加」ボタンをクリックするとカートに追加されます。
「買い物カゴを表示」をクリックするとカート内の商品が表示されます。「購入手続きに進む」ボタンで支払いページへ進みます。
決済
「購入手続きに進む」ボタンをクリックすると「支払いページ」へ進みます。
Stripeでのテストは、
- クレジットカード番号「4242 4242 4242 4242」
- 有効期限：未来であれば適当に
- CVS: 3ケタの数字を適当に
で構いません。
「注文する」ボタンをクリックします。
クレジットカードが処理され、売上げ画面になります。
Stripe側にも販売記録が作成されます。
購入者には以下のメールが届きますが、WordPress左側のメニュー「WooCommerce」-「設定」で「メール」タブを選択し、それぞれのメールの文面を編集してください。
管理者にも販売を知らせるメールが届きます。
まとめ
WordPressを使い、E-コマース用のプラグインWooCommerceを設定しました。
- 決済サービス Stripeでのテスト用設定
- WooCommerceプラグインのStripe設定
- 支払い画面での入力フォームの編集
- 商品作成
- 販売テストと決済確認
を行いました。
