WP Simple Payブログ

WordPressで支払いを受け付けるためのStripeチュートリアル、ヒント、リソース

支払いフォームの種類:埋め込み、オーバーレイ、Stripe Checkout

最終更新日

Written By: 著者画像 Natalie Jones

さまざまな支払いフォームの種類について、もっと知りたいと思いませんでしたか?

支払いフォームは、eコマースサイトの最も重要な要素の1つです。訪問者が顧客に変わる直前の最後の接点となります。適切に設計された支払いフォームは、スムーズなチェックアウト体験を提供し、最終的にコンバージョン率を高めますが、不適切に設計された支払いフォームは、訪問者を混乱させ、高いチェックアウト放棄率につながります。

WordPressサイトに支払いフォームを表示する場合、いくつかの選択肢があります。

  • 埋め込みフォーム:サイト上のページに直接表示されるフォーム。
  • オーバーレイモーダル:サイト上のポップアップオーバーレイとして表示されるフォーム。
  • ホスト型支払いページ:ホストされたチェックアウトページに表示される、サイト外のフォーム。

この記事では、各フォームタイプの利点と欠点について説明し、サイトに最適なものを選択するのに役立ちます。

支払いフォームの表示オプション

サイトで支払いを受け付けるためにWordPress向けのStripe決済プラグインの#1であるWP Simple Payを使用している場合、支払いフォームビルダーの一般設定タブでお好みのフォームタイプを選択できます。

オンサイト支払いフォームサイト外Stripe Checkoutフォームを選択するか、オーバーレイモーダルで開くのチェックボックスをオンにすることができます。

これらの設定は各フォームに適用されることに注意してください。サイト上に表示が異なる複数の支払いフォームを持つことができます。WP Simple Payを使用すると、フォームビルダーで個々の支払いフォームのフォームタイプを簡単に調整できます。

埋め込み支払いフォーム

埋め込みフォームは、Webページの一部です。すべてのフィールドがページ自体に表示されます。常に表示されているため、ユーザーはフォームを表示するために何かをクリックしたり、フォームに移動したりする必要がありません。

例はこちらです:

支払いフォームは、ページの好きな場所に埋め込むことができます。ページのコピーの横に配置したり、魅力的な画像のの上に置いたり、サイドバーにドロップしたりすることができます。

埋め込みフォームの利点

  • ユーザーはページ上に直接表示されるため、すばやく見つけることができます。
  • ユーザーはアクセスするために追加の手順を踏む必要がありません。
  • お好みに合わせてスタイルを設定したり、並べ替えたりできます。
  • WP Simple Payでは、Stripe Payment Elementを使用して、リアルタイム検証を提供し、安全に支払い情報を収集します。

埋め込みフォームの欠点

  • 他の要素に使用したいページ上のスペースを占有します。
  • すぐに読み込まれるため、ページの読み込み時間が遅くなる可能性があります。
  • ページ上で多くの要素が表示されている場合、見逃される可能性があります。
  • ユーザーが気を散らしてしまい、フォームを使用する前に離脱する可能性があります。

オーバーレイ支払いフォーム

オーバーレイ支払いフォームは、ユーザーがサイト上のページの「今すぐ購入」または「今すぐチェックアウト」などのコールトゥアクションボタンをクリックしたときに表示されます。

フォームがアクティブになると、フォームを閉じるまで、ページ上の他のすべての要素にアクセスできなくなります。

ページ全体が暗くなり、支払いフォームに集中できるようになります。

オーバーレイフォームの利点

  • 前面に表示されるため、見逃すことはありません。ページの残りの部分は暗くなり、利用不可であることを示します。
  • お好みに合わせてスタイルを設定したり、並べ替えたりできます。
  • WP Simple Payでは、Stripe Payment Elementを使用してリアルタイム検証を提供し、安全に支払い情報を収集します。

オーバーレイフォームの欠点

  • ポップアップ自体を好まないユーザーは、すぐに閉じてしまいます。
  • オーバーレイを表示するには、ユーザーがボタンをクリックする必要があります。
  • 支払いボタンが十分に目立たない場合、ユーザーが気づかない可能性があります。
  • ユーザーがチェックアウトプロセスを放棄する可能性のある追加のステップが作成されます。

Stripe Checkout 支払いフォーム

Stripe Checkoutは、StripeのCheckoutサービスがホストするページです。ユーザーはStripeのドメイン上の新しいページに移動します。注文情報は左側に表示され、右側には通常の支払いフォームが表示されます。

