【簡単】WordPressで販売サイトを構築する方法【→Stripeを導入】

ブログ内でコンテンツを販売したいけど、どうすれば販売サイト的なものを作れるの?

こんな悩みを持っていないでしょうか?

最近だと、BASE、有料note、Brainなど様々なプラットフォームが存在しますが、結論から言うと、どれも手数料が高いんですよね。

手数料一覧
  • BASE=決済手数料(3.6%+40円)+サービス利用料(3%)
  • 有料note=決済手数料(5~15%)
  • Brain=決済手数料(12%〜24%)

このように、大体どのプラットフォームでも5%は平気で超えてきます。

しかし、今回お伝えする方法を使うことで、

誰でも簡単に!無料で導入でき!手数料が安い!販売サイトを構築することができるようになります。

というわけで本日は、

本日のテーマ
  1. 販売サイトを構築する方法
  2. Stripe Payments WordPress Pluginの導入方法
  3. Stripe Payments WordPress Pluginの設定方法

というテーマでブログを執筆していこうと思います。

\\おすすめブログテーマ//

WordPressで販売サイトを構築する方法

では、どうやって販売サイトを構築するの??

結論:Stripe Payments WordPress Plugin

Stripe Payments WordPress Pluginの画像
Stripe Payments WordPress Plugin

WordPressとStripe(決済代行サービス)を連携してくれるプラグイン

Stripeを聞いたことがない人は、PayPalと同じポジションだと考えれば分かりやすいですよ。

決済手数料が安い!

Stripeは、手数料が一律3.6%と激安の決済代行サービスです。

仮に、10万円のサービスが売れたら、3,600円が手数料なので、96,400円が売上となります。

このように、Stripeは決済手数料が最強に安いサービスとなっているので、販売サイトを構築するの際は、Stripeを導入するようにしましょう。

>>まだStripeのアカウント登録はこちらから

決済ページが綺麗!

CHANGEの決済ページ

オータニは、CHANGEというコミュニケーションプログラム販売しているのですが、その決済ページは非常に綺麗です。

このような決済ページの美しさは、成約率に大きな影響を与えます。

(見窄らしい決済ページから商品・サービスを購入しないなんて思わないですよね?)

なので、決済ページの美しさという点からも、Stripeを導入するのがいいでしょう。

Stripe Payments WordPress Pluginのインストール方法

どうやってStripe Payments WordPress Pluginを導入すれば?

インストール手順

Stripe Payments WordPress Pluginnのインストール画面

WordPressの管理画面から

「プラグイン」→「新規追加」→「検索窓にStripe Payments WordPress Plugin」→「今すぐインストール」→「有効化」

という手順でインストールしましょう。

必ずStripeのアカウントを作ってから行いましょう

Stripe Payments WordPress Pluginの設定方法

Stripe Payments WordPress Pluginの設定が複雑で分からない…

一つひとつ一緒に設定していきましょう!

設定画面へ

Stripe Payments WordPress Pluginをインストールし終わったら、

WordPress管理画面から「Sinple Pay Lite」→「Settings」という手順で設定画面へと行きます。

Stripe(ストライプ)設定

Accountタブ

まずは、必ず、Connect With StripeというボタンをクリックしてStripeと連携することを忘れないでください。

オータニは、すでに連携しているので、そのボタンが出現しません

Accountタブの画面

「Test Mode」は、ひとまず「Enable」にしておきましょう。すると、ユーザーが決済ができない状態となります。

なので、決済周りが全て整ったら「Disabled」を選択して、実際に決済できるようにしましょう。

「Country」は、「Japan」を選択しましょう。

最後に、変更を保存をクリックしましょう。

Localタブ

Localタブの画面

「Stripe Checkout」は、「Japanese(ja)」を選択しましょう。

そして、変更を保存をクリック。

General(一般)設定

Currencyタブ

Correncyタブの画面

「Currency(通貨)」は、「Japanese Yen(¥)」を選択。

「Currency Position」は、「Right(499¥)」を選択。すると、「¥」が右端に設置されるようになります。

「Separator」には、チェックマークを入れましょう。すると、「1,000」以上になった時に、数字にコンマが打たれるようになります。

最後に、変更を保存をクリック。

reCAPTCHAタブ

reCAPTCHAタブの画像

「Score Threshold」は、「Default」でOKです。

(確か、デフォルトの状態で「Default」だったハズ)

Advancedタブ

特に何もする必要なし。

Payment Confirmations設定

Payment Confirmationsは、決済時の設定です。

Pagesタブ

Pagesタブの設定

「Payment Success Page」は、決済が完了した時のサンキューページのことです。

「Payment Failure Page」は、決済がエラーになった場合のページのことです。

「Payment Cancelled Page」は、決済がキャンセルになった場合のページのことです。

これらのページは、固定ページで作成しておくようにしましょう。

最後に、変更を保存をクリック。

例:CHANGEのPayment Success Page
「Payment Success Page」の例

CHANGEでは、決済が完了したら、公式LINEから一方をもらい、個別サポートの日程を決めるという仕組みにしています。

