Stripeでブログにクレジット決済を導入する方法【Full Stripe】

2020年7月12日

2021年3月10日

WRITER

竹内ゴロー

　

この記事を書いている人 - WRITER -

竹内ゴロー

ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

そんな疑問を解決します。

決済手段はいろんな方法があるんですが、いろんな決済手段を導入してきた私タケがよく使っているのがstripeというものです。

その中で、今回はstripeの導入方法をまとめました。

Stripeをブログに導入し、クレジットカードで都度決済する方法

最終的な完成形はこちらです。

情報を入力すると、実際にお金が支払われてしまうので、入力しないようにしてくださいね笑

stripeでできることはクレジットカード番号入力フォームを作ることで、その下の注意事項はブログ記事を書くのと同じように作ります。

1. stripeのアカウント作成
2. プラグイン設定
3. 固定ページに、決済フォームを導入する
4. 注意事項を記載する

が基本的な流れです。

まずはstripeのアカウント作成からやっていきましょう！

stripeのアカウント作成

stripeにアクセスしてアカウントを作成します。

フォームに全て記入して、アカウントを作成をクリックします。

アカウントを作成すると以下の画面に映りますが、まだ使えません。

登録したと同時にメールがと届いてると思いますので、そこから確認します↓↓

確認すると「本番環境利用の申請」がクリックできるようになるので、そこから情報を入力していきます。

個人情報を入力していけばいいんですが、以下の部分だけ難しかったので、私の回答を載せました。

この部分は個人個人で回答が変わってきますので、わからない場合はstripe側に問い合わせてみてください。

アカウントが有効になると「本番APIキーの取得」がクリックできるようになります。

ここでstripeはログインした状態のままいったん放置です。

プラグインの設定

stripeはいろんなプラグインで設定できますが、私が使っている「WP Full Stripe Free」というプラグインで解説します。

まず「プラグイン」→「新規追加」から「WP Full Stripe Free」をインストールして、有効化します。

そして、プラグインはいったん放置し、固定ページで「支払い完了のお知らせ」ページを作り、クレジット決済終了後に転移するページを作成します。

支払いが完了したのを伝える内容でOKです。

決済が完了した後のサンクスページを先に作った方が作業が早いので、先に作っておきましょう。

この時点ではざっくりとしたものでOKです。

その後「Full stripe」→「setting」に移動すると以下のページが出てきます。

【WP Full stripe設定】

それぞれのキーを入力します。

• テストシークレットキー→テスト秘密鍵
• テスト公開可能キー→テスト公開鍵
• 本番公開可能キー→ライブ公開鍵
• 本番シークレットキー→ライブ秘密鍵

stripeホーム画面、以下の赤枠をクリックするとキーが確認できます。

このキーをコピー＆ペーストです。

キーが発行されるので、それを入力して、あとは先ほどの画像の設定でOK。

APIモードが「test」になっているので、支払いを実際に始める場合は「Live」に切り替えるのを忘れないようにしてください。（最初からLiveでもOK）

paymentで支払いの設定

次に「payment」で支払いの設定を行います。

画像の「Create New Form」をクリックして、新しいフォームを作成していきましょう！

以下の画像の通りに設定してみてください。

【3000円支払いのケース】

画像の赤枠のところのみ気をつけて、他は画像の通りでOK。

あとで編集もできますので、まずはこの設定で「Create Form」を押します。

「Payment Form」をクリックすると上の画面になります。

最初にデフォルトが1つ入っているので、それは消去しても構いません。

また、「Amount」が「30.00」というように小数点が表記されますが、そのまま放置でOK。

仕様上の問題ですが、これで3000円支払いできることが確認できています。

固定ページ作成

「支払い入力」などという固定ページを作成します。（題名は自由です）

そこに、HTMLで

を記入します。

今回は「threethuosand」という名前で作ったので、以下のようになります。

固定ページのタイトルは自由に決めて大丈夫ですが、「〇〇購入」「〇〇登録」などとしておくのが無難でしょう。

これで、固定ページを公開すると、

こんな感じに仕上がります。

そのページに以下のような注意事項を付け加えれば、決済ページが完成です。

完成したフォームを編集すると、少し違ったデザインにもできますので。編集してみてください。

基本的にはこの記事で作ったフォームでOKです。

ここで注意点なんですが、最初にフォームを作ると基本的に英語で表記されます。

それを日本語化にしないといけません。

【POEDITの編集】

＜日本語記入項目＞

• 「Email Address」→メールアドレス
• 「Card Holder’s Name」→氏名、名前、カード所有者名など（フォームに記したい日本語を記入
• 「Card Number」→カード番号
• 「Card CVV」→カードCVV、セキュリティーコードなどと記入
• 「Month」→月
• 「year」→年
• 「January〜December」→1月〜12月とそれぞれ記入

