• メニュー
  • メニュー
wordpressに決済機能stripe

【サイトに決済機能】WordPressでクレジット決済システムを作るプラグイン(Stripe)

自分のサイトに独自のクレジット決済機能を導入する方法を解説します。特に今回はWordpress(ワードプレス)でサイトを作成している場合に、WordPressのプラグインとStripe(ストライプ)という決済サービスを連携して実現していきます。

noteなどで自分のコンテンツを販売する人も多いですが、突然Banされたりする場合もありますので、決済機能を個人サイトにいれることで、誰にも依存しない、そして手数料を最小に抑えることが可能です。

なお、実店舗のカード決済場合はSquareがおすすめです。

この機能を入れることでデジタルコンテンツを自分で販売、woocommerce(通販サイト)でクレジット決済機能を入れたりが容易になります。


あなたのサイトにクレジット決済機能を付ける方法について

クレジットを使うにあたってStripeというサンフランシスコに本社を構えグローバル展開している決済機能のプラットフォームを利用します。

Stripeは以下のような世界的に有名な企業も利用しています。もちろん個々の会社は、今回紹介するwordpressプラグインではなく独自の仕様で利用しています。

【サイトに決済機能】Wordpressでクレジット決済システムを作るプラグイン(Stripe)

知っている企業ばかりですね!日本ではまだまだのStripeが世界を見るとあらまぁーということがわかると思います。

このStripeの特徴は以下の通りです。

  • 3.6%の手数料(決済成立ごと)
  • 支払いの管理に必要な機能を完備
  • 毎年多数の機能更新が入手可能
  • 初期費用は無料、月額費または隠れた手数料は一切なし

何と言っても手数料が低いことが目を引きますね。noteでも手数料は10%なので1/3と考えると、利益率を大幅にアップさせることができますよね。余計な初期費用や月額固定費がないのも助かります。


Stripeに登録しよう!

まずはStripeにアカウントを作るところから始まります。

アカウントの登録はこちらをクリック

・メール
・名前
・パスワード
・パスワードはの確認(2回目入力)

の4つを入力して「アカウントを作成」をクリックします。

独自決済導入のStripe登録

アカウントが作成されて以下のような画面に遷移します。いわゆる管理画面というものになります。

このページをいじっていく前に、登録したメールアドレスにメールが届いていますのでメールを見に行きましょう。

登録したメールアドレスに以下のようなメールが届いていますので、「メールアドレスを確認」をクリックします。

Stripeメール確認

「メールアドレスを確認」をクリックすると新しいウィンドウが開き、「メールアドレスを確認してください」から「メールアドレスxxxxx@xxxxxを確認しました」に変わります。

まずは、Stripeでどんな感じで決済ができるのか、「テストAPIキーの取得」をしてテストしてみましょう。

>テストAPIキーの取得をクリックすると、

・公開可能キー
・シークレットキー

が表示されますのでこちらを利用していきます。シークレットキーは右側にある目のようなボタンをクリックすると表示されます。


WordPress プラグインをインストールしよう

WordPressのStripeプラグインはいくつか提供されています。ここでは「WP Simple Pay Lite」と「Stripe Payments」の2つをご紹介します。

シンプルなのは名の通り「WP Simple Pay Lite」ですので、まずこちらから試して、Stripeに慣れてみるのが良いでしょう。

WordPressプラグイン WP Simple Pay Liteの設定方法

使うプラグインは「WP Simple Pay Lite」というWordpressのプラグインです。

Stripe Paymentsと入力すると上のほうに青い+Stripeというアイコンのプラグインが表示されると思いますので、こちらをインストールし有効化します。

Stripe Setupをしよう

まずは基本設定のStripe Setupから設定していきます。

管理メニューに「Simple Pay Lite」が追加されているので、「Settings」をクリックして、プラグインの設定をしていきます。この「Settings」で設定したものが、別の設定項目で登場するGlobal Settingとなります。

まず、プラグインとStripeを接続します。「S Connect with Stripe」をクリックします。

すると、stripeのページに遷移してログイン画面が表示しますので、Stripeにログインします。

ログインが住むと、WP Simple PayがStripeアカウントに連結を希望してるよー、と表示されていますので、その下に続く質問や記入事項を入力していきます。すべて日本語なので問題ないと思います。

