必要なもの
-
Shifter アカウント
-
利用するサイト
-
Stripe のアカウント
-
売りたい商品とその情報
-
(オプション) 商品の画像
セットアップ
フェイズ1: Stripe 側の設定
Stripe ダッシュボードにログインをする
https://dashboard.stripe.com/login
![](/wp-content/uploads/2024/03/689477390-45e8d3ebeed7801586bc5406.png)
テスト環境を有効化する
今回はテスト環境でのセットアップなのでこの項目を有効化する
![](/wp-content/uploads/2024/03/689477639-75e4a2fe5621cf5700f8da19.png)
テスト環境が有効化された状態
![](/wp-content/uploads/2024/03/689477945-ac466e3a3fdbcc65f92beb3a.png)
商品の追加
[商品の追加] ボタンをクリックする
![](/wp-content/uploads/2024/03/689478540-e9dedd14117f5e638b71f10e.png)
商品情報を入力・設定する
![](/wp-content/uploads/2024/03/689469370-386e96a462d7652b851cb818.png)
商品情報を保存する
[商品を保存] ボタンをクリックする
![](/wp-content/uploads/2024/03/689480944-4c41acf1772099bf51a9fb2b.png)
商品情報が保存された状態
![](/wp-content/uploads/2024/03/689469294-4733a5e69dcd01ab94cacf89.png)
支払いリンクを作成する
[支払いリンクを作成] をクリックする
![](/wp-content/uploads/2024/03/689469835-7d829766a465134a7928e13d.png)
タイプの選択、オプションの設定、プレビュー
支払い画面のプレビューが右カラムに表示されるので、これを各にしながら調整をする。
![](/wp-content/uploads/2024/03/689470168-df61930633993f42bbabbc3a.png)
設定内容が決定したら [リンクを作成] ボタンをクリックする
![](/wp-content/uploads/2024/03/689470610-f079be58bb70e30c409de1f2.png)
[コピー] ボタンをクリックする
発行された決済用の URL をコピーする
![](/wp-content/uploads/2024/03/689471259-a0233b74760574cf014dab99.png)
フェイズ2: Shifter 側の設定
Shifterダッシュボードにログインをする
WordPress を起動する
![](/wp-content/uploads/2024/03/689485821-2135cc32c3a754e7ea101ea0.png)
WordPress のダッシュボードにアクセスをする
![](/wp-content/uploads/2024/03/689497694-9e2ba8b9844038e6b75033cd.png)
固定ページを作成する
[固定ページ] → [新規追加] をクリックする
![](/wp-content/uploads/2024/03/689498538-e773ae15b3e88fcb54e70e6c.png)
タイトル、コンテンツを入力する
![](/wp-content/uploads/2024/03/689502339-03afb338a34f015cc9e12896.png)
購入ボタン設置する
購入ボタンを追加する
![](/wp-content/uploads/2024/03/689502542-7fa415cc0ac138048b41ae80.png)
コピーした Stripe Payment Link の URL をペーストする
![](/wp-content/uploads/2024/03/689515332-3b0881b8844313599f0623aa.png)
Stripe Payment Link の URL をボタンに設定した状態
![](/wp-content/uploads/2024/03/689515675-d9417c194e2c143a8d2fe332.png)
固定ページを公開する
![](/wp-content/uploads/2024/03/689516046-f7b6cf676971431a0e1276f1.png)
静的化の前に表示と動作をチェック
![](/wp-content/uploads/2024/03/689516290-c0e891021a2b50cb5af83d7b.png)
フェイズ3: デプロイの作成と公開
Shifter ダッシュボードの [デプロイする] ボタンをクリックする
![](/wp-content/uploads/2024/03/689516904-b8c7c94fc1299b678073a840.png)
WordPress の停止し、ビルドが完了するのを待つ
![](/wp-content/uploads/2024/03/689517280-bafe580f7df5af7a0b8f7315.png)
デプロイのステータスが [Published/公開済み または 公開中] になっているかを確認する
[Ready/準備中] となっている場合は、[Publish/公開] ボタンをクリックして公開処理をする
![](/wp-content/uploads/2024/03/689517924-ff797c5fc7b2cce6d14c648b.png)
URL をクリックし、サイトにアクセスする
![](/wp-content/uploads/2024/03/689517631-2879e4392c5053755720b273.png)
フェイズ4: Stripe Payment Link と購入ボタンの動作テスト
サイトのURL → 商品ページへのアクセスをする。
![](/wp-content/uploads/2024/03/689518667-d99bb4f05d06ef720307304c.png)
[購入する] ボタンをクリックして決済画面へ遷移するかを確認する
必要な情報 (※) を入力し、テスト決済をする。
※ テストモードなのでテスト・デバッグ用のクレジットカード番号でよい。
![](/wp-content/uploads/2024/03/689471602-8156b533ad286db3047bec55.png)
決済完了の画面
![](/wp-content/uploads/2024/03/689519756-8a5c1848fcada8caae914438.png)
Stripe ダッシュボードの売り上げが記録されているかを確認する
![](/wp-content/uploads/2024/03/689472016-3999a42844a6396c4e2b3aff.png)
本番環境ヘの移行
本ドキュメントはテスト環境で実施したものです。
[本番環境にコピー] ボタンをクリックしてデータをコピーする
本番環境にも同じ商品を複製する場合。
![](/wp-content/uploads/2024/03/689524958-7569f7cb3c8095d2caf32c96.png)
本番環境から改めて Stripe Payment Link を作成する
![](/wp-content/uploads/2024/03/689524769-1073041daa19b025c348fac5.png)
Shifter ダッシュボードからWordPress を起動する
テストの URL と 発行した本番 Stripe Payment Link の URL を差し替える
![](/wp-content/uploads/2024/03/689527304-b1fb9a89cf6726e829d4696e.png)
固定ページを更新する
![](/wp-content/uploads/2024/03/689527473-7c514855326eba5a57793768.png)
Shifter ダッシュボードの画面に戻り、デプロイを作成・公開をする
![](/wp-content/uploads/2024/03/689516904-b8c7c94fc1299b678073a840.png)
実際の商品の取引をする際には、特定商取引法に基づく表記が必要です。
事前に固定ページなどで作成・公開しておきましょう。