最初の支払いフォームの作成方法
このドキュメントについて
WP Simple Pay をインストールし、(Pro版を購入した場合) ライセンスを有効化し、Stripeアカウントを接続したら、最初の支払いフォームを作成する準備ができました。
WordPress管理画面にログインし、WP Simple Pay → 新規追加 に移動します。これにより、支払いフォームのテンプレートエクスプローラーが起動します。この例では、支払いフォームテンプレートを使用します。

「テンプレートを使用」をクリックすると、支払いフォームエディターが支払いテンプレートのデフォルト設定で開きます。

一般設定のカスタマイズ
一般タブでは、支払いフォームのタイトル、説明、タイプ、および支払い確認の設定を変更できます。
選択した支払いフォームテンプレートは、オンサイト埋め込み支払いフォームを作成し、ユーザーをグローバル確認ページにリダイレクトします。
支払いオプションのカスタマイズ
支払いタブを選択して、利用可能な価格オプションと、支払いフォームがどのように支払いを受け付けるかを調整します。
収集する金額または通貨を調整してください。

この例では、1回払い $15.00 を使用します。複数の価格オプションを提供したい場合は、「価格を追加」をクリックして追加の価格を追加します。複数の価格オプションが提供される場合、価格セレクターが出力される際に表示されるカスタムラベルをオプションで設定できます。

次に、支払いを受け付けるために使用したい支払い方法を有効にします。最初のフォームを簡単にするために、「カード」支払い方法を使用します。

フォームフィールドのカスタマイズ
次に、フォームフィールドタブを選択します。ここでは、追加のデータ収集を容易にするためのカスタムフィールドを追加したり、購入に関する追加情報を出力したりできます。
「支払いフォーム」支払いテンプレートを選択したとき、これらの4つのフィールドが自動的にフォームに追加されました。
- メールアドレス
- 価格セレクター
- 支払い方法
- チェックアウトボタン
顧客の名前を収集するためのフィールドをもう1つ追加しましょう。フィールドを選択をクリックして名前を選択し、次にフィールドを追加をクリックしてフォームに追加します。

カスタムフィールドの左側にあるドラッグハンドルを使用して、「名前」フィールドを他のカスタムフィールドの上に移動します。さらに、ラベル設定をフルネームに設定し、フィールドを必須にマークすることができます。

カスタムフィールドに関する詳細については、「カスタムフォームフィールド」のドキュメントをご確認ください。。
高度なフォーム機能

初めての支払いフォームのため、以下に記載する高度なフォーム機能については説明しません。準備ができたら、以下のリンクをたどってこれらの機能について詳しく学んでください。
支払いフォームをページに追加する
この時点で支払いフォームをプレビューすると、以下のフォームと同様の外観になるはずです。もちろん、以前にフォームのタイトルと説明を変更した場合は、それらが反映されます。

支払いフォームの外観に満足したら、ページに追加できるように公開されていることを確認してください。
既存のページを編集しているとき、または新しいページを作成した後、新しいブロックを挿入し、「WP Simple Pay」ブロックを検索して選択し、追加してください。

ブロックが挿入されたら、ドロップダウンからページに追加したい支払いフォームを選択します。

支払いフォームを選択すると、フォームの視覚的な表現が表示されます。その後、必要に応じてページの編集を続けることができます。
クラシックエディターまたはブロック非対応テーマでフォームを追加する
「クラシックエディター」を使用して支払いフォームを追加したい場合、またはブロックの使用をサポートしていないテーマを使用している場合は、支払いフォームリストからショートコードをコピーして、任意のページにショートコードを埋め込むことができます。

テスト支払いの実行
特に無効にしない限り、まだテストモードになっているはずです。テストモードの使用について詳しくはこちらをご覧ください。
これで、フォームを表示してテスト支払いを実行する準備が整いました。テストモードでは、Stripeが提供するテストカード番号を使用できます。
支払いフォームを送信すると、Stripeがテスト支払いを処理し、デフォルトの支払い確認ページが表示されます。支払い確認表示のカスタマイズについて詳しくはこちらをご覧ください。
フォームのテスト結果に満足したら、フォームを公開して、実際の支払いを処理できるようにすることができます。
ご不明な点はまだありますか?喜んでお手伝いさせていただきます!
最終更新日: