Ever wish you could seamlessly accept payments on your landing page?
Adding a payment gateway can really increase sales because it makes buying easier. You won’t have to send people to a separate checkout page where they might change their minds.
In this guide, I’ll share two ways to create a high-converting payment landing page in WordPress. I’ll cover everything from choosing the right tools to optimizing your payment gateway page for conversions.
How to Make a Landing Page with Payment Gateway:
Why Accept Payments on Your Landing Page?
Adding a payment system right on your landing page makes buying easier. People can pay instantly instead of being sent to a separate checkout page. This helps stop them from changing their minds before they buy, and can lead to more sales.
Letting people pay with different methods (like credit cards, PayPal, etc.) can boost sales even more. Ottu found that businesses offering multiple payment choices sometimes see up to a 30% increase in sales
What You Need to Set Up a Payment Landing Page
For accepting payments on your page, you’ll need a few things:
- A Payment Processor: Think of services like Stripe, PayPal, or Square as secure payment processors. They handle all the technical details of accepting different payment methods (like credit cards).
- SSL Certificate: This is like a digital lock for your page. It scrambles any information customers share while being sent so it can’t be stolen.
- PCI Compliance: This means following a set of rules to protect customer credit card information. It sounds complicated, but your payment service will help you figure out what you need to do.
How to Make a Landing Page with Payment Gateway
So, how do you build a payment gateway landing page? Follow the 2 methods below to learn how.
Method 1. Use a Page Builder to Create a Payment Landing Page
まず、ランディングページを作成し、SeedProdで決済統合を追加する方法を紹介します。
SeedProd is one of the best website and landing page builders for WordPress. It lets you create any part of your web design without writing code.
You can use SeedProd to build landing pages like:
- High-converting sales pages
- チェックアウトページや商品ページなど、WooCommerceのウェブサイトを完成させます。
- Custom headers, footers, sidebars, and templates
You can even make a full website design with its theme builder.
カスタマイズ可能なテンプレート、WordPressブロック、セクションを使えば、サイトに機能を追加するのも簡単です。
例えば、ソーシャルメディアのフォローボタンやシェアボタンを埋め込むことで、ブランドの認知度を高め、フォロワーを増やすことができます。また、オプトインフォーム、カウントダウンタイマー、コールトゥアクションボタンなどのリード生成要素を使用して、リストを増やし、売上を伸ばすこともできます。
One of the elements we’ll use in this method is SeedProd’s Payment Button block, which has payment gateway integration. It lets you start accepting online payments using the Stripe payment processor. It’s quick and easy to set up and requires zero coding.
So follow the steps below to create a payment gateway landing page with Stripe.
Step 1. Install and Activate SeedProd Landing Page Builder
最初のステップは、SeedProdの価格ページでプランを選択することです。このガイドでは、高度な機能を持つSeedProd Proを使用しますが、SeedProdの無制限無料トライアルを含め、どのプランでもStripe Payment Buttonを使用できます。
プランを選択した後、SeedProdアカウントにログインし、プラグインファイルをダウンロードしてください。プレミアムバージョンを使用している場合は、同じページでライセンスキーをコピーすることもできます。
WordPressのウェブサイトに行き、SeedProdプラグインをアップロードしてください。ヘルプが必要な場合は、WordPressプラグインのインストールと有効化に関するこちらのガイドに従ってください。
それが完了したら、SeedProd " Settingsページに移動し、ライセンスキーを貼り付けます。
次に、Verify Keyボタンをクリックして、ライセンス設定を保存します。
ステップ2.ランディングページのテンプレートを選ぶ
The next step is to choose a template design for your page. To do that, you can go to SeedProd » Landing Pages and click on the Add New Landing Page button.
次の画面では、プロがデザインしたランディングページのテンプレートライブラリが表示されます。
You can click any of the filters at the top to narrow down your search. For example, clicking the Sales filter will only show the sales page designs.
気に入ったデザインが見つかったら、チェックマークのアイコンをクリックします。
その後、ページ名とURLを入力するポップアップが開きます。後で編集方法を説明しますので、いい名前が思い付かなくても心配しないでください。
保存してページの編集を開始する」ボタンをクリックしてください。
ステップ3.支払いボタンブロックを追加する
次の画面では、下の例のようなレイアウトが表示されます：
左側には、ランディングページのデザインに追加できるWordPressのブロックとセクションがあります。そして右側にはライブプレビューがあり、リアルタイムで変更をプレビューすることができます。
You can customize any part of your page by clicking anywhere on the live preview. For example, clicking the headline lets you type directly on the design to change the content.
また、左側に設定パネルが開き、フォント、色、スペーシング、HTMLなどをカスタマイズするための高度な設定にアクセスできます。
この例のように、セクションを編集して背景画像を簡単に変更することもできます。要素をクリックするだけで、思い通りにカスタマイズできます。
“A cluttered landing page design can easily distract users away.
To avoid this, make sure that you keep your landing page layout clean and simple. Using lots of empty space, color contrast, and large fonts can help you easily achieve that simplicity.” – How to Increase Your Landing Page Conversions by 300%.
Syed Balkhi, Founder and CEO of WPBeginner.
Adding an online payment gateway to your page is just as easy. Simply search for the Payment Button block and drag it onto your page.
その後、ブロック設定が開き、StripeアカウントとリンクするためにStripeと接続するボタンをクリックします。
自動的にStripeのログイン画面が表示され、認証コードを入力できますが、接続が完了すると、そのままランディングページのデザインに戻ります。
Stripeの接続を承認したら、支払いボタンの設定をカスタマイズできます。
例えば、以下の設定を編集することができる：
- 支払額
- 支払い内容
- 支払通貨
- 成功URL
サクセスURLは、買い物客が購入を完了した後にリダイレクトさせたいページです。例えば、SeedProdでサンキューページを作成し、チェックアウトに成功した顧客をそのページにリダイレクトすることができます。
In addition to the above settings, you can customize the button text, sub-text, alignment for mobile and desktop, and button size, and even add Font Awesome icons.
より多くのカスタマイズオプションが必要ですか？詳細設定]タブをクリックするだけで、ボタンのスタイル、色、フォント、間隔、余白の設定などを見つけることができます。
With payments set up, you can continue customizing your page until you’re happy with how the design looks.
変更を保存するには、右上の「保存」ボタンを忘れずに押してください。
ステップ4.設定を行う
We mentioned earlier that you can change your page settings before publishing your page. To do that, click the Page Settings button at the top of the page builder screen.
In the General settings, you can edit your page name and URL, publish your page and show your SeedProd affiliate link.
All in One SEOのようなWordPress SEOプラグインをインストールしている場合は、SEOタブをクリックして検索エンジン最適化の設定を入力することができます。
その他にアクセスできる設定には以下のようなものがある：
- Track the performance of your page with MonsterInsights, a powerful Google Analytics plugin for WordPress.
- ウェブページのヘッダー、本文、フッターにカスタムスクリプトを追加して、トラッキングとリターゲティングを行います。
- Give your page a custom domain name separate from your website (Elite plans only).
You can also click the Connect tab at the top of the page to link your page to your email marketing service, Google Analytics, spam protection, and Zapier.
ステップ5.ランディングページを公開する
When you’re ready to make your page live, click the Save button and select the Publish option.
Now, when visitors click your payment button, they’ll be able to check out using Stripe.
Method 2. Use a Plugin to Integrate a Payment Gateway with Your Landing Page
Another way to create a landing page with a payment option is to use a WordPress payment plugin.
WP Simple Payは、最も使いやすいWordPress決済プラグインの一つです。このプラグインを使えば、WordPressサイトのどの投稿やページにも、コードなしでStripe決済を追加できます。
So, if you don’t want to create a high-converting landing page and need a more straightforward option, WP Simple Pay is a great alternative to page builders.
注：WP Simple Payを使用して支払いを受け付けるには、有効なSSL証明書が必要です。WordPressにSSLを追加する方法については、こちらをご覧ください。
ステップ1.WPシンプルペイのインストールと有効化
The first step is to get your copy of WP Simple Pay from their website. Then, install and activate the plugin on your website.
プラグインがアクティブになると、自動的にセットアップ・ウィザードが表示され、セットアップ・プロセス全体が自動化されます。
セットアップ・ウィザードを開始するには、「Let's Get Started」ボタンをクリックします。
ステップ2.セットアップウィザードを完了する
The setup process has four steps. First, you’ll be asked to enter your WP Simple Pay license key, which you’ll find in your account dashboard’s Downloads section.
ライセンスキーを入力し、[Activate and Continue]ボタンをクリックします。
次の画面で、Stripeアカウントと接続する必要があるので、Connect with Stripeボタンをクリックします。
Now, you’ll need to log into your Stripe account and verify the connection.
支払いが完了したら、セットアップウィザードに戻り、顧客が受け取るメールを選択できます。
例えば、支払い領収書、支払い通知、請求書領収書、今後の請求書を送信できます。
Eメール通知を選択したら、「保存して続行」ボタンをクリックします。
The setup is now complete. The next step is to create a form for shoppers to enter their payment details. To do that, click the Create a Payment Form button.
ステップ3.支払いフォームを作成する
次の画面では、WP Simple Payで利用可能なさまざまな支払いフォームのテンプレートが表示されます。募金、商品とサービス、登録、寄付など様々なフォームタイプから選ぶことができます。
For this tutorial, we’ll choose the Payment Button template. To do so, hover over the template and click the Use Template button.
Your payment button settings will now open on the next screen. Here, you can edit general settings, including the button name, description, type, and payment success page.
支払いタブでは、支払いボタンのデフォルト価格を設定し、1回払いと定期払いを選択できます。
また、クレジットカード、口座引き落とし、アリペイ、Klarna、Clearpayなど、複数の支払い方法から選ぶことができる。
支払いボタンの設定のカスタマイズが完了したら、「公開」ボタンをクリックします。
ステップ4.ランディングページに支払いボタンを追加する
The next step is to add the payment button to your page. The WP Simple Pay WordPress block allows you to add it anywhere on your page.
これを行うには、WordPressページを作成または編集し、コンテンツエディタでプラスボタンをクリックし、WP Simple Payブロックを選択します。
その後、ドロップダウンメニューから支払いボタンを選択できます。
After updating or publishing your payment page, you can preview your payment button and gateway in action.
それだけだ！
よくある質問
Transaction fees: How much does each gateway charge per transaction?
Supported countries: Does it work in the countries where you do business?
Accepted payment methods: Does it support the cards and payment options your customers use?
Integration: How easily does it work with your website or shopping cart?
Security: How secure is the gateway?
Cost: Some tools, like WooCommerce, have fee payment options built in with optional paid extensions. Others are premium plugins with pricing for different budgets.
Some popular options include Stripe, PayPal, Square, and Braintree.
You now know how to make your landing page with payment gateway functionality.
Eコマース・ストア全体の作成に興味がある方は、こちらのチュートリアルを参考にしてください：
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