One Time Pamentタブ

One Time Pamentタブの画像

「Confirmation Message」は、決済が完了した時のサンキューメールです。

デフォルトでは、全てが英語表記になっていますので、日本語に直しましょう。

そのままコピーして使って

購入ありがとうございます!

購入元: {item-description}
購入元: {company-name}
購入日: {charge-date}
金額: {total-amount}

最後に、変更を保存をクリック。

Stripe Payments WordPress Pluginで商品を作る

では、次に商品・サービスを作る作業に入っていきましょう。

商品・サービス作成画面へ

WordPress管理画面から「Simple Pay Lite」→「Add New」を選択します。

すると、商品・サービス作成画面へと移動します。

Payment Options設定

Payment Optionsの画面

Payment Mode」は、「Global Setting」にチェックを入れましょう。「Test Mode」にすると決済が出来ない状態となります。

One-Time Amount」は、商品・サービスの金額を設定します。

Payment Success Page」は、「Specific Page(特定のページ)」にチェックを入れ、決済が完了した時の固定ページを設定します。

「Specific Page」は、プルダウンメニューで選べるようになっています。

One-Site-Form Display設定

One-Site-Form Displaynの画面

Payment Button Text」は、ボタンに設置するテキストのことです。

Payment Button Processing Text」は、決済ページに移る際の読み込み時間に表示されるテキストのことです。

Payment Button Style」では、ボタンのデザインを選択することが出来ます。

「 Stripe blue=青色」「Default=灰色」という感じです。

もしも、よりデザインをかっこよくしたいということであれば、コーディングする必要があります。

Stripe Checkout Display設定

Stripe Checkout Display設定の画面

Company Name」は、決済ページに表示される名前のことです。

Image」は、決済ページに表示される商品画像のことです。オータニは会社のロゴを入れています。

Submit Button Type」は、決済ボタンのテキストのことです。

Require Shipping Address」にチェックを入れると、決済ページに商品の送り先住所の記入欄が出現します。

デジタルコンテンツを販売している人には関係ないのでチェック無しでOKです。

Require Billing Address」にチェックを入れると、決済ページに請求書を送る住所の記入欄が出現します。

上記のような設定にすると、下記のような決済ページになります。

▼▼▼▼▼▼

CHANGEの決済ページ

Subscription Options設定

特に、何もする必要なし。

決済ボタンを設置する方法

では、最後に決済ボタンを販売ページに設置しましょう。

手順1:ショートコードを見つける

Payment Formsの画面

WordPress管理画面から「Simple Pay Lite」→「Payment Forms」を選択します。

すると、ショートコードがありますので、それをコピーしましょう。

手順2:ショートコードを設置する

CHANGEのランディングページ

まずは、販売ページ内にショートコードのブロックを追加して、そこに先ほどコピーしたショートコードを設置しましょう。(Gutenbergの場合)

旧エディタの場合は、ページ内にそのまま貼り付ければOKです。

手順3:プレビューで確認する

CHANGEのプレビュー

そしtえ、ボタンをクリックすると、下記のように美しい販売ページが出現します。

▼▼▼▼▼▼

CHANGEの決済ページ

ボタンのデザインを変更したい

CHANGEのプレビュー

確かに、黒色のボタンってなんかダサいですよね?…

そういった場合は、

「Simple Pay Lite」→「Payment Forms」→「編集」→「One-Site-Form Display」→「Payment Button Style」のところを「Stripe blue」にしましょう。

すると、ボタンをおしゃれな青色にすることができます。

もしも、よりボタンをおしゃれにしたいという方はコードをいじれば出来ますが、コードをいじれない方は、プログラマーにお願いするのがいいでしょう。

ブログでお金を稼ぎたい

文章をどうやって書いたらいいのか分からない…
ブログへのアクセスが集まらない…
ブログからコンサルを取れない…
ブログを習慣にできない…

こんな悩みを抱えていないでしょうか?

正直、GoogleやYouTubeなどを使って、ブログの知識を得て、挑戦するにもアリだとは思います。

ただ、当たり前の話ですが、そのような独学による学習では、それなりの時間がかかるということは否定できません。

だから、しっかりコーチの指導を受けて、サイト運営をすることが必要となります。

あなたもブロプロになろう!

ブロプロとは、ブログでお金が稼げるプロになるというコンセプトの個別プログラムです。

心理学をベースにしたマンツーマンサポートなので、成果にコミットしやすいプログラムとなっています。

もしも、「ブログでお金を稼げるようになりたい!」という方は、下記の記事を参考にしてください。

ブロプロ

まとめ:WordPressで販売サイトを構築する方法

では、最後にまとめましょう。

本日は、

本日のテーマ
  1. 販売サイトを構築する方法
  2. Stripe Payments WordPress Pluginの導入方法
  3. Stripe Payments WordPress Pluginの設定方法

というテーマでブログを執筆しました。

Stripeを使うことで、誰でも簡単に決済ページを導入することが出来ます。

なので、「自分の商品・サービスを販売してみたい!」という方は、ぜひ導入するようにしましょう。

シェア嬉しい!