・コンプライアンス関連の質問
・本番環境利用の申請
・クレジットカードの明細書
・銀行の詳細
・2 段階認証

すべて完了したら「このアカウントへのアクセスを許可する」をクリックして接続を完了します。

無事に連結が完了すると、またもとのプラグイン設定の画面に戻り、接続が確認できます。「Connection Status」にサイト名やメールアドレスが表示されます。

Wordpressに決済機能 WP Simple Pay Liteの使い方

Test Mode:テストモードを有効にするか指定します。Enableがテストモードです。
Account Country:Stripeアカウントの国を選択します。日本になると思います。
Stripe Checkout Locale:Auto-detectにするとユーザーの求める言語でStripeの支払いが表示されます。Auto-detectで良いでしょう。

General(一般)設定をしよう

2個目のタブのGeneralを選び設定していきます。

General

  • Payment Success Page:支払い完了ページ
  • Payment Failure Page:支払い失敗ページ
  • Payment Cancelled Page :支払いキャンセルしたときのページ
Wordpressに決済機能 WP Simple Pay Liteの使い方

Currency OptionsとStyles

支払い通貨のオプションを設定していきます。

  • Currency:取引するときの通貨を指定します。
  • Currency Position:通貨マークの位置を指定します。
  • Separators :金額のカンマ、ピリオドを指定します。

チェックを入れると千単位ごとのカンマがピリオドになります。チェック無しで良いでしょう。

Wordpressに決済機能 WP Simple Pay Liteの使い方

StylesのOpinionated Stylesは、Enabledで、自動的に「WP Simple Pay Lite」のスタイルがフィールド、ボタンに適用されることになります。こちらもEnableで良いでしょう。

reCAPTCHAの設定について

reCAPTCHAはGoogleが提供する、スパム対策の技術でロボットが勝手に支払いを進めているのではなく、ちゃんと生身の人間が支払いを実行していることを認識する機能です。

reCAPTCHAについてはこちらを参考にしてみてください。

Other

Otherは特に触る必要はありません。Save SettingsはYesにチェックを入れて、Usage TrackingのAllowにはチェック無しで良いでしょう。

  • Save Settings:設定をプラグインをアンインストールしたときに削除するか
  • Usage Tracking:あなたの活動をプラグインが追跡できるか

支払いフォーム(payment form)を設定しよう

Wordpressに決済機能 WP Simple Pay Liteの使い方

Payment options(支払いオプション)

  • Payment Mode:テストモードか本番が選べます。Globalは設定で選択したものが優先されます。
  • One-Time Amount:
  • Payment Success Page:支払い完了画面(ページ)を選びます。Globalは設定で選択したものが優先されます。

まずはTest Modeでテストをしてみましょう。

On-Site Form Display(サイト側の表示)

  • Payment Button Text:支払いボタンの文字を設定します
  • Payment Button Processing Text:支払いが進むときに表示する文字を設定します。
  • Payment Button Style:支払いボタンの外観を設定します。

Stripe Checkout display(ストライプの決済表示)

  • Company Name:会社やサービスの名前になります(フォームのヘッダーにも)
  • Item Description:商品の説明を記入します
  • Image:商品の画像を設定します
  • Submit Button Color:Stripe側のブランディングで設定します
  • Submit Button Type:Pay(支払い) Donate(寄付) Book(予約)を選びます
  • Require Shipping Address:発送先住所を求めるかどうか
  • Require Billing Address:請求書先住所を求めるかどうか

Subscription Options(登録オプション)

プラグインの有料版(WP Simple Pay Pro Plus以上)の機能になります。購入時に購入者登録して、無料試用期間など設けたり高度なことができます。Pro版は年間249ドルになります。

公開してショートコードを張り付けよう

設定が済んだら記事の投稿のようにフォームを「公開」います。固定ページや投稿ページにショートコードを張り付ければ商品販売を作ることができます。

ショートコードはという形式になっています。Gutenbergエディターの場合は、ブロックを追加してショートコードを選択してをペーストしましょう。

試しに作ったものはこちらになります。

Test Mode

購入に進むボタンだけになりますので、商品の説明書きは自分で投稿や固定ページから作る必要があります。



