【Shopify マスターへの道】#18 決済テストを行おう

ストア構築の準備をしよう
商品を登録しよう
コレクションを登録しよう
ブログ記事を作成しよう
サイトのデザインを選ぼう
テーマを編集しよう（セクション編）
テーマを編集しよう（テーマ設定編）
トップページ以外を編集しよう
サイトのフォントを編集しよう
アカウントページを作成しよう
コンタクトフォームを作成しよう
About ページを作成しよう
規約を入力しよう
メニューの編集をしよう
送料を設定しよう
一般設定を編集しよう
各種設定を編集しよう
決済テストを行おう（← 今回はここ）
ストアの所有権を移行しよう

今回は決済テストを行います。EC ストアを構成する際に、決済トラブルが起きると非常にまずいので、しっかりと決済テストを行なっておきましょう！

今回の目標

決済テストの方法を理解する
Bogus Gateway で決済テストを行う
Shopify ペイメントで決済テストを行う方法を知る

デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。

【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード

Shopify の決済テスト

Shopify で決済テストを行う方法は、2 種類あります。

Shopify の Bogus Gateway を使用する方法
Shopify ペイメント（または外部決済サービス）のテストモードを使用する方法

今回は、Gogus Gateway を使用して決済テストを行います。

では、いきましょう！

Bogus Gateway を有効にする

まず決済テストを行う準備として Bogus Gateway を有効化します。

ストアの管理画面にログインし「設定 > 決済」へ進みます。

「決済」の設定から、ストアに Shopify ペイメントなどを決済を導入することができます。Shopify ペイメントの導入方法については、この記事の最後の方で少し触れますので、まずは Bogus Gateway を有効化していきます。

「外部サービス > 外部プロバイダーサービスを選択する」をクリックします。

Shopify で使用可能な外部決済サービスの一覧が表示されます。1 番上に「(for testing) Bogus Gateway」がありますのでクリックします。

すると、(for testing) Bogus Gateway を有効化するかどうかを設定する画面になります。「(for testing) Bogus Gateway の詳細情報」には、Bogus Gateway の使い方が簡単に書いてあります。

「利用中の決済サービス > Bogus (テスト用)」にチェックがついていることを確認して「(for testing) Bogus Gateway を有効化する」をクリックし、有効化しましょう。

有効化が完了すると次のような画面になります。複数通貨に対応したストアを作成し、それぞれの通貨で決済テストを行いたい場合は、「複数の通貨で販売する > 通貨を追加する」をクリックし、追加したい通貨を選択します。今回は通貨の追加はしません。

これで、テスト決済を行う準備が整いました。

Bogus Gateway で決済を行う

それではストアのプレビューを開き、実際に決済テストを行いましょう。

管理画面からサイトのプレビューを開きます。

プレビューに入ったら、どの商品でもいいので商品をカートに入れ、チェックアウト画面まで進みます。（今すぐ購入でも OK）

チェックアウト画面で購入者の情報を適当に入力し、「配送方法の選択へ進む」で次へ進み、続けて「お支払いへ進む」をクリックします。

ここから Bogus Gateway の設定を用いて決済を行なっていきます。クレジットカードの入力欄に以下のように設定します。

カード番号：1
カード名義人：Bogus Gateway
有効期限：将来の日付
セキュリティコード：3 桁の任意の数字

カード番号を「1」にすることで成功した取引のシミュレーションを行うことができます。もし失敗した取引のシミュレーションを行いたければ「2」、例外のシミュレーションを実行するには「3」を入力してください。（一度ご自身でやってみることをおすすめします。）

今回は成功した場合の挙動を確認したいので、「1」と入力しましょう。全て入力したら「今すぐお支払い」をクリックし、テスト決済を行います。

テスト決済が成功すると以下の画像のような画面になります。

注文管理でテスト注文を確認する

Bogus Gateway によるテスト決済が成功したら、ストア管理画面にテスト注文が反映されているか確認します。

再び管理画面へ戻り、「注文管理」を開きます。テスト決済で注文した商品が表示されてれば OK です。

テスト注文を発送済みにする

ここで注文から発送までの流れについて少し説明しておきます。

テスト注文で注文された商品は、「フルフィルメント」が「未発送」になっています。商品を発送したら、注文のフルフィルメントを「発送済み」変更する必要があります。

発送するために必要な顧客の氏名や住所などは、注文をクリックすることで確認することができます。

注文をクリックしてみましょう。クリックすると、以下のような画面に切り替わります。

まず、お支払い済みかどうかを確認します。「支払い済」となっていれば、ストアに売り上げが計上されているということになります。

例えば、手動決済を導入していて銀行振込を確認してから商品を発送するという場合は、ここが「保留中」と表示されます。この場合「支払いを回収する > 支払い済みとしてマークする」をクリックすることでステータスを「支払い済」とすることができます。

支払いのステータスが「支払い済」であれば商品を発送しましょう。

画面右側に表示されている「顧客」の部分で顧客の名前や連絡先情報を確認することができます。この顧客情報宛に注文された商品を発送すれば OK です。

商品の発送が完了したら、「未発送」となっているフルフィルメントステータスを「発送済」にします。「発送済としてマークする」をクリックします。

次の画面ではいくつか設定することができます。

まず「アイテム」の部分では、商品をいくつ発送したかを設定することができます。この機能を使えば、商品を一部だけ発送したりすることができます。
「追跡情報（オプション）」では、商品の追跡番号と配送業者を入力することができます。入力すると顧客に送られる発送完了メールにこの情報が記載されます。（この情報は後から追加することもできます。）
「お客様に発送を通知する」の設定では、顧客に商品の発送完了メールを送信するかを選択することができます。

発送に関して間違いがなければ「アイテムを発送する」をクリックして、商品を「発送済」にします。