ライブデモはこちらで確認できます。Stripe Checkoutページは、このページで見られる以上のカスタマイズはできません。これはStripeによって制御されているためです。より高度なカスタマイズが必要な場合は、埋め込みフォームまたはオーバーレイフォームを選択する必要があります。

支払いフォーム

このフォームをカスタマイズするには、WP Simple PayのStripe Checkoutタブに移動するだけで簡単に実行できます。ここで、Stripeホストのチェックアウトページで利用可能なすべてのオプションを設定できます。

Stripe Checkoutの背景色と支払いボタンの色を変更したい場合は、Stripeダッシュボードのブランディングセクションで色を変更する必要があります。Stripe Checkoutタブから、ブランディング設定リンクをクリックするだけで、このページに簡単にアクセスできます。

Stripe Checkout支払いフォームにカスタムフィールドを追加したいですか?ステップバイステップガイドをご覧ください。

Stripe Checkoutの利点

  • 多くの人がStripeを信頼しており、Stripeロゴが表示されるとコンバージョンが向上します。
  • Stripeのページはクリーンでシンプルです。ユーザーの購入を妨げるものは何もありません。
  • ユーザーは購入完了後にあなたのサイトにリダイレクトされます。
  • Apple PayとGoogle Payはデフォルトで有効になっているため、ユーザーは好みの支払い方法で支払うことができます。

Stripe Checkoutの欠点

  • ユーザーは新しいページに移動するため、混乱する可能性があります。
  • 支払いボタンが十分に目立たない場合、ユーザーが気づかない可能性があります。

どの支払いフォームタイプが最適ですか?

3つの異なる支払いフォーム表示オプションを理解した上で、あなたのサイトに最適なものを決定する必要があります。

機能的には、埋め込みフォームとオーバーレイフォームに違いはありません。オーバーレイフォームは、ユーザーがボタンをクリックしたときにのみ表示される要素に埋め込まれているだけです。同じフォームですが、場所が異なります。

Stripe Checkoutは別のページに表示されるため、少し異なります。しかし、最終的にはすべて同じことを行います。顧客から資金を受け取り、あなたのアカウントに入金します。

したがって、支払いフォームの表示オプションを選択する際には、2つの要因を考慮する必要があります。

1. あなたのサイトのデザイン

どのタイプのフォームがあなたのサイトで最も見栄えが良いですか?フォームをランディングページに埋め込むスペースはありますか、それともページが散らかってしまいますか?スペースのない既存のランディングページに支払いフォームを追加する場合、通常はオーバーレイを追加する方がすっきりします。

支払いフォームは、ページのコンテンツ領域や投稿だけでなく、サイトのあらゆる場所に配置できることを覚えておいてください。フッター、サイドバー、ヘッダーに含めることもできます。

たとえば、多くの非営利団体や慈善団体は、ヘッダーに寄付ボタンを追加し、訪問者がどのページからでも寄付できるようにしています。

2. コンバージョン最適化

次に、どのタイプのフォームが最も多くのコンバージョンを促進するかを検討します。顧客が最も関与しやすいフォームのタイプはどれか自問してください。顧客調査を行う必要があるかもしれません。

正直に言うと、どのタイプのフォームがコンバージョンを最大化するかを判断する最善の方法は、それらを互いにテストすることです。A/Bテストプラグインをインストールして、ランディングページのバージョンをトラフィックの半分に表示し、別のバージョンをもう半分に表示できます。各ページには、異なる支払いフォームの表示タイプが必要です。トラフィックが多い場合は、3つのバージョンすべてを同時にテストできます。その後、30〜60日後に結果を確認してください。

最終的な考え

サイトで使用できる3つの異なる支払いフォームのタイプを理解したので、あなたのビジネスと顧客に適したものを選択してください。

この決定を慎重に検討してください。単なるフォームかもしれませんが、顧客との関係における重要なポイントを表しています。

この記事が気に入った場合は、売上を伸ばすために商品ページを最適化する方法WordPressで完璧な支払いフォームを作成する方法に関するガイドもチェックしてみてください。

何を待っていますか? 今すぐ WP Simple Pay を始めましょう!

このような記事をもっと読むには、 X でフォローしてください。

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

今日から決済を受け付けましょう

WordPressウェブサイトで、単発および定期的な支払いまたは寄付の受け付けを開始しましょう。