WordPressプラグイン Stripe Paymentsの使い方

使うプラグインは「Stripe Payments」というWordpressのプラグインです。

「Stripe Payments」のほうが設定項目が多く少し大変ですが、「Stripe Payments」の機能の中に商品を追加できるところに大きな違いがあります。

なお、Woocommerceを利用している場合は、「WooCommerce Stripe Payment Gateway」がおすすめです。

インストールして有効化すると管理画面のメニューのトップ階層に「Stripe Payments」が追加されます。

Stripe Paymentsの下準備(設定方法)

General Settings(一般設定)

まずは「Setting」から「General Settings(一般設定)」をしていきましょう。

  • Checkout Result Page URL : ここに購入後に、ご購入ありがとうございますと表示するページを指定します。
  • Products Page URL:商品ページを指定します。
  • Currency:日本円取引ならばJapanese Yen (JPY)を選びます。
  • Currency Symbol :¥マークを選びます。
  • Button Text :購入ボタンの文字を入力します。
  • Payment Popup Button Text :空欄でOKです。
  • Do Not Save Card Data on Stripe:チェックなしで良いでしょう。
  • Turn Off “Remember me” option : チェックは入れないで良いでしょう。
  • Validate ZIP Code:チェックを入れると、カード発行銀行が請求先の郵便番号を確認できなかった場合支払いがブロックされます。Stripeの管理画面からも設定が必要になります。
  • Stripe Checkout Language:Japaneseを選びます。
  • Popup Default Country :国内販売ならばJapanを選びます。デフォルトの国をどこにするかです。
  • Hide the State Field :チェックは入れないで良いでしょう。
  • Prefill Logged In User Name and Email :名前とメールアドレスの自動入力になります。チェックを入れておいても良いでしょう。

ここからCredentialsを入力していきます。Stripe側の管理画面で取得したTest APIキーを入力していきます。

  • 公開可能キー ⇒ Test Stripe Publishable Key
  • シークレットキー ⇒ Test Stripe Secret Key

にコピペして入力しましょう。

Debug部分はとりあえずデフォルトのままで問題ありません。

※「Live Mode」が実際に販売をする状態になります。販売がスタンバイできたら、「Live Mode」にチェックを入れます。

また、「Live Mode」のチェックと合わせて、
・Live Stripe Publishable Key
・Live Stripe Secret Key
にキーを入力することで、テストモードから実際の販売が可能
になります。


Email Settings

購入時のメールの設定をしていきます。いわゆる、「ご購入ありがとうございました。」など購入者へメールする内容を決めていきます。ここの設定はあとからやっても問題ありません。

  • Send Receipt Email Froma Stripe : チェックを入れると、支払いがうまくいくとStripeからレシート(受領)メールが送信されます。テストでは発行されません。
  • Send Emails to Buyer After Purchase:チェックを入れると、プラグインが購入者に対して詳細メールを送ります。例えば情報商材だとしたらそのリンクメールなどです。
  • Buyer Email Content Type :メールのフォーマットを選びます。(PlainかHTMLの2種類です)
  • From Email Address:購入者にメールを送るときの送信元の名前/メールアドレスになります。
  • Buyer Email Subject :購入者へ送るメールの件名になります。
  • Buyer Email Body:購入者へ送るメール本文になります。

Click here to toggle tags hintをクリックするとメール本文で使えるタグ一覧が表示されます。メール本文はこのような形で作成ができます。

あなたがよく使う通販で購入したときのメールを参考にして作るのが良いでしょう。

こんにちわ!

この度は、{item_name}のご購入ありがとうございました。
以下の商品をご購入されましたのでご確認お願い致します。

商品名:{item_name}
購入数:{item_quantity}
ご購入日:{purchase_date}
価格:{item_price}
送料:{shipping_amt}


合計価格:{purchase_amt_curr}

発送先:{shipping_address}
メールアドレス:{payer_email}
取引ID:{transaction_id}

続きです。

  • Send Email to Seller After Purchase : チェックを入れると、売主のあなたにメール通知がきます。
  • Notification Email Address:入力したメールアドレスに通知が届きます。
  • Seller Email Content Type :メールのフォーマットを選びます。(PlainかHTMLの2種類です)
  • Seller Email Subject :売主のあなたに送るメールの件名になります。
  • Seller Email Body:売主のあなたに送るメール本文になります。

