自分のサイトに独自のクレジット決済機能を導入する方法を解説します。特に今回はWordpress(ワードプレス)でサイトを作成している場合に、WordPressのプラグインとStripe(ストライプ)という決済サービスを連携して実現していきます。
noteなどで自分のコンテンツを販売する人も多いですが、突然Banされたりする場合もありますので、決済機能を個人サイトにいれることで、誰にも依存しない、そして手数料を最小に抑えることが可能です。
なお、実店舗のカード決済場合はSquareがおすすめです。
この機能を入れることでデジタルコンテンツを自分で販売、woocommerce(通販サイト)でクレジット決済機能を入れたりが容易になります。
あなたのサイトにクレジット決済機能を付ける方法について
クレジットを使うにあたってStripeというサンフランシスコに本社を構えグローバル展開している決済機能のプラットフォームを利用します。
Stripeは以下のような世界的に有名な企業も利用しています。もちろん個々の会社は、今回紹介するwordpressプラグインではなく独自の仕様で利用しています。
知っている企業ばかりですね！日本ではまだまだのStripeが世界を見るとあらまぁーということがわかると思います。
このStripeの特徴は以下の通りです。
何と言っても手数料が低いことが目を引きますね。noteでも手数料は10%なので1/3と考えると、利益率を大幅にアップさせることができますよね。余計な初期費用や月額固定費がないのも助かります。
Stripeに登録しよう！
まずはStripeにアカウントを作るところから始まります。
アカウントの登録はこちらをクリック
・メール
・名前
・パスワード
・パスワードはの確認(2回目入力)
の4つを入力して「アカウントを作成」をクリックします。
アカウントが作成されて以下のような画面に遷移します。いわゆる管理画面というものになります。
このページをいじっていく前に、登録したメールアドレスにメールが届いていますのでメールを見に行きましょう。
登録したメールアドレスに以下のようなメールが届いていますので、「メールアドレスを確認」をクリックします。
「メールアドレスを確認」をクリックすると新しいウィンドウが開き、「メールアドレスを確認してください」から「メールアドレス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」にサイト名やメールアドレスが表示されます。
・Test Mode：テストモードを有効にするか指定します。Enableがテストモードです。
・Account Country：Stripeアカウントの国を選択します。日本になると思います。
・Stripe Checkout Locale：Auto-detectにするとユーザーの求める言語でStripeの支払いが表示されます。Auto-detectで良いでしょう。
General(一般)設定をしよう
2個目のタブのGeneralを選び設定していきます。
General
Currency OptionsとStyles
支払い通貨のオプションを設定していきます。
チェックを入れると千単位ごとのカンマがピリオドになります。チェック無しで良いでしょう。
StylesのOpinionated Stylesは、Enabledで、自動的に「WP Simple Pay Lite」のスタイルがフィールド、ボタンに適用されることになります。こちらもEnableで良いでしょう。
reCAPTCHAの設定について
reCAPTCHAはGoogleが提供する、スパム対策の技術でロボットが勝手に支払いを進めているのではなく、ちゃんと生身の人間が支払いを実行していることを認識する機能です。
reCAPTCHAについてはこちらを参考にしてみてください。
Other
Otherは特に触る必要はありません。Save SettingsはYesにチェックを入れて、Usage TrackingのAllowにはチェック無しで良いでしょう。
支払いフォーム(payment form)を設定しよう
Payment options(支払いオプション)
まずはTest Modeでテストをしてみましょう。
On-Site Form Display(サイト側の表示)
Stripe Checkout display(ストライプの決済表示)
Subscription Options(登録オプション)
プラグインの有料版(WP Simple Pay Pro Plus以上)の機能になります。購入時に購入者登録して、無料試用期間など設けたり高度なことができます。Pro版は年間249ドルになります。
公開してショートコードを張り付けよう
設定が済んだら記事の投稿のようにフォームを「公開」います。固定ページや投稿ページにショートコードを張り付ければ商品販売を作ることができます。
ショートコードは[simpay id=”xxxx”]という形式になっています。Gutenbergエディターの場合は、ブロックを追加してショートコードを選択して[simpay id=”xxxx”]をペーストしましょう。
試しに作ったものはこちらになります。
[simpay id=”2213″]
購入に進むボタンだけになりますので、商品の説明書きは自分で投稿や固定ページから作る必要があります。
WordPressプラグイン Stripe Paymentsの使い方
使うプラグインは「Stripe Payments」というWordpressのプラグインです。
「Stripe Payments」のほうが設定項目が多く少し大変ですが、「Stripe Payments」の機能の中に商品を追加できるところに大きな違いがあります。
なお、Woocommerceを利用している場合は、「WooCommerce Stripe Payment Gateway」がおすすめです。
インストールして有効化すると管理画面のメニューのトップ階層に「Stripe Payments」が追加されます。
Stripe Paymentsの下準備(設定方法)
General Settings(一般設定)
まずは「Setting」から「General Settings(一般設定)」をしていきましょう。
ここからCredentialsを入力していきます。Stripe側の管理画面で取得したTest APIキーを入力していきます。
にコピペして入力しましょう。
Debug部分はとりあえずデフォルトのままで問題ありません。
※「Live Mode」が実際に販売をする状態になります。販売がスタンバイできたら、「Live Mode」にチェックを入れます。
また、「Live Mode」のチェックと合わせて、
・Live Stripe Publishable Key
・Live Stripe Secret Key
にキーを入力することで、テストモードから実際の販売が可能になります。
Email Settings
購入時のメールの設定をしていきます。いわゆる、「ご購入ありがとうございました。」など購入者へメールする内容を決めていきます。ここの設定はあとからやっても問題ありません。
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}
続きです。
自分に届くメールなので好きな本文で良いですが、以下のような感じが想定されます。
こんにちわ！
この度は、{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の設定でこの利用規約を有効にすることができます。
販売する商品を登録しよう
基本的な設定が完了したところで、Wordpressのサイト上で販売する商品を登録していきましょう。
販売する商品は実体のあるモノでも良いですし、デジタルコンテンツやコンサルなどの実体のないモノでも大丈夫です。
管理メニューから「Stripe Payments」→「Add New Product」を選び商品を登録していきます。
登録するものは左側のピンク色の枠の項目になります。順序は違いがあるかもしれません。上級の設定やクーポンの設定は割愛致します。知りたい場合はコメントにメッセージをお願いします。
なお、右側のピンク色の枠は、登録商品のショートコードになります。ショートコードを投稿ページの本文中に記載することでページ上で商品販売が可能になります。
詳細
商品の詳細を入力します。Wordpressのクラシックエディターになりますので入力操作については難しくありません。
商品の詳細の書き方は、Amazonや楽天を参考にして写真、価格、商品の特徴を記入していきましょう。Apple製品のような商品ページを作っても良いと思います。
めっちゃ簡単にこんな感じで書いてみました。
ここにもっと、どんなコンサルをするのか、どんな成果があげられるのか、費用の内容の説明などが含まれるべきですね。
短い詳細
購入ボタンを押すと表示される決済のポップアップ画面に短い説明を付け加えられます。
下の画像ではポップアップの商品名の下に、「3か月徹底サポートします」と表示されていますが、この部分が短い詳細になります。
価格＆通貨
一括支払い(One-time payment)、商品の価格(Price)、通貨(Currency)の設定をします。余程のことがなければ日本円を選ぶでしょう。
数量＆在庫
こちらもすぐに設定できます。顧客に個数を変更できるようにするか、セット販売の場合はその数量、また在庫の数量と売れるたびに減らしていくか設定ができます。
発送＆税金
送料と消費税率を設定します。
送料は無料のほうが購入率が高まりますので、商品代金に含めこの部分は空欄にしましょう。またTax(%)は10%の消費税になりますので10%と記載するか、税込みの金額を設定して税込みであることを明示しましょう。
現在の住所
現在の住所という項目が少し変ですが、この項目は、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やカラーミーショップを利用しなくても済みますよね。
コメント・質問する