保存すると、「「wp-full-stripe-free-jp.mo」というファイルが完成。

先ほどのエックスサーバー「languages」に「「wp-full-stripe-free-jp.mo」をアップロード。

この後に決済ページを更新してみてください！

フォームができたら、自分のクレジットカードで決済しましょう！

手数料分が減ってしまいますが、ほとんどお金をかけずに実験できます。

最終的に自分の売り上げとして振り込まれますので、心配いりません。

Stripeでブログに定期支払い（継続購入）を導入する方法

月額制のサービスなどに使える方法がこちらの方法です。

こちらもいろいろあるんですが、私の場合は無料でやりたいので、基本的にメールアドレスを送ってもらうようにしています。（先ほど紹介したプラグインを有料版にすると定期支払いにも対応できます）

お問い合わせフォームは「contact form7」などで作っていると思いますので、それを使っていけばOKです。

この感じのフォームにメールアドレスを入れてもらえれば、あとはこちらで手続きを進めることができます。

ちなみに、定期支払いじゃないケースでもメールアドレスをいただくことで決済は可能です。

ただ、ブログに決済フォームを貼っている方が購入の手間がかからないので、個別決済の場合は先ほどのようにプラグインを導入しています。

stripeで定期支払い商品を作る

メールアドレス宛に請求を行うわけですが、それをする時にまずstripeで定期支払い商品を作る必要があります。

【商品の作成】

• 名前を入力
• 料金体系モデルを選ぶ（基本的には標準）
• 価格を設定する（ JPYになってるか確認）
• 定期支払いは「継続」、「一括」は都度購入
• 請求期間は「日次」「週次」「月次」「3ヶ月ごと」「1年ごと」が選べます
• 無料トライアルがある場合は日にちを入力

最後に「商品の保存」をクリックします。

顧客の追加

問い合わせでいただいたメールアドレスを顧客に登録します。

「顧客」→「＋新規」から顧客を追加です。

以下のような画面が出てきますが、名前とメールアドレスだけで登録できます。

他の情報はなくても大丈夫です。

支払い請求

「顧客」→「定期支払い」→「＋新規」をクリック。

以下のような画面が出てくるので、「顧客」「先ほど作った商品」を選択し、支払い方法は以下の画像のようにします。

ここは結構簡単です。

手動支払い用の請求書は支払い期限を設定することになりますので、任意の数字を記入しましょう！

基本的には1日でいいです。

過去にクレジットーカードで支払いが行われた場合は「登録されている支払い方法に自動的に請求する」こともできます。

定期支払いの場合は2回目以降の請求を「登録されている支払い方法に自動的に請求する」にするケースも多いです。

また、メモ欄は請求書に記載されるものなので、「ご利用ありがとうございます＋注意事項」を明記しておきましょう。

設定が終わったら「定期支払いのスケジュール」をクリック。

支払い開始時期や支払い終了日を設定することができます。

「定期支払いのスケジュール」をクリックすると定期支払いがスタートしますが、顧客に支払いを請求しないといけません。

このままではお金が入ってこないので、「インボイス」→「スケジュール済みの支払い」をクリック。

そのあとは以下の画像の流れで、請求書を送信できます。

確認後「請求書を送信」で終了

これであとはメールを送信したお客様に「このインボイスの支払いを行う」から支払っていただければOKです。

請求書は「設定」→「ブランディング」から若干デザイン変更ができます。

支払いが行われたかは以下から確認可能です。

有効になっていて、支払いが「成功」になっていればOKです。

このあたりの作業は実際に自分で決済してみるとわかりやすいですよ！

【注意】Stripeを導入するときは「特定商取引法の基づく表記」の記載とJCBへの申請をしよう！

stripeに導入するときは「特定商取引法の基づく表記」を固定ページで作りましょう！

特定商取引法に基づく表記

以下の内容を記入すれば、OKです。

商品やサービスによって異なってきますので、調整するようにしてください。

JCBへの申請

stripeは初期の状態ではJCBカードに対応していません。

もったいないので、申請するようにしましょう！

「設定」→「支払い方法」から以下の画面が出てきます。

申請する前には赤文字の位置にボタンがあるので、そこをクリック。

そのあとはstripe側からサイトの情報提供のメールがきたりするので、メールはしっかり確認するようにしましょう！

まとめ：stripeはでクレジット導入は商品があるなら試しておこう！

慣れてしまえば使いやすいですし、最初は自分で決済の実験をすることができます。

• 自分のサービス販売したい
• 定額制のサービスを導入したい

決済手段をブログに導入したい方は、ぜひ活用してみてください。

自分をサービスを販売する時に、stripeはかなり使いやすいですよ。

ブログでお金を稼ぐ方法〜最低月5万円稼ぐまでの全工程〜

2020-07-08