自分に届くメールなので好きな本文で良いですが、以下のような感じが想定されます。

こんにちわ!

この度は、{item_name}のご購入ありがとうございました。
以下の商品をご購入されましたのでご確認お願い致します。

商品名:{item_name}
購入数:{item_quantity}
ご購入日:{purchase_date}
価格:{item_price}
送料:{shipping_amt}


合計価格:{purchase_amt_curr}

発送先:{shipping_address}
メールアドレス:{payer_email}
取引ID:{transaction_id}

続きは以下の設定です。

Transaction Error Email Settings(通信エラーのメール設定)

・Send Email On Payment Failure ⇒ 支払いが失敗したらメールを送るか。チェックを入れてよいでしょう。
・Send Error Email To:上の通知を送るメールアドレスを指定します。

Additional Email Settings(追加メール設定)はチェックしなくても問題ないでしょう。

Advance Settings

Advance Settingsはいじらないでも問題ありませんが、変更するとすれば「Terms and Conditions」の部分になると思います。

「Terms and Conditons」とは利用規約になります。あなたも購入や登録の際に利用規約にチェックするシーンをよく見たことがあると思います。

Stripe Paymentsの設定でこの利用規約を有効にすることができます。

  • Enable Teams and Conditions : チェックを入れると、利用規約が有効になります。
  • Checkbox text:私はこの規約に従います、という文言を決めます。
  • Store Customer’s IP Address :有効にすると顧客のIPアドレスが注文情報に含まれます。
  • Position :TOS(Term of service)も利用規約ですが、このチェックボックスの位置を指定します。

販売する商品を登録しよう

基本的な設定が完了したところで、Wordpressのサイト上で販売する商品を登録していきましょう。

販売する商品は実体のあるモノでも良いですし、デジタルコンテンツやコンサルなどの実体のないモノでも大丈夫です。

管理メニューから「Stripe Payments」→「Add New Product」を選び商品を登録していきます。

登録するものは左側のピンク色の枠の項目になります。順序は違いがあるかもしれません。上級の設定やクーポンの設定は割愛致します。知りたい場合はコメントにメッセージをお願いします。

  • 詳細:Wordpressの投稿のように商品の詳細を記載します
  • 短い詳細:決済時に表示される短い説明を記載します
  • 価格&通貨:商品の価格、通貨を設定します
  • 数量&在庫 :購入数量の指定、在庫数量の設定をします
  • 発送&税金 :送料の設定、税金の設定をします
  • 現在の住所:請求書住所、発送住所を集めるか設定します
  • ダウンロードURL:デジタルコンテンツなどダウンロード販売の場合はURLかファイルを指定します
  • Product Thumbnail:商品のサムネイルを指定します
  • お礼ページURL:購入者に表示するお礼ページを指定します
  • 外観:ボタンの外観や、合計金額の表示有無を設定します

なお、右側のピンク色の枠は、登録商品のショートコードになります。ショートコードを投稿ページの本文中に記載することでページ上で商品販売が可能になります。

詳細

商品の詳細を入力します。Wordpressのクラシックエディターになりますので入力操作については難しくありません。

商品の詳細の書き方は、Amazonや楽天を参考にして写真、価格、商品の特徴を記入していきましょう。Apple製品のような商品ページを作っても良いと思います。

めっちゃ簡単にこんな感じで書いてみました。
ここにもっと、どんなコンサルをするのか、どんな成果があげられるのか、費用の内容の説明などが含まれるべきですね。

短い詳細

購入ボタンを押すと表示される決済のポップアップ画面に短い説明を付け加えられます。

下の画像ではポップアップの商品名の下に、「3か月徹底サポートします」と表示されていますが、この部分が短い詳細になります。

価格&通貨

一括支払い(One-time payment)、商品の価格(Price)、通貨(Currency)の設定をします。余程のことがなければ日本円を選ぶでしょう。

数量&在庫

こちらもすぐに設定できます。顧客に個数を変更できるようにするか、セット販売の場合はその数量、また在庫の数量と売れるたびに減らしていくか設定ができます。

