WordPressのフォームから顧客からの支払いを受け取りたいですか？WPFormsはStripeとシームレスに統合され、ユーザーがフォームからライブ支払いを受け取ることができます。
このガイドでは、WPForms LiteとStripeを接続してオンライン決済を利用する方法を説明します。
この記事で
必要条件
- Liteユーザー向けのStripeペイメントにアクセスするには、WPFormsのバージョン1.8.2以降が必要です。
- Stripeでは、ライブ決済フォームを追加するページでSSL（HTTPS）を有効にする必要があります。設定の詳細については、WPBeginner's guide toadd SSL and HTTPS in WordPressをご覧ください。
WPForms Liteのインストール
始める前に、WordPressサイトにWPForms Liteプラグインをインストールして有効化する必要があります。WPForms LiteはWordPressのプラグインディレクトリからインストールできます。
WordPressプラグインのインストールに不慣れな方は、 WPBeginnerのガイドをご覧ください。
Stripeアカウントの接続
注：WPForms LiteでStripeを使用している場合、Stripeの手数料と一緒にすべてのトランザクションに3％の手数料がかかります。3%の手数料を削除するには、WPForms Proライセンス以上にアップグレードする必要があります。
WPForms Liteを有効化した後は、Stripeアカウントと接続して支払いを開始する必要があります。幸い、このプロセスは非常に簡単で、複雑な設定は必要ありません。
アカウントに接続するには、WPForms " Settingsに移動し、Paymentsタブを選択します。
必要であれば、デフォルトの通貨をあなたのサイトで使用する通貨に合わせることができます。
次に、Stripeセクションまでスクロールし、Connect with Stripeをクリックしてアカウントをリンクします。
注：現在テストモードを使用している場合は、フォームを立ち上げる準備ができたら、必ずテストモードのチェックを外してこの接続プロセスを繰り返してください。
Stripe Connectウィザードにリダイレクトされます。ここで、Stripeアカウントを認証する必要があります。ここで表示される正確な内容は、アカウントが接続されているかどうかによって異なります。
続行するには、メールアドレスを入力し、Stripeアカウントにログインする必要があります。その後、フォームに必要事項を入力し、アカウントを接続してください。
Stripe Connectウィザードの手順に従うと、サイトの管理エリアにリダイレクトされます。接続ステータスの横に緑色のチェックマークが表示されているはずです。
Stripe Webhooksの設定
StripeはWebhookを使用して、Stripeアカウントで発生したイベントを外部ソースから同期します。
WPFormsでStripe webhooksを設定すると、WordPressの管理エリアで支払いフォームからの更新をリアルタイムで確認できます。
WPFormsのPayments Overviewページから定期購入の管理と払い戻し処理を行うことができます。
WebhookはStripeアカウントに接続すると自動的にWPFormsバージョン1.8.4以上に設定されます。ただし、アカウントによっては自動設定が機能しない場合があります。
その場合は、お客様のアカウントに手動で設定してください。詳しくは、Stripeウェブフックの設定ガイドをご覧ください。
フォームビルダーで Stripe 決済を有効にする
まず、新規フォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。
フォームビルダーでは、お好きなようにフォームをカスタマイズすることができます。以下のフィールドを必ず入力してください：
- 電子メール欄
- 支払い項目フィールド（単一項目、複数項目、チェックボックス項目、またはドロップダウン項目）
- Stripeクレジットカードフィールド
この例では、名前、Eメール、複数のアイテム、Stripeクレジットカードフィールドを含む請求フォームを作成します。
注：Stripeクレジットカードフィールドは、チェックアウトを簡素化するためにStripeの支払い要素オプションを使用します。このオプションはApple PayとGoogle Payにも対応しています。ただし、Stripeの要件を満たす場合にのみ利用可能です。要件についてはStripeのドキュメントをご覧ください。
フォームに使用するフィールドを追加した後、Payments " StripeにアクセスしてStripeの設定ページにアクセスします。次にワンタイムペイメントを有効にするオプションをオンに切り替えます。
注意：Stripeを正しく機能させるために、AJAXフォーム送信を有効にしてください。
このフォームでStripe決済を有効にすると、追加のオプションが表示されます。これらの項目は任意ですが、取引を簡単に管理するのに役立ちますので、入力することをお勧めします。
まず、「お支払いの説明」に、このお支払いの内容を説明する短いテキストを入力します。このテキストは利用者のカード利用明細に表示され、支払いを識別するのに役立ちます。
次に、Stripe Payment Receiptの下にあるEmailフィールドをフォームから選択します。これは、Stripeが支払い領収書を送信するメールアドレスです。
最後に、顧客のEメールアドレスを含むEメールフィールドをフォームから選択します。
1回限りの支払いを受け付けるフォームであれば、変更を保存して支払いフォームのテストに進むことができます。ただし、定期的な支払いを受け付ける必要がある場合は、追加の設定を行う必要があります。
定期的な支払いを可能にする
サブスクリプションベースのサービスを運営している場合、サブスクリプション決済を有効にすることで、ユーザーに定期的に課金することができます。
Recurring Payments オプションで、Enable recurring subscription paymentsオプションをオンに切り替えます。
有効にした後、表示される追加フィールドに入力する必要があります。
まず、プラン名フィールドにサブスクリプションのタイトルを入力します。この名前は、Stripeアカウントのこのフォームのトランザクションページに表示されます。
その後、「定期的なお支払い」ドロップダウンから、定期的なお支払いの頻度を選択します。利用可能なオプションは、毎日、毎週、毎月、四半期、半年ごと、または毎年です。
最後に、フォームからEmailフィールドを選択し、Customer Emailフィールドと一致させる必要があります。Stripeでは、指定されたメールアドレスのユーザーの定期的な支払いを有効にするために、このフィールドが必要です。
注意: WPForms LiteはStripe決済の条件付きロジックをサポートしていません。支払いフォームの条件付きロジックを有効にするには、Proライセンス以上にアップグレードし、Stripe Proアドオンをインストールする必要があります。
追加の購読プランを作成する場合は、[新しいプランを追加]ボタンをクリックします。
表示されたオーバーレイで、プランの名前を入力し、OKをクリックして続行します。
その後、作成した新しいプランまでスクロールし、最初のプランと同じようにオプションを設定します。
注：支払いフォームに必要な購読プランをいくつでも追加できます。
作成した追加プランを削除したい場合は、プラン名の横にあるゴミ箱アイコンをクリックします。
支払い設定が完了したら、必ずフォームを保存して設定を更新してください。
Stripeペイメントのテスト
WordPressのフォームにStripeを設定した後、フォームを立ち上げる前にテスト支払いを送信し、すべてが期待通りに動作することを確認する必要があります。
Stripeペイメントのテストガイドをご覧ください。
支払いエントリーの表示
フォームを立ち上げ、フォームから支払いを受けると、サイトの管理エリアから支払いを追跡できるようになります。
これを行うには、WPForms " PaymentsにアクセスしてPayments overviewページにアクセスします。ここでは、フォームを通して受け取ったすべての支払いについての詳細を見ることができます。
顧客Eメールまたは支払いカードの下4桁でエントリをフィルタリングできます。詳細については、フォーム決済の表示と管理に関するガイドをご覧ください。
よくある質問
以下はWPForms LiteでStripeを利用する際によくある質問です。
WPFormsの支払いプロセスからStripe Linkを削除するには？
Stripe LinkはStripeが提供する機能で、お客様のお支払い情報と配送先情報を自動的に保存・入力し、チェックアウトプロセスを簡素化します。ただし、この機能を無効にし、お客様がお取引ごとに情報を手動で入力するようにしたい場合は、Stripeダッシュボードの設定から行うことができます。
お客様の設定に合わせてStripe Linkをオフにする方法については、Stripeのリンク無効化に関するドキュメントをご参照ください。
以上です！これでStripeとWPForms Liteを統合し、ユーザーからのオンライン支払いを受け付ける方法がわかりました。
次に、支払い項目フィールドを視覚的にアピールするためにアイコンを使用したいですか？WPFormsでアイコンを選択する方法についてはチュートリアルをご覧ください。