発送&税金

送料と消費税率を設定します。

送料は無料のほうが購入率が高まりますので、商品代金に含めこの部分は空欄にしましょう。またTax(%)は10%の消費税になりますので10%と記載するか、税込みの金額を設定して税込みであることを明示しましょう。

  • Allow users to Specify quantity :
  • 短い詳細:決済時に表示される短い説明を記載します
  • 価格&通貨:商品の価格、通貨を設定します
  • 数量&在庫 :購入数量の指定、在庫数量の設定をします
  • 発送&税金 :送料の設定、税金の設定をします
  • 現在の住所:請求書住所、発送住所を集めるか設定します
  • ダウンロードURL:デジタルコンテンツなどダウンロード販売の場合はURLかファイルを指定します
  • Product Thumbnail:商品のサムネイルを指定します
  • お礼ページURL:購入者に表示するお礼ページを指定します
  • 外観:ボタンの外観や、合計金額の表示有無を設定します

現在の住所

現在の住所という項目が少し変ですが、この項目は、Billing address(請求先住所)と商品が送られるShipping Addresses(発送先住所)を記録して集めるかどうかの設定になります。

「Collect Address on Checkout」にチェックを入れて「Collect Both Billing And Shipping Addresses」を選択するで良いと思います。

ダウンロードURL

コンテンツ販売でお客さんにダウンロードしてもらう場合は、ここにダウンロードファイルを指定します。

外部や内部のURLを指定することもできますし、メディアライブラリにPDFなどを保管しておいてそこから選ぶことも可能です。

Product Thumbnail

商品のサムネイル画像のURLを指定します。上のダウンロードURLと同様にメディアライブラリから画像を選択することもできます。

チェックボックスがある「Don’t use product thumbnail in Stripe pop-up」をチェックすると、決済するときに表示されるポップアップにサムネイルを使用しない設定になります。

お礼ページURL

購入後に表示されるお礼ページのURLを指定します。

外観

購入ボタンのテキストを編集することができます。空欄にするとGeneral Settingで設定したテキストが表示されます。また外観もCSSで指定が可能です。

再掲載ですがこのようなボタンになります。水色の綺麗なボタンですね。

「Show Button Only」にチェック入れると数量とボタンのみが表示されるようになります。


商品が準備できたら自分でテスト購入してみよう

実際にクレジット決済をしてしまうと3.6%の手数料がかかってしまうので、Stripeが用意したテスト用のクレジットカード番号で購入のテストをすることができます。

詳細は英語ですがこちらから参照可能です。

以下の番号を自由に使うことができます。CVCは好きな番号で、有効期限も未来の好きな日付でOKです。VISAやMASATERなどいろいろなカードが利用可能です。

自分で購入ボタンを教えて、住所を入力し、「決済情報入力へ」をクリックするとカード情報を入力するポップアップに切り替わりますので、テストカードを入力してみましょう。

青いボタンを押すとぐるぐるっと絵が出て、決済完了すると緑のボタンに切り替わります。

そして、自動的にGeneral Settingsで「Checkout Result Page URL」に指定したページに画面が遷移し、以下のように画面が表示されます。この画面は固定ページで編集したページになります。

緑で囲ってある内容は、ショートコード [accept_stripe_payment_checkout] で自動表示可能です。


まとめ:Wordpressサイトにクレジット決済機能を

設定項目は多いですが、慣れてしまえば難しくありません。ただ英語ってところだけが苦手な方にはハードルですね。

でもでも、難しいことは書いてありませんし、難しい設定が必要なわけではありません。上で紹介した通りに試しに1個商品を作ってみてください。固定ページで作成すればだれにも見られずテストすることができます。

手数料も低く自由に自分のサイトで販売できるようになると、ビジネスアイディアもいろいろ出てくると思います。特にコンテンツ販売の場合はシンプルな決済で良いので相性が良いと思います。

通販サイトを作る場合には、Woocommerceなどの有料テーマを導入し、Stripeと連携するのがおすすめ手法です。そうすれば、shopifyカラーミーショップを利用しなくても済みますよね。

   

有益情報も流しているのでツイッターもぜひフォローお願いします。


